Beautiful math

by michal frackowiak on 07 Jun 2011 09:51



LaTeX (and underlying TeX), for those who had no chance to learn about it, is a typesetting system widely used in academia. It offers exceptional, high-quality output and is commonly used to write scientific articles, books etc. One of its strongest features is rendering math.

So far Wikidot was using the original TeX suite to achieve the best rendering quality of math expressions on Wikidot pages. When you wanted to embed math on your page, you could just type e.g. [[$ E = mc^2 $]]. Wikidot would extract your equation and run it through latex command on the server. As a result, a PNG image with the rendered equation would be inserted into your wiki page.

This approach had several issues. First, math was not beautiful enough. Zoom in and you could see awful pixels. "Inline math" would not always be aligned with the baseline of surrounding text. There was also a problem of equations not visible when printing on private sites in Internet Explorer. Not to mention it was not possible to have white math on dark background before.

Today we are taking one step ahead to improve the quality of rendered math expressions.

A while ago we came across the MathJax project. It is a JavaScript library that can parse LaTeX in a browser — and render really beautiful equations using custom web fonts, CSS or even MathML if supported by the browser.

Take a look at a few examples (from the fundamental laws of physics):

  • 1-particle Schrödinger's equation:
  • Einstein's field equations:
  • An example of inline math, where math expression like $E = mc^2$ is surrounded by text. Math adapts to the style (color, size) of the text too, like $\sum_{i = 0}^{n} x_i^2$
  • White on black? No problem. Math will match any theme of a site.
\begin{align} \sum \mathbf{F} = 0 \Rightarrow \frac{d \mathbf{v} }{dt} = 0 \end{align}
  • And an example of huuuuge math, more elegant than ever:
\begin{align} \Huge G_{\mu \nu} = {8 \pi G \over c^4} T_{\mu \nu} \end{align}

Beautiful, isn't it? It also looks much better when you print a page.

Take a look on the old-style equation for a moment. The difference in quality is stunning, especially when you zoom in:


Now, right-click on any of the new-style equations. Using the context menu you can read the LaTeX source, generate MathML source (that you can paste into other editors) or alter the way that equations are rendered. Great.

You can now use more math environments instead of just equation and eqnarray available before: align, alignat, aligned, alignedat, array, Bmatrix, bmatrix, cases, gather, gathered, matrix, multline, pmatrix, smallmatrix, split, subarray, Vmatrix, vmatrix.

For details check out the updated Wiki syntax documentation: Math.

Before we decided to switch to MathJax we looked at math equations on Wikidot sites to identify potential problems: we extracted them, generated old latex images and compared them to what MathJax produces. And we found a few differences. MathJax is stricter than the original LaTeX and often throws errors rather than warnings that prevents math from being rendered. This also means it's simpler to correct mistakes, that could be easily overlooked with the old system.

With every problematic equation we were able to either correct syntax errors in the equation itself or we found a simple workaround if the equation was using a feature not available in MathJax.

For those having problems with MathJax we created a Math troubleshooting page to help with the transition. Every equation that fails rendering links to this page too. If you have problems with displaying equations — please take a look at this page.

We believe the new rendering engine is superior to the previous one in many aspects: it nicely mixes with HTML output (especially cool for inline math), allows for errors troubleshooting (says what's wrong with the equation) and cuts download time. For us it's also important that we don't need to host and serve images for the equations.

Comments: 21

Add a New Comment