Skip to main content
Search IntMath
Close

MathJax - render math on the Web on all browsers

By Murray Bourne, 21 Feb 2011


I've been on a quest for some time now.

I want a cross-browser rendering system for math on the Web. It needs to be easy to use, especially for students. When trying to communicate math in forums or emails, students will not bother with a system that is difficult to use.

The system also needs to render the math quickly and be viable on mobile devices, and therefore needs to use small file sizes and not require too much CPU power to run.

Also, I don't want to force users into downloading fonts or plugins - it should just work on their browser.

MathJax is some of those things, but not all. More on MathJax in a minute.

As background, let's look at some of the other options.

Other math rendering systems

I've played with a few math rendering solutions. See my reviews at:

(1) Enter math in emails, forums and Web pages using ASCIIMathML. This is based on ASCIIMathML, which lets you "easily produce good-looking math formulas on webpages using a simple calculator-style syntax" - also uses the computer's fonts after javascript processing.

Update: This used to require Firefox, but now Mathjax has a ASCIIMathML input option. See ASCIIMathML input, Mathjax output.

(2) Math rendering in WordPress using WPMathPub.
This one uses PHPMathPublisher, a "Web publishing system for mathematical documents" - uses images after PHP processing on the server.

These solutions have their advantages and disadvantages, and none of them is perfect.

So I decided to try out MathJax, which claims "Beautiful math in all browsers".

MathJax

MathJax renders math by processing your math code via javascript. The method is similar to ASCIIMathML but in MathJax's case, you need to input your math using MathML or LaTeX.

Update: Now Mathjax has the option of ASCIIMathML input.

If the browser can't display your math nicely for whatever reason, MathJax uses a large number of small PNG images to render math, after javascript has done its magic converting your LaTeX code to browser commands that subsequently fetch the images. (This is a clever "fallback", and mostly you will not see it, or have to worry about it.)

MathJax images
MathJax PNG images

That "magic" starts after the page has loaded, so the reader sees a messy page of LaTeX (or MathML) before the math becomes "pretty" as the rendering (or images) appear. If you have a slow (old) computer, this may be disconcerting. One way out of this is to do what I did on this page - have a bunch of text first before any MathJax, so the processing is finished before the reader gets to it.

MathJax Examples

The following math rendering examples are similar to the ones I tried out in the earlier ASCIIMathML article, so I could compare their output.

Hopefully, you'll see properly rendered math below.

Note: One of the disadvantages of this method (like the other 3 mentioned above) is that if you are reading this article via a feed or aggregator, you'll see code below, rather than pretty math. Please view the original post if you don't see properly rendered math below.

Quadratic Formula

When \(a\ne0\), there are two solutions to \(ax^2+bx+c=0\) and they are
$$x = {-b\pm\sqrt{b^2-4ac}\over2a}.$$

A matrix

\[\left(\begin{array}{cccc}2&3&4&5\\0&-1&2&1\\0&0&2&4\\0&3&-6&0\end{array}\right)\]

Cross Product

\[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0
\end{vmatrix} \]

Integral

\[\int_0^{2\pi}\sin{x}\ dx=0\]

Summation

$$f(x)=\sum_{n=0}^\infty\frac{f^{(n)}(a)}{n!}(x-a)^n$$

In-line Math

Displacement: \(s=ut+\frac{1}{2}at^2\)

Trigonometry: \(\tan^2x+1=\sec^2x\)

Summation: \(\pi=4\sum_{i=1}^{n}\large{\frac{(-1)^{k+1}}{2k-1}}\)

That last one again, in its own centered block. Note the position of the sum limits, which are now above and below the summation symbol.

$$\pi=4\sum_{i=1}^{n}\frac{(-1)^{k+1}}{2k-1}$$

Fractions on fractions

$\frac{\frac{6}{x+2}}{\frac{3}{2x+4}}$ $=\frac{6}{x+2}\div\frac{3}{2x+4}$ $=\frac{6}{x+2}\times\frac{2(x+2)}{3}$ $=4$

My "challenge" matrix from earlier articles (this matrix was an issue in WPMathPub)

\[\left\{\begin{array}{ccc}5&3&\cos\ 2\\6&7&0\\1&-2&\sin\ 5\end{array}\right\}\]

The "Ask Dr Math" integral example

\(3\int{x^2}dx+5\int{x}\ {dx}+9\int{dx}\)

How can you put MathJax on your Web page?

Update: There is now a CDN (Content Delivery Network) version of MathJax, so you don't need to have MathJax on your own server, like before.

(1) Enter the following CDN call at the top of your HTML math page (in the <head> section of your page, preferably):

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

(2) Surround your math with 2 dollar signs, "$$", at the beginning and end.

(3) Type in your LaTeX math (or you can use this LaTeX Equation Editor), or easier, you can now use ASCIIMathML.

(4) Load your page in your browser and with any luck, it will work and will display math.

For example, this is the LaTeX code (surrounded by "$$" signs) used to enter the solution for a quadratic equation example above:

$$ x = {-b\pm\sqrt{b^2-4ac}\over2a}$ $

Configuring MathJax

You can configure options like tool tips, fonts to use, font sizes and so on. See Configuring MathJax for more information.

Comparison Chart

I wrote a comparison chart various math rendering solutions I've tried. It shows the results of using images, jsMath, ASCIIMathML, PHPMathPublisher, MathJax and MathTeX after testing on various browsers and platforms.

Browsers tested:

  • Firefox 3.6
  • Chrome 9.0
  • Safari 5.0
  • Opera 9.6
  • IE 8.0

Mobile devices tested:

  • Android (Opera Mobile, Opera Mini, Dolphin, default browser)
  • iPod Touch (Safari)

I devoted a separate page to it. Go to:

Comparison chart of jsMath ASCIIMathML, PHPMathPublisher, MathJax and MathTeX

For those of you who need to communicate math on the Web (in forums, blog posts, articles for students, article by students), I hope you find the above useful.

Any suggestions for other possible math Web publishing solutions are welcome!

See the 25 Comments below.

Leave a comment




Comment Preview

HTML: You can use simple tags like <b>, <a href="...">, etc.

To enter math, you can can either:

  1. Use simple calculator-like input in the following format (surround your math in backticks, or qq on tablet or phone):
    `a^2 = sqrt(b^2 + c^2)`
    (See more on ASCIIMath syntax); or
  2. Use simple LaTeX in the following format. Surround your math with \( and \).
    \( \int g dx = \sqrt{\frac{a}{b}} \)
    (This is standard simple LaTeX.)

NOTE: You can mix both types of math entry in your comment.

top

Tips, tricks, lessons, and tutoring to help reduce test anxiety and move to the top of the class.