Just another WordPress site

MathJax to the rescue!

For a long time, one of the biggest problems with web design has been the proper display of mathematical markup. For a few decades scientists have used and developed LaTeX to write papers and articles. LaTeX is extremely powerful, sometimes to the point of frustration, and without it science journals would be very primitive. LaTeX was so successful that its ancestor, TeX, actually developed into HTML. Given this, it’s quite surprising that HTML has not supported decent mathematical typesetting until very recently. This has lead to all sorts of plugins and kludges as people have tried various ways to enable web developers to embed mathematics, using any means necessary.

Most of these solutions were insufficient in some respect. The beautiful methods were not standards compliant or did not support all browsers. The ones which were standards compliant were ugly. The ones that used images were bandwidth intensive and didn’t support scaling. And most of them were awful to type, often losing the semantics of their LaTeX source code. In frustration I was moved to write my own LaTeX interpreter, which I subsequently broke and never got around to fixing. When I decided to brush off the cobwebs and get it working again, I discovered the problem had finally been solved! MathJax is an open source, Javascript based, standards compliant, cross browser LaTeX interpreter. Even better, it leaves the source code intact so that you can simply cut and paste equations from LaTeX source, let the browser render it beautifully, and still have it in the HTML source code! It’s a perfect solution that should be around for many years to come. Eventually, I can see this being part of the standard for HTML 5 or even HTML 6. After many years of waiting, the mathematical internet has finally arrived!

Here are some examples of what it can do:

Shrödinger’s equation
\[
i\hbar\frac{\partial}{\partial t}\Psi(\vec{r},t) = \left( -\frac{\hbar^2}{2m}\nabla^2+V(\vec{r})\right)\Psi(\vec{r},t)
\]

Maxwell’s equations:

\[
\begin{aligned}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}
\]

It even handles inline expressions such as Einstein’s \(E=mc^2\) properly.

The next step is, of course, decent graphical displays. Once again, there is help at hand. HTML 5 supports canvas drawing. Combing the two of these should lead to much richer web content when it comes to mathematics and science. It will take a while to permeate to all the major browser, but eventually this will change the internet forever, allowing people to access more useful information than ever before.

Comments on: "MathJax to the rescue!" (1)

  1. About the missing nabla: I’m curuois about what’s going awry, but I don’t have much to go on. The equation continues to display correctly on my system, in various browsers (Firefox, Safari, Opera, Camino). Could anyone with an invisible nabla—or other failures—give some more details? In particular, are you using the LaTeX fonts or images or Unicode? (See the jsMath control panel.)In the , the only entry that seems possibly relevant is this one:In Safari on the Mac using the image fonts, the first time a character is loaded, it may not display properly on screen (you may just get an empty frame with no character inside). If you resize the window slightly (or reload it), the characters should show up properly. As of v2.1, jsMath tries to overcome this by joggling the window slightly after the page is loaded, but the timing of this might not be appropriate for all situations, and you may need to resize the window yourself.

Leave a comment for: "MathJax to the rescue!"