The fastest math typesetting library for the web

by jayhoon • 3 years ago

237 123 3 years ago

nomemory• 3 years ago

It is fast, I was previously using mathjax, and for a significant document I had to wait for a few seconds until the formulas were parsed and rendered. For the same document with katex, everything happens in less than a second.

MontyCarloHall• 3 years ago

This is amazing. Probably the final nail in the coffin of MathML; what’s the point of a non-human readable intermediary language that other higher-level languages get compiled to, that only works in certain browsers (and with browser-dependent rendering/implementation), when you can instead write directly in LaTeX and have KaTeX work identically everywhere?

simplotek5• 3 years ago

I believe MathML is still the only way to get proper math typesetting in epub, and I doubt katex is an option.

auggierose9• 3 years ago

Unfortunately MathML doesn't get you proper typesetting in epubs, so it has that in common with katex.

mkl6• 3 years ago

Katex supports ahead-of-time server-side rendering which just generates HTML, so it may indeed be an option.

mkl6• 3 years ago

MathML is not just for presentation. It encodes a lot of semantic information that Latex leaves out, and that information can be useful for accessibility, computer algebra system interoperability, etc. That said, I don't think it's used much for those things. I had really high hopes for MathML when it was first announced, but the poor browser support and consequential lack of use has been really disappointing.

edflsafoiewq4• 3 years ago

Marking up the semantic structure of all your mathematical formulas is about as likely as marking up the parse tree and parts of speech for all your regular prose sentences. Presentational MathML is the only thing that matters; Semantic MathML is W3C semantic web wank.

Georgelemental5• 3 years ago

