Formulas Ahead!

Showing mathematical formulas on the web is not straightforward, as HTML (Hypertext Markup Language) does not contain built-in commands to typeset mathematics. Although MathML (Mathematical Markup Language) was designed to be an extension of the standard markup language for mathematics, it is not yet supported by all browsers, so it’s not quite ready for prime time! So we are stuck with selecting one of the available workarounds for this problem. I did just that, and I can now easily produce perfectly typeset formulas like

\[e^{i\pi}+1=0,\]

which happens to be the most beautiful formula in the whole of mathematics, or

\[\sum_{n=1}^\infty\,\frac{1}{n}=\infty,\]

which is pretty amazing too.

Most of the workarounds seem to be based on the TeX typesetting language. TeX is very popular in the exact sciences, and it is quite easy to use; the first expression above is described in TeX as “e^{i\pi}+1=0”, for example. In order to display a mathematical expression on a web page, there are two possibilities. Either have the mathematics generated by the browser (as it would be with MathML), or generate the mathematics on the server.

For the browser based approach, there are again two possibilities. Either you ask the user to install a browser plugin to render the mathematics, or you use JavaScript to add that capability on the fly. I didn’t consider using a plugin, since I don’t want to have to convince every casual reader to install one. A impressive alternative for a plugin is jsMath, which is a JavaScript based solution that runs in the browser. You simply use TeX on your pages, and jsMath converts it to an actual expression on the fly. I played with it for a while, but didn’t select it in the end. It adds about 100K to the size of the page, and it is also not guaranteed to work perfectly in all browsers. But it is really nifty, since it implements a TeX compiler in JavaScript!

For the server based approach, the mathematical expression is rendered as an image, which is then served to the browser. This is by far the most popular approach, including for big sites like Wikipedia. There are numerous solutions available; two very clean ones are mimeTeX and mathTeX. mimeTeX is a standalone cgi script that renders the expression all by itself, it contains its own TeX compiler. If TeX is available on the server, then mathTeX can be used. mathTeX uses the real TeX compiler, which results in higher quality images, and it is what I picked for my site in the end.

Any suggestions on what to do with this newly gained ability?

[update] MathJax is a new JavaScript based solution that is the successor to jsMath. In MathJax, much of the remaining problems of jsMath seem to be solved. It is also sponsored by renowned organizations like AMS (American Mathematical Society) and SIAM (Society for Industrial and Applied Mathematics), which greatly improves the chances that it will be here to stay. For those reasons, I have switched my site over to MathJax.