Scott Hanselman

Exploring cross-browser math equations using MathML or LaTeX with MathJax

June 23, '14 Comments [12] Posted in Tools
Sponsored By

Let me just start by saying that I got a C in Calculus. It just didn't click for me. I'm aces at basic math, but you lost me at limits. That said, I have always found MathML to be fascinating, and I'm surprised that even now over 15 years after MathML's first release that is has such minimal browser support. Other than Firefox, and surprisingly iOS Safari, there's basically no widely available native support.

Perhaps it's because MathML is, well, XML. You wanna express something simple like 2+2, except stacked up with a line? Here's that:

<mstack>
<mn>2</mn>
<msrow> <mo>+</mo> <none/> <mn>2</mn> </msrow>
<msline/>
</mstack>

That's rather verbose. Most math folks that I've talked to (including a very nice Stanford professor I met on a plane recently) use LaTeX to express Math. The professor I met edited whole academic papers in raw LaTeX and compiled them to PDF. He was surprised when I explained that he was a programmer but perhaps didn't realize it!

LaTeX looks like this, for the 2+2 example:

\(2+2\)

I'd show you some more complex MathML examples but it would get pretty crazy very quickly.

The landscape for writing equations easily online using either MathML or LaTeX is, from my untrained eye, rather chaotic, link-rotty, and messy. Many Math and MathML online resources are full of link rot or their apps have been forgotten. While looking for a MathML to LaTeX convertor I found four different sits that promised to deliver only to discover that their back end systems are gone.

It seems that there are two places online that are shining examples of online Math rendering and that's MathJax and Math.StackExchange.com. MathJax is "an open source JavaScript display engine for mathematics that works in all browsers" and Math.StackOverflow.com is well, StackOverflow for Math people. What's special about Math.SO is that it's integrated MathJax's fantastic library into it's main editor.

NOTE: Not all StackExchange sites have the integrated math preview due to the size of the libraries involves. It's not something that you just "throw in just in case."

Here's an example where I'm typing some LaTeX into StackOverflow's site. In this case, I'm using Chrome.

image

They are using MathJax's library here. I can right-click on the equation, and ask "show math as MathML" and get this popup:

image

How does MathJax manage all this without actual browser support for MathML (or LaTeX?)

You configure MathJax like this, telling it what to look for when doing inline math. Sometimes it's bracketed by $ and $ and sometimes by \( and \).

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
});
</script>
<script type='text/javascript' src='http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>

For Tex as in this example, MathJax is using HTML and CSS, generating the inline Math equations into a series of DOM elements.

image

When using MathML proper, you can configure MathJax to use native MathML rendering when it's available. Only FireFox really supports that. This page lets you switch between HTML-CSS using Web Fonts, MathML, or SVG. SVG looks a little rough to me, but HTML-CSS always looks nice.

image

Bottom line, if you have a need to express mathematical equations of any kind online, you're going to want to use MathJax. Love them, thank them, appreciate them.

NOTE via Wikipedia: The MathJax project was founded by the American Mathematical Society, Design Science, and the Society for Industrial and Applied Mathematics and is supported by numerous sponsors such as the American Institute of Physics and Stack Exchange.

Oh, and if you're English, "Maths."


Sponsor: Many thanks to our friends at Octopus Deploy for sponsoring the feed this week. Did you know that NuGet.org deploys with Octopus? Using NuGet and powerful conventions, Octopus Deploy makes it easy to automate releases of ASP.NET applications and Windows Services. Say goodbye to remote desktop and start automating today!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Tuesday, June 24, 2014 12:21:13 AM UTC
Hi Scott, great post! LaTeX is definitely a bit easier to write, so it's good to know about MathJax.

Just a heads up that the 'thank them' link in the final paragraph is broken, it seems to point to http://mathjax.
Tuesday, June 24, 2014 12:56:32 AM UTC
Check out the MathPad app for iPad. It lets you draw out the equation with your finger and can convert it to TeX or MathML
Joel Coehoorn
Tuesday, June 24, 2014 12:57:16 AM UTC
Hi Scott,

For people interested web display of math equations, another thing to try is VisualMathEditor. It combines MathJax and some other tools into an easy-to-use package, and can be run directly from a live page at the developer, or can be downloaded and run locally.



Have fun typsetting the equations!
Jacob
Tuesday, June 24, 2014 4:38:34 AM UTC
I'll just leave this here:

https://github.com/gjtorikian/mathematical
Tuesday, June 24, 2014 8:57:41 AM UTC
This is great! I've been looking for something like this.

I too wrote my thesis in LaTeX. The editing is a bit confusing at start, but it produces such beautiful documents.

Thanks for this spotlight Scott!
Tuesday, June 24, 2014 9:10:34 AM UTC
For quick LaTeX without a bunch of libraries don't forget Google charts. It'll turn a small amount of LaTeX into an image.

Just stick the LateX in the chl param and slap it in an image.
http://chart.apis.google.com/chart?cht=tx&chl=\LaTeX
and
http://chart.apis.google.com/chart?cht=tx&chl=i\hbar\frac{\partial}{\partial%20t}\Psi=\hat%20H\Psi

Just add RegEx for parsing. It works well for server-side conversion of single expressions (rather than converting a full document).
Adam
Tuesday, June 24, 2014 2:05:48 PM UTC
- Content rendering for the web is not typesetting and is not intended to be typesetting; though many web applications strive for near typesetting layout and quality

- Specialist narrow focus language extensions, languages, etc. are by their nature suitable for a near static sized but declining user base

- Link rot / project rot is a consequence of a large percentage of projects/sites having 1-2 developers or maintainers; think of the number projects on github, sourceforge, etc which have not been updated with significant new functionality in the last 2 years

- Project, code library, third party control, compiler, IDE vetting is an emerging IT specialization area
Ron
Tuesday, June 24, 2014 5:42:35 PM UTC
MathJax is great. We use it to render math in real-time as you type over at mathway.com. We've had discussions about utilizing MathML at some point but until performance improves and there is better browser support LaTeX and MathJax is where it's at.
Jon White
Wednesday, June 25, 2014 6:05:07 PM UTC
does anybody knows ant mathml or latex plugin for ckeditor or any other editor?
Thursday, June 26, 2014 10:14:02 PM UTC
Thanks for this. I have been wondering how I might go about rendering TeX style math data in my tutoring website. This is exactly what I needed.
Wednesday, July 09, 2014 2:35:45 PM UTC
If you need WYSIWYG LaTeX editor - MathQuill is the best option:
http://mathquill.com/demo.html

Ckeditor has MathJax and MathQuill plugins.
Vlad Levchenko
Sunday, August 10, 2014 10:07:57 AM UTC
From your tablet, give handwriting recognition a try: http://webdemo.myscript.com/#/demo/equation

So much easier to get handwriting converted to LaTeX or MathML for you.
Name
E-mail (will show your gravatar icon)
Home page
 
Comment (Some html is allowed: a@href@title, b, blockquote@cite, em, i, li, ol, pre, strike, strong, sub, super, u, ul) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.
Live Comment Preview

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.