Badass JavaScript

MathJax 1.0 is out! Cross Browser LaTeX and MathML Rendering Just Got Real

MathJax is an open source project that aims to render both LaTeX and MathML expressions in all browsers.  LaTeX is an extension of the TeX markup language originally used by the TeX typesetting program written by the famed Donald Knuth way back in 1978.  It is a very commonly used format in mathematics, so being able to embed it directly in a webpage is very exciting.  Below is an LaTeX equation:

\[ \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 is how that is rendered by MathJax:

MathJax can also render MathML documents.  MathML is a W3C specification for describing mathematical formulas using XML.  It was designed to allow direct embedding into HTML documents but currently, Firefox 4 is the only browser that supports native MathML rendering.  Hopefully other browsers will jump on the bandwagon soon.  Until then, MathJax provides a good alternative.  For example, the following MathML code:

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mo>−</mo>
        <mi>b</mi>
        <mo>±</mo>
        <msqrt>
          <mrow>
            <msup>
              <mi>b</mi>
              <mn>2</mn>
            </msup>
            <mo>−</mo>
            <mn>4</mn>
            <mi>a</mi>
            <mi>c</mi>
          </mrow>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn>
        <mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
</math>

Gets rendered as the following by MathJax:

Very neat!  MathJax works by using a web font with the correct symbols available to it and renders out DOM nodes for each character.  This preserves the ability for the user to select and copy the equation.  MathJax also has accessibility support through its ability to zoom in and out as well as communicate with screen readers.

MathJax is an exciting project for anyone trying to embed mathematical formulas in their webpages without having to resort to static images.  Also, congratulations to the team on going 1.0 a few weeks ago!

You can check out MathJax on it’s website, see some demos here, and even play arount with the source on Sourceforge.  Have fun!

Update: MathML is now supported natively in Webkit!