MathJax

Every few years I'd check to see if there was a good system for putting mathematical notation in a web page and always disappointed until now. Eureka, as Archimedes would say - MathJax is the solution. It is open source, extraordinarily easy to use, works in all browsers, and is text based, hence scalable on the page as text. A single line of setup in the header of an html document enables you to include LaTeX right in the html and have it render beautifully. Here's Cauchy-Schwarz, for example:

\[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]

The following LaTeX code mixed in right with the html renders this inequality:

\[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]

So you do have to learn some LaTeX, the subset relating to rendering mathematical formulas, but it's not that hard and there is a massive amount of documentation - it's based on Don Knuth's TeX, which mathematicians have been using for some time; many people are familiar with it and there are millions of documents written in it. Look at the code snippet: ...( \sum_{k=1}^n a_k b_k \right)^2.... "\" is an escape character, we know what "sum" is, and then underscore for a subscript, braces for grouping, and ^ for the upper limit of the sum or exponentiation, depending. It hardly even has to be explained. It is a language, so code has to be correct, but pretty straightforward as these things go and in keeping with broad practices in the field, as would be expected from someone like Knuth. The escape codes bracketing a LaTeX insertion are \[ ... \]. Right-click the inequality to see a popup menu including "Show Math As \( \blacktriangleright \)", then click "TeX Commands" to get a little popup window with the LaTeX.

To get started, all you have to do is create a simple html5 document with this line in the header:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

Then put the LaTeX above in the body, including the bracketing escape characters at start and end - \[ ... \]. Execute the html file in any browser locally or from a server and you should see the inequality.


There is a checklist when committing to a new technology like this. First of course is that it does the job. Check. The output is nice and fonts are downloaded as necessary to make sure it is. The fact it works in all browsers is a big deal and is possible because modern browsers implement Javascript and CSS standards pretty much the same, a development that has accelerated in recent years (the name "MathJax" derives from the Ajax type nature of the technology, with Javascript downloaded from a remote server). You want it to be reasonably easy and accessible, considering the technical constraints, free if possible. MathJax is all of that and the LaTeX connection makes it a nice match for the intended audience - arcane no doubt for the general public, but sensible for the mathematically inclined. The open source aspect means there is no restraint to its free use by all. You want the technology to be forward-looking, based on positive developing trends on the web, and that is certainly the case. Relatedly, it is important that the technology be recognized as valuable by many people; that way, there will continue to be resources like books and knowledgeable individuals to further spread the word, so the project has a future and will be maintained and available in years to come. That too is ensured, considering that the American Mathematical Society (AMS) and the Society for Industrial and Applied Mathematics (SIAM) now sponsor the MathJax project - they are leading research organizations. The leading light of MathJax is Professor Davide Cervone of Union College. He has a compact, most illuminating account of the project at the AMS.

Mike Bertrand

November 23, 2013


Update (4/5/2014): I've pushed MathJax pretty hard since writing the above, especially for the article on Gauss and the Fast Fourier Transform. Even when taking a moment to typeset the page, a fleeting little update at the bottom left appears - 50% done ... 83% done ... nice touch. Everything said earlier has become reinforced. I was having a little trouble aligning a series of equations on the equals sign; no problem - there is a fix by introducing extra spacing and none other than Professor Cervone pointed it out on a board somewhere.

I wouldn't have been able to do the FFT article without MathJax, not nearly as well anyway, and frankly, wouldn't have been interested in doing it. Images of the typeset math could've been used, but that would have been a less attractive and more arduous solution that sapped the fun right out of it. I think MathJax is big and opens a new door. Of all the amazing mathematics Leibnitz did, it may be that his notation was most enduring of all - \( dy / dx \), the most elegant and useful integral sign \( \int \), and all the rest. That does not diminish his importance, quite the contrary. So too for Don Knuth, \( \TeX \) may be of more lasting importance than The Art of Computer Programming.

This has to be put into the context of the massive knowledge diffusion represented by the Internet, by Google, by Wikipedia (a lot of high quality math), by archive.org, and on and on. Now you can create as well as receive, that is something.