## MathJax – render math on the Web on all browsers

[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 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.

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)

The table was too wide for this blog post, so I devoted a separate page to it.

Go to:

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!

### 18 Comments on “MathJax – render math on the Web on all browsers”

1. Hylke Koers says:

Great initiative, and very interesting to see this comparison of tools to display mathematics on the web. I am involved with the MathJax project and would just like to make a few comments for clarification – hope that is useful:

- By default MathJax works with webfonts, which are fetched from the server. This has the advantage of high-quality display for any level of zoom and nice integration into the document. The post mentions a large number of png images, which is the fall-back option when webfonts do not work. (Some possible reasons for this are listed at http://www.mathjax.org/resources/faqs/)

- MathJax recognizes both LaTeX and MathML input. MathML can be created with several easy-to-use equation editors, including MathType for Microsoft Office. So you don’t have to learn LaTeX to use MathJax.

- jsMath is no longer under active development, but MathJax builds on jsMath.

- This was mentioned already, but just to highlight that a MathJax CDN implementation will come out very soon, which removes the need for server-side installation (and already there is no client-side installation).

- In my opinion the overview table is missing some important functionalities such as copy-paste math and the possibility to connect to Assistive Technologies to speak math aloud or read it in Braille for people with visual impairments. These are must-haves for a true online math solution, and an area where MathJax makes a difference compared to image-based rendering solutions.

Finally, for the author: it would be great if you could describe the problem with matrix rendering in IE8 to the MathJax user group so that we can look into it (I am not familiar with this issue). Thanks!

2. Robert Foth says:

Thanks for posting this information.

Wondering which of these options is preferred for accessibility in mind? Anyone have ideas on how screen readers handle each of these?

3. Murray says:

@Hylke: Thanks for your response and for your hard work on MathJax!

Yes, I neglected to mention MathJax can also accept MathML. You’re right, there are several MAthML editors, but I’m still looking for an easy to use, easy to install (for a Webmaster, I mean) in-browser, WYSIWYG editor. (If you can recommend one, I’d be happy to check it out.)

The aim is to present something that students can easily use, without having to download and install a separate application (many of which will work on Windows-only, or Mac-only).

I have amended my table to reflect the MathML possibility and I have also added mention of copy-paste.

I agree there should be the facility to speak math for the visually impaired. But surely any solution that uses LaTeX (or I guess MathML too) would achieve that outcome? That is, using MathTeX with appropriate LaTeX alt code would also give the desired access?

Finally, there is nothing much to add with the IE8 rendering problem, except that I tried it on a few different computers and it seems IE8 on WinXP is the only place it actually occurs. The screen shot in the post shows how it looks.

4. Hylke Koers says:

@Murray, @Robert: This is probably not the place for a detailed discussion on accessibility, but I just wanted to point out that MathML is the most widely used way to connect mathematical content to Assistive Technologies software. Although some individuals will understand spoken LaTeX, there’s a steep learning curve and equations easily get too complex for this to work.

More background on these issues can be found on:
- http://www.mathjax.org/resources/articles-and-presentations/accessible-pages-with-mathjax/
- http://www.dessci.com/en/solutions/access/

Hope this is useful!

5. Philip Petrov says:

I am very impressed for the good work that you did in comparing the mentioned technologies. This will be very helpful for many people who plan to make their blogs/forums “Math-friendly” and also will show the right directions for improvements to the developers.

I will be very happy if you agree to let me sum all these articles up and make a small presentation to the regular conference of the “Union of the Mathematicians in Bulgaria” (from your name as author of course). I think it will be helpful for the teachers in Bulgaria. The “IT” is a relatively new subject in our country and still many teachers “do not know how to start” their web initiatives. Please write to me an e-mail if you are interested.

6. Murray says:

Hi Philip. I’m glad you found the post useful. I have given you permission separately in an email.

7. Will says:

For an equation editor that you can embed within your website, then the CodeCogs solution is very simple.

This works like a web service, as formally you don’t have to download any code, merely make a few javascript call – just like a google advertising etc. So the editor is being driven from CodeCogs, but its fully integrated with your page and fairly customisable (i.e. style, which buttons to show).

They also have connections with major editors like Tiny MCE, FCK etc.

Sadly if you want the code there is a fee.

8. Murray says:

@Will. Thanks for the comment. CodeCogs is not really WYSIWYG – you have to have a pretty good understanding of LaTeX to use it. Certainly better than coding all by hand, though!

9. Kalakay says:

1) Do MathJax can be used as software for PCs?
2) Is MathJax work on wordpress.com?

