MathJax vs KaTeX vs MathML vs Latex2Img

MathOnWeb

There is a multitude of options to display mathematics on the web including MathJax, Katex, MathML and Latex2Image. Which one is right for you?

TL;DR: Choose Mathjax.

Mathjax

Mathjax can work with latex or mathml input, then sends the code to the mathjax library which renders a “mathjax element”. This is a svg with fonts, which can also be copy pasted (right click). Are there limitations? Mathjax can render most of the “standard” Latex. So as long as your users don’t wanna go too crazy (e.g. tikz or some other specialized library), you’re fine with Mathjax. The major advantage is that it’s svg and thus looks “beautiful”, and you also do not need to compile every equation yourself. Often you’ll read that mathjax is a bit slow. But I found that even with lots and lots of math on the page, it would render fast.

The idea behind mathjax is not to do everything with mathjax, but to leave things like bold-font and italic to the html and only cover the mathematics of the page.

For example in Latex, you’d write:

Hello \textbf{World}, let's do some math: $\frac a b = c$

whereas in mathjax the equivalent for this is:

Hello <b> World </b>, let's do some math: $\frac a b = c$

Notice how the bold font is just regular html, it has nothing to do with mathjax. Mathjax only covers the mathematics on the page.

Mathjax keeps things nice and simple, you can choose delimiters for inline math (e.g. $ to start and $ to end as we’re used from latex) and for “display-math” (meaning a centered block element).

It’s very easy to get started with it, just import the mathjax library and optionally configure the mathjax object. Mathjax will do the rendering from there. Here’s an example config for the mathjax object:

MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'],['\\(','\\)']],
displayMath: [['$$','$$'],['\\[','\\]']],
balanceBraces: true,
processEscapes: true,
processRefs: true,
processEnvironments: true,
ignoreClass: "no-mathjax"
},
TeX: {
equationNumbers: { autoNumber: "AMS" },
extensions: ["[Contrib]/siunitx/unpacked/siunitx.js"],
Macros: {
mustbe: "\\overset{!}{=}",
RR: "\\mathbb{R}",
ZZ: "\\mathbb{Z}",
NN: "\\mathbb{N}",
QQ: "\\mathbb{Q}"
}
}
});

Here are the cornerstones explained:

  • inlinemath, displaymath: Delimiters for mathematics. Note that $ some math $ is NOT the default for inline-math, the default is \( some math \)!
  • ignoreClass: For example if you want to parse your entire page for mathematics except some parts, you can exclude those parts by surrounding them with the css-class specified in ignoreClass.
  • Macros: Macros as you’d know them from Latex
  • extensions: In case default Mathjax isn’t enough, it’s also possible to use (or write) additional extensions

Finally, here’s an example of some rendered Mathjax inline \( \int_0^\infty x^2\) and block \[\sum_{n=0}^3 n-3 = … \]

KaTeX

While with Mathjax there seem (almost) no Latex features missing, KaTeX can’t render a number of equations such as \overrightarrow{AB} or aligned equations. This disqualifies Katex for the moment being. Once it hosts a more comprehensive latex-feature set, it becomes a viable alternative to Mathjax, because it renders much faster. However, we never experienced any problems with the speed of mathjax, so I don’t really see the need.

MathML

The advantage of MathML is, that it can be interpreted by the browser. So for example, when you write <math xmlns=”http://www.w3.org/1998/Math/MathML“><mfrac><mn>1</mn><mn>2</mn></mfrac></math> into your html, the browser will display ½. Actually, let’s rather say it should, since it doesn’t work e.g. with Chrome Browser but does work with firefox. When you type $\frac 1 2$, the browser will display $\frac 1 2$ (unless you use mathjax). Overall, it can be said that this is a very shaky way to display your math and I don’t see any reason to do so.

A look at Google trends reveals, that MathML is clearly de-trending and being surpassed by Mathjax.

Converting Latex to image (png,svg,…)

That’s the way Wikipedia does it. On the downside, you’ll have to handle all the scaling and storing of images yourself. On the upside, there isn’t anything from latex, that can’t be rendered, and it’s fast. There are also two possibilities here: Either you only compile equations or you compile the entire thing. Compiling the entire thing is rather bad, since it’s not scalable width wise and all the text is not selectable anymore.

Bonus Option: Mixed

Since Mathjax perfectly handles most of the latex, it can be safely used for displaying math of a web page, for example together with a wysiwyg editor. However, sometimes you want to have the crazy latex stuff like tikzpictures anyways. There’s nothing wrong with combining mathjax and latex2image. You can handle the simple math with Mathjax and the the advanced latex stuff with a “latex” plugin for your wysiwyg editor.

Here’s what this could look like:

Bla bla bla it’s still html now some mathjax \(\frac a b = c\) and for the complex stuff latex2img like here:

latex2img

Conclusion

It’s a close race between Mathjax and compiling equations with latex to png’s and displaying them as images. I would recommend the Mathjax option, since Mathjax has gained wide support and will improve over time and saves development time. Also, when done correctly, Mathjax rendering can be quite fast.

To be sure not to make the wrong decision, take an example from Quora.com:

Read Stephanie Ho‘s answer to Should Quora use MathJax to display equations? on Quora

Leave a Reply

Your email address will not be published.