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

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:

2
+2

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.

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

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 \).

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

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.

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!