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 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.
22 Feb 2011 at 1:30 am [Comment permalink]
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://docs.mathjax.org/en/latest/misc/faq.html)
- 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!
22 Feb 2011 at 8:38 am [Comment permalink]
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?
22 Feb 2011 at 9:14 pm [Comment permalink]
@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.
@Robert: I hope Hylke's comment answers your question.
24 Feb 2011 at 7:33 pm [Comment permalink]
@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.dessci.com/en/solutions/access/
Hope this is useful!
26 Feb 2011 at 3:10 am [Comment permalink]
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.
26 Feb 2011 at 9:56 am [Comment permalink]
Hi Philip. I'm glad you found the post useful. I have given you permission separately in an email.
3 Mar 2011 at 8:37 pm [Comment permalink]
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.
3 Mar 2011 at 9:42 pm [Comment permalink]
@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!
5 Mar 2011 at 12:31 am [Comment permalink]
I want to ask:
1) Do MathJax can be used as software for PCs?
2) Is MathJax work on wordpress.com?
5 Mar 2011 at 5:54 am [Comment permalink]
@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.
5 Mar 2011 at 9:32 pm [Comment permalink]
If you take the top line of your web page out, that is the DOCTYPE tag, then IE renders the matrices correctly.
6 Mar 2011 at 11:12 am [Comment permalink]
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:
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:
The current doctype for this page is the normal WordPress one:
<!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.
22 May 2011 at 7:47 pm [Comment permalink]
Very interesting.
From your analysis, if MathJax:
- 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?
22 May 2011 at 9:09 pm [Comment permalink]
@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.
23 May 2011 at 3:24 am [Comment permalink]
@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/forum/#!forum/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.
23 May 2011 at 8:53 am [Comment permalink]
@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.
13 Aug 2011 at 12:12 am [Comment permalink]
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.
13 Aug 2011 at 9:59 am [Comment permalink]
@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.
4 Feb 2016 at 1:22 am [Comment permalink]
It is not working on mobile devices not even with opera mini or chrome.
4 Feb 2016 at 3:13 pm [Comment permalink]
@Naveen: I presume you are talking about it not working on your own page.
(I just double checked my page on both Opera Mini and Chrome on a phone, and both were fine.)
On your page, I can see you are calling MathJax twice - once at the top of the page (in the <head>), and then again about half way down the page (at around line 800).
There's normally no problem with that (MathJax will check if it has already been loaded before unnecessarily loading itself again), but I believe the problem is that both of your config files have problems.
the first one (at the top) doesn't specify the delimiter
$$, so mathJax doesn't know what to do with it.In the second one, there are other characters added (probably by blogspot) and have messed it up.
So I would suggest removing the bottom one (it's probably in your post, right?), and then trying your math with just a single
$. That should work.Then, fix the config script (the one starting with
script type="text/x-mathjax-config") so it includes the double-dollar, and see how you go.Regards
12 May 2016 at 6:15 pm [Comment permalink]
if MathJax.js load in mobile on onload() mothod but its processing too much slow.how can solve this.
25 Mar 2017 at 7:56 am [Comment permalink]
the mathjax code works perfectly on most javascript enabled browsers but it does not work on Android mobile opera browser and android default browsers too.. thanks
25 Mar 2017 at 9:56 am [Comment permalink]
@Abubakar: MathJax works fine on Opera mobile, but not on Opera Mini (which disables or mangles pretty much all scripts, so basically nothing works properly, not only MathJax).
I have seen old Android default browsers having issues with some pages, but now the default on Android phones is Chrome, so it should be fine.
If you're coding pages in MathJax, it's best to try to catch these cases where the script either doesn't load or doesn't complete, and warn the user.
1 Oct 2017 at 2:54 pm [Comment permalink]
I am using mathjax. Then all my formulas are clickable. If click on that it showing a menu. If anyone know how to remove it please tell me.
1 Oct 2017 at 6:57 pm [Comment permalink]
@Anand: See this page: http://docs.mathjax.org/en/latest/options/menu.html