Making math formulae work on web pages with MathJax

Rendering complex math formulae on the Web used to be difficult ... MathJax makes it easy as pi

If you're into serious math and you're doing stuff on the Web you'll be more than a little aware of just how hard it is to show a complex formula on a Web page or in a blog.

While some word processors and the venerable LaTeX can render complex formulae on-screen or on paper but doing the same on the Web has, until recently, been down to creating a GIF, JPEG, or PNG image using one of those tools, uploading it, and linking the image into the HTML .... all of  which makes for a complicated and infelxible workflow.

But now there's MathJax ... 

MathJax is an open source JavaScript display engine for mathematics that parses formulae specified in LaTeX, MathML, or AsciiMath notation and, rather impressively, it works in any browser starting from Internet Explorer 6, Firefox 3, and Safari 2.

A joint venture of the American Mathematical Society (AMS), Design Science, and the Society for Industrial and Applied Mathematics (SIAM) and supported a large number of A-lIst sponsors including IEEE, The American Physical Society, Oxford University Press, and Cambridge University Press, MathJax grew out of the jsMath project, an earlier Ajax-based math rendering system developed by Davide Cervone in 2004. 

In 2009, AMS, Design Science, and SIAM formed the MathJax Consortium to enable Cervone and others to design MathJax from the ground up as a next-generation platform, while still benefiting from the extensive real-world experience gained from jsMath. Since its initial release in 2010, MathJax has become the gold standard for mathematics on the web.

Here's an example of MathJax in use (give it a few seconds to initialize). This is, so I am told, the Cauchy-Schwarz Inequality specified as a LaTeX expression:

\[ \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) \]

And here's the MathJax interpretation:

\[ \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) \]

You can also use MathJax inline like this: \(\sqrt{3x-1}+(1+x)^2\) ... as you can see, MathJax equations used this way don't interfere with the line spacing.

MathJax uses CSS and web fonts which allows equations to scale with surrounding text and can be integrated with publishing platforms such as WordPress, MediaWiki, and Drupal. Web users can also copy MathJax equations directly from web pages into Word and LaTeX documents, blogs, research wikis, and math software such as Maple and Mathematica. There's an API and the consortium behind the project even provides the JavaScript libraries through a free, open access content distribution network (you can also self-host if you prefer).

MathJax is a triumph of coding ... it's cross-platform, simple, effective, and free.

Formulate your thoughts below or to gearhead@gibbs.com then follow me on TwitterApp.net, and Facebook.

To comment on this article and other Network World content, visit our Facebook page or our Twitter stream.
Must read: Hidden Cause of Slow Internet and how to fix it
Notice to our Readers
We're now using social media to take your comments and feedback. Learn more about this here.