10. Murray says:

@Kalakay: You can use MathJax in any browser. So it can be used locally (within HTML files on your own hard drive).

squareCircleZ is a WordPress-based blog and you can see it works just fine. However, on WordPress.com, you cannot post your own javascript, so I guess you are out of luck.

11. WebbedRobin says:

If you take the top line of your web page out, that is the DOCTYPE tag, then IE renders the matrices correctly.

12. Murray says:

Update: When I first tried out MathJax, the rendering of matrices in IE was ugly. WebbedRobin’s comment refers to the following bit that was in the original post:

Note: Internet Explorer does not render matrices nicely. Here is a screen shot of the above matrix, as rendered by IE 8.

Screen shot of IE’s rendering of a matrix using MathJax

See discussion below for a fix for this.

Here’s the discussion referred to above. This problem has now been fixed.

@WebbedRobin: Thanks for your suggestion. You are right, IE does render the matrix properly when there is no DOCTYPE. However, this is not an elegant solution – why should WordPress bloggers (or 99% of publishers who don’t want to worry – or know about – such things) have to remove the DOCTYPE just to get poor old IE to work properly?

For those who don’t know what we are talking about:

IE 8 [can] render three modes: “Quirks,” “Strict,” and “Standard”. When there is an old DOCTYPE or when there is no DOCTYPE, IE renders it like IE5 would (quirks mode). When a special meta element or its corresponding HTTP header is included in a web page, IE8 will render that page like IE7 would (strict mode). Otherwise, IE8 renders pages with its own engine (standard mode). (Source)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

None of the following DOCTYPEs will trigger IE8 to render it properly:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

(This one was much quicker at rendering MathJax) <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Even HTML5′s still gave the messy brackets on the matrix:

<!DOCTYPE HTML>

However, IE8 running on Windows 7 does render the brackets OK.

I’m fed up with the amount of my life IE has consumed, trying to make it work. I’m glad it is continuing to lose market share and will be glad when it is extinct.

13. Gerardo Lisboa says:

Very interesting.

- only needed a META tag on the html head (possible from a CDN);
- could interpret ASCIIMAthML (yes, for most things is perfectly adequate);
- automatically chose between server and client side image generation (which might be possible with a js script on agent and/or url discrimination) – for increased speed and offline use;

it could be in front of all the solutions?

14. Murray says:

@Gerardo: The greatest unknown “if” in your list is whether MathJax could interpret ASCIIMathML. Maybe it can with some library (adding even more to the overhead).

MathJax is certainly a good compromise solution. It’s that entry process that is holding me back. I’m very productive with ASCIIMathML, since you just keep typing and it is calculator-like. I don’t like to have to switch to another application to enter things, then copy it back.

These days, I find myself using MathTeX more than anything, because it is cross-browser, cross-OS and can also work in RSS feeds. The entry is the worst part, but the output is most versatile.

15. Hylke Koers says:

@Murray @Gerardo: Thanks for sharing your thoughts on MathJax. Below are two comments that might be useful.

First, MathJax already has a public CDN service which makes it possible to use MathJax on your website by including a single line of code in your html header.

As to supporting ASCIIMatmML, there has been some discussion in the MathJax user group (http://groups.google.com/group/mathjax-users) about that. Please feel free to comment there as well, and we’d certainly welcome community involvement to get that off the ground.

16. Murray says:

@Hylke: Thanks for the update. Having a CDN option now is great.

I am now using the CDN version and have amended the post to reflect this.

17. Davide Cervone says:

I believe the matrix bracket issue was resolved in MathJax version 1.1a released in June (2011). You might give it another try using that version and see if you get better results.

18. Murray says:

@Davide. Thanks for alerting me! I revised the post and I’m now using the CDN version, which currently is 1.1a, of course.

And yes, matrix brackets now render fine in IE.

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>