MathML is faster to render. KaTex is a lot faster than MathJax but the difference remains noticeable. (Firefox extension to force native MathML rendering: https://addons.mozilla.org/en-US/firefox/addon/native-mathml...)

esperent2• 3 years ago

You can pre-build katex, or render server side.

g8oz• 3 years ago

Igalia is doing amazing work shipping native MathML support for Chromium based browsers.

https://www.igalia.com/2023/01/10/Igalia-Brings-MathML-Back-...

tannhaeuser• 3 years ago

MathML support in Chrome has been greatly enhanced just in January [1].

I don't have strong opinions, but I guess the advantage over TeX is, as always, that MathML is much better integrated with the web stack and markup such that you can target math formulas using CSS, that it has much better accessibility, internationalization, and search, that you can use JS/DOM access with MathML for educational and science presentation apps, etc.

It's not like TeX is uncontroversially better (eg Turing completeness, terse, lacking editor support, print-oriented, purely presentational, ...)

[1] https://mathml.igalia.com/news/2023/01/10/mathml-in-chromium...

Edit: arguably MathML is excessive as well but at least its XMLism such as insistence on enclosing every operand in tags as the primary source of bloat and incomprehensibility in presentational math can be somewhat mitigated using SGML, as was already suggested with MathML's precursor in 1995 or so [2] for high school math and/or custom math fragments.

[2] https://www.w3.org/MarkUp/html3/maths.html

the__alchemist2• 3 years ago

I don't understand MathML's intent; likely because I have a different design mentality or model.

I like to represent things like this in 3 forms:

#1: Rendered notation for reading; what all these tools produce for people reading the document

#2: A clean, well-documented API for writing. This is the Latex, Mathjax, katex syntax etc, replete with backslashes.

#3: A representation in a computing language used to create the rendered form from the API. Depends on the language, but ie something like a set of structs and enums that can be manipulated by a compiler.

MathML is none of these; it's neither readable, nor writable, nor manipulable natively by a programming language.

runarberg5• 3 years ago

Think of MathML like SVG. It is a target language which browsers understand. With SVG you can write it in hand, but most likely you are gonna use a special editor (Inkscape) or a library (d3).

With MathML you can write your equations e.g. in libreOffice or pick a library like MathJax or TeXZilla.

In fact I wrote a library my self which compiles a AsciiMath derived language to MathML, it was my first time writing a compiler, and it was an absolute joy targeting MathML. The mapping between DOM nodes and XML nodes is a perfect fit for the web as it allows my to implement DOM as a direct target (`mathup(expression).toString()` vs. `mathup(expression).toDOM()` and even `mathup(expression).updateDOM(parentNode)`.

The documentation for MathML on MDN if fine actually, good enough for me to write a compiler. The structure of the language is much easier to compile to than LaTeX by nature of actually having a standard (as opposed to an implementation which functions as a standard).

MathML is a unique fit for what it was intended to do, which is a targeting language which browsers understand.

camdenreslink• 3 years ago

KaTeX is really old (like 9 or 10 years?). So if it was going to kill MathML, it probably already did it.

diarrhea• 3 years ago

I’m TeX parlance, that makes it an infant.

IshKebab2• 3 years ago

MathML was never alive to be killed. It's MathML that might kill Katex (with Chrome's recently improved support), not the other way around.

RyEgswuCsn• 3 years ago

I am not that familiar with MathML, but I can imagine programmatically manipulate math expressions with MathML; can TeX math expressions be manipulated in the same way?

kerkeslager2• 3 years ago

Is there a way to get this as just a single JS file, so I don't have to use node?

I can probably figure it out but if anyone already knows how it would save me some time.

EDIT: Figured it out: https://unpkg.com/katex

Timon3• 3 years ago

They have a wonderful section on just this in their installation guide: https://katex.org/docs/browser.html#download--host-things-yo...

kerkeslager2• 3 years ago

Ah, nice. I'm glad to see it's an officially-supported way of doing things.

mkl6• 3 years ago

There have been quite a few past discussions of Katex:

https://news.ycombinator.com/item?id=8320439 9 years ago, 98 comments.

https://news.ycombinator.com/item?id=19475273 4 years ago, 40 comments.

https://news.ycombinator.com/item?id=24742518 3 years ago, 87 comments.

gwgundersen• 3 years ago

I really like Katex. I used to use MathJax for my blog, but the page reflow was annoying. Now I use Katex with server-side rendering, and even pages with a lot of math load quickly and without reflow.

ihodes• 3 years ago

Greg's blog is a great example of Katex in the wild: http://gregorygundersen.com/

rosebay• 3 years ago

Katex is truly great. Fun trivia facts - one of its developers also played a core role in React (she is a legend)

3rd33• 3 years ago

I wonder how does it render synchronously without needing to reflow the page?

mkl6• 3 years ago

Server-side rendering will do that.

3rd33• 3 years ago

So this only refers to the server-side rendering mode, not in-browser rendering (which KaTeX supports too)?

the__alchemist2• 3 years ago

Nice! I hadn't heard of this. I have a plainly coded blog that uses math notation. MathJax was previously the speed limfac. I replaced the mathjax script with the ones recommended on the Katex installation page; drop-in replacement.

larodi• 3 years ago

The lib behind chatGpt rendering of latex script

keithalewis• 3 years ago

MathJax got a tune-up. It is much faster now

moffkalast5• 3 years ago

It may be fastest to render, but with that syntax I sure doubt it's fastest to write. It's barely human readable.

CrazyStat2• 3 years ago

It's standard LaTeX syntax. Almost everyone who writes a lot of math already knows it.

moffkalast5• 3 years ago

Ah yes why make something good when you can make it standard instead and force everyone bang their heads against the wall.

eviks2• 3 years ago

That excludes the vast majority of future users who will have to waste a lot of time learning it As well as current casual users

humean_being• 3 years ago

Its pretty much lingua franca for type setting mathematical formula. In my experience most math graduates already know it from typesetting their own work for assessment submission or publication.

bmacho2• 3 years ago

It is the lingua franca for type setting mathematical formula. It doesn't make it good. ASCIImath is easier to write, and easier to read in plain text, for example in e-mails (/reddit/HN/fb/discord/whatever people use).

MathJax for example eats ASCIImath, I don't know if KaTeX can do that.

BrandiATMuhkuh• 3 years ago

We use Katex extensively at Amy.app

Being able to render latex super fast is very important for us as we use it for live tutoring.

Shameless plug: We currently offer 2 free tutoring for Fractions and Calculus. Perfect to revise or even learn those topics. The cool thing is, Amy will find knowledge gaps from previous years/subjects as well. (No account need to try it out)

Fractions: https://learn.amy.app?inviteCode=f2d7h Calculus: https://learn.amy.app?inviteCode=zkjus

xpe8• 3 years ago

If you are able to write “shameless plug:”, you are probably also able to not write the commercial plug that came after that prefix.

Your comment serves you, not the general audience here. Every action of the kind above degrades the core purpose of HN.*

* It is not even necessary to appeal to the “if everyone did X” argument.

mk125• 3 years ago

You can compare MathJax, KaTeX, and your browser's MathML support with this website I made: https://mk12.github.io/web-math-demo/

xworld21• 3 years ago

Cool!

Would you consider adding a web font with the proper OpenType features to render the MathML content? The Igalia work in Chrome is quite decent when the font is good, but for now it needs to be set via CSS (presumably Chrome does not feel like bundling a math font just yet).

Some nice demos are at https://fred-wang.github.io/MathFonts/mozilla_mathml_test/ (with Latin Modern, the TeX Gyre's, FiraMath – other fonts are still glitchy).

mk125• 3 years ago

Oh interesting, I didn't realize that. I will try to look into that sometime (or would accept a patch if anyone else wants to).

runarberg5• 3 years ago

Nice. Do you accept PRs for other libraries. I wrote one myself a bit ago and wouldn’t mind seeing it there

mk125• 3 years ago

Sure, if it's a viable alternative (e.g. can at least handle all the examples in the dropdown), I'd accept a PR to include it.

Paul-Craft3• 3 years ago

Neat. Have you considered adding latex.js to the site?

mk125• 3 years ago

Thanks. I hadn't heard of latex.js before, but I just looked it up now, and it says "Math is typeset using KaTeX."

universemaster• 3 years ago

I am using temml for MathML. MUCH smaller output than katex: https://temml.org/

xigoi3• 3 years ago

Looks great! Is there a benchmark for comparison?

Edit: It seems that Temml is a fork of KaTeX, so the difference compared to KaTeX's MathML rendering should be minimal?

photochemsyn• 3 years ago

This is also a great aid to learing LaTex. I wonder if anyone has ever tried to make an OCR system that generates the appropriate LaTex from an picture of an equation?

Turns out the answer is yes:

https://github.com/lukas-blecher/LaTeX-OCR

thangalin• 3 years ago

A while ago I optimized KeenType, which is a Java-based fork of NTS that can convert TeX commands into SVG images:

https://github.com/DaveJarvis/keentype

The following tutorial shows the real-time rendering speed of KeenType within my text editor, KeenWrite:

https://youtu.be/vgyYXwwF_lc?list=PLB-WIt1cZYLm1MMx2FBG9KWzP...

KeenWrite can produce web pages from Markdown with the TeX commands included as either as plain TeX macros (usable by JavaScript TeX renderers) or as pre-rendered SVG elements (no JavaScript required).

giraj• 3 years ago

The speed of KaTeX is great, but the lack of support for diagrams (a la tikz-cd) is what makes KaTeX unsuitable for general adoption by mathematicians (e.g., mathoverflow.net and all online mathematical wikis I know use MathJax). KaTeX has some rudimentary support for diagrams though the {CD} environment, but something more fully fledged akin to tizk-cd or xymatrix is needed. There's been some discussion on their github (https://github.com/KaTeX/KaTeX/issues/219), but I wouldn't hold my breath.

xeonmc2• 3 years ago

Wait, MathJax supports tikz?

bmacho2• 3 years ago

AsciiMath has AsciiSvg: http://www1.chapman.edu/~jipsen/svg/asciisvgeditor.html (Well, no, rather the other way around, but sister projects.)

lilgreenland• 3 years ago

what is the advantage of tikz over SVG?

alephaleph• 3 years ago

mathematician-writable.

runarberg5• 3 years ago

This is a bold claim. In theory any library that defers rendering to MathML should be faster (including my own MathUp https://runarberg.github.io/mathup/). Has anyone run benchmarks to test this claim?

garbagecoder• 3 years ago

I am working on a project that needs to put latex in a browser. We are currently trying out different libraries, but so far Katex does seem the fastest.

garganzol• 3 years ago

I love the websites like katex.org - so useful while being static. If you take a look under the cover, you'll find that the website is built using Docusaurus - yet another cool project. So so useful. I want to live in the Web like that, without SEO noise, ads, cookie popups and all that nonsense.

Personally this is what I call Web 3.0 - fast, useful, mostly static websites.

The fastest math typesetting library for the web

Related Stories