Easy math input and nice output using ASCIIMathML and MathJax

Update: I now use KaTeX for math rendering throughout the IntMath lesson pages. It is a faster alternative to MathJax.

I've been wanting this for a long time now.

The process of entering math into Web pages is slow and tedious. Also, when students need to ask questions involving math in forums or through email, they have difficulty typing math and resort to attaching a PDF or Word document with their question (or worse, a photo of some hand-written math).

Creating math in document editors like MS Word is also a clumsy process.

For developing my own math Web pages, over the years I've used images (created via MS Word, or various math software) which need to be uploaded to the server, and take a lot of time to maintain (if errors are found, or other changes are needed), and more recently, I've used LaTeX-based images (which are created on-the-fly by the server).

LaTeX-based images are much easier to deal with, but this system has its own issues, not least of which is the relatively complicated syntax for LaTeX, and its fussiness (for example, you can't have spaces in your math or it fails).

ASCIIMathML

I really liked the concept of ASCIIMathML when it first came out. It allows the user to input math very easily, using just the keyboard, and spaces in the math are no issue.

For example, consider this fraction, surrounded by braces.

In ASCIIMathML, we can type it using only 24 characters, all on the keyboard. It looks a lot like calculator input:

{x^2 / sqrt ( y^3 + sin theta ) }

The downside with ASCIIMathML (up to now) was it only worked nicely in Firefox browser, since ASCIIMathML is based on MathML and Firefox is the only browser with native MathML support. In all other browsers it either looked bad (like in Chrome) or didn't work at all.

We needed a cross-browser, cross-platform math rendering system which didn't use images.

Enter MathJax.

MathJax

MathJax promises "beautiful math in any browser without plugins" and essentially that's what it delivers. It's not perfect, but it is very, very good.

Once Mathjax has loaded (it's a javascript file), it processes any math it finds (the math needs to be surrounded by special characters) into attractive and easy to read math.

But the downside, to now, has been that you needed to code your math in LaTeX. As mentioned earlier, LaTeX is certainly not very user-friendly, and it's not a system you could expect the average math student to learn.

There are WYSIWYG editors for LaTeX entry, but it is a 2-stage process, where you have to copy-paste from the editor. Most of the editors are not very user-friendly and you really need to know the syntax anyway to get things to work. Usually I found it was quicker just to type the math expression.

What does LaTeX look like? Here's the same fraction I used above.

Here's the corresponding LaTeX expression for that fraction:

\left\{\frac{x^2}{\sqrt{y^3+\sin\theta}}\right\}

It uses 48 characters, which is exactly 100% longer than the corresponding ASCIIMathML expression in this case. LaTeX is also much more cumbersome and harder to maintain, since it's harder to read.

While LaTeX is great for math geeks, I don't think we should make the average math student learn it, just so they can communicate math on the Web.

We needed a solution that brought these 2 approaches together - and now it's here.

ASCIIMathML input, MathJax output

With the release of version 2.0 (now 3.0) of MathJax, we can now enter math easily using ASCIIMathML, and get "nice" output processed using MathJax. It's simple to set up (add one line of javascript in your code) and implement. (There are many possible configurations for MathJax which can complicate things, but the standard settings will get you started.)

This set up works well in all browsers, even on mobile devices. It is a great solution for math forums, developing math in Web pages, and it can be modified for sending emails containing math.

Example pages

To see an example of what I am talking about, go to ASCIIMathML input, MathJax output. (This page is like a sandbox - you can play around entering math expressions to see how it works.)

On that page, you can see example input (using ASCIIMathML) and the resulting output (which renders via Mathjax). It works in all browsers.

You can also enter your own math expressions (between backtick delimeters, ` and `), and see the result. (Note they are not single quotes, like this ' and this '.)

There's also a page where you can write an email containing math.

Updates to IntMath

I'm now converting all the images in IntMath to use this ASCIIMAthML-Mathjax system. The math looks much nicer now, and the pages load faster. You can see example pages where most of the math has been created this way here:

Division of Algebraic Expressions (fractions)

Split Functions (piecewise-defined functions)

For new development, this system is so much more productive than using images, or using LaTeX input.

I'm a happy camper.

See the 6 Comments below.