Activate your free membership today | Log-in

Tuesday, December 22nd, 2009

MathJax: Rich Math display from LaTeX and MathML

Category: JavaScript

<p>I am sure MathML took off somewhere, but I never really saw it. MathJax seems to have a chance at being a practical solution that offers a high quality display of LaTeX and MathML math notation in HTML pages.

You can embed the following LaTeX right in your page:

HTML:
  1.  
  2. <p>The Lorenz Equations</p>
  3. [begin{matrix}
  4. dot{x} &#038; = &#038; sigma(y-x) \
  5. dot{y} &#038; = &#038; rho x - y - xz \
  6. dot{z} &#038; = &#038; -beta z + xy
  7. end{matrix} ]
  8.  
  9. <p>The Cauchy-Schwarz Inequality</p>
  10.  
  11. [ 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) ]
  12.  
  13. <p>A Cross Product Formula</p>
  14.  
  15. [mathbf{V}_1 times mathbf{V}_2 =  begin{vmatrix}
  16. mathbf{i} &#038; mathbf{j} &#038; mathbf{k} \
  17. frac{partial X}{partial u} &#038;  frac{partial Y}{partial u} &#038; 0 \               frac{partial X}{partial v} &#038;  frac{partial Y}{partial v} &#038; 0
  18. end{vmatrix}  ]
  19.  
  20. <p>The probability of getting (k) heads when flipping (n) coins is: </p>
  21.  
  22. [P(E)   = {n choose k} p^k (1-p)^{ n-k} ]
  23.  
  24. <p>An Identity of Ramanujan</p>
  25. [ frac{1}{(sqrt{phi sqrt{5}}-phi) e^{frac25 pi}} =
  26. 1+frac{e^{-2pi}} {1+frac{e^{-4pi}} {1+frac{e^{-6pi}}
  27. {1+frac{e^{-8pi}} {1+ldots} } } } ]
  28.  

and then you get the following output:

mathjax

It has some cool features like math accessibility, cut and paste interoperability and an API for integration.

In fact, take a peak at the source code for MathJax. Interesting to see.

Note:

MathJax grew out of the popular jsMath project, an earlier Ajax-based math rendering system developed by Davide Cervone in 2004. In the intervening time, there have been many significant developments relevant for web publication of mathematics: consolidation of browser support for CSS 2.1, Web Font technology, adoption of math accessibility standards, and increasing usage of XML workflows for scientific publication. Consequently, Cervone and others are designing and developing MathJax from the ground up as a “next-generation” platform, while still benefiting from the extensive real-world experience gained from jsMath.

Related Content:

  • MathML
    MathML is an application of XML (Extensible Markup Language) designed to facilitate the use of mathematical expressions in Web...
  • MathXML
    MathML is an application of XML (Extensible Markup Language) designed to facilitate the use of mathematical expressions in Web...
  • DVI
    Device Independent Document (TeX)...
  • AUX
    TeX/LaTeX Auxilliary Reference...
  • The basics of MathML 3.0
    MathML 3.0 features new Cascade Style Sheets (CSS) functionality and new XML metadata syntax for printing complex...

Posted by Dion Almaer at 6:44 am
5 Comments

++++-
4.8 rating from 35 votes

5 Comments »

Comments feed TrackBack URI

Now that is some seriously cool stuff! Gosh, I wish I had that back in college (was a math major).

Comment by quantum00 — December 22, 2009

Interesting, but does not work on Firefox 3.5.6 (LINUX)

Comment by SleepyCod — December 23, 2009

Very impressive. And all done with real text! Wow.

I like that they’ve used a jack in their logo :)

Comment by Skilldrick — December 23, 2009

Wow, at first I assumed this was like that silly jQuery plugin that called out to a web service to do the rendering, but MathJax actually uses JavaScript to generate properly formatted text. Impressive.

Comment by tlrobinson — December 25, 2009

This is great. All is done with real text. Impressive.

Comment by DianaF — December 29, 2009

Leave a comment

You must be logged in to post a comment.