Easy math input and nice output using ASCIIMathML and MathJax

By Murray Bourne, 17 Apr 2012

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.

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

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.

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

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

6 Comments on “Easy math input and nice output using ASCIIMathML and MathJax”

  1. Philip Petrov says:

    Hmmmm a WordPress plugin and especially a forum (like SimpleMachines) plugin will be awesome 🙂

  2. Philip Petrov says:

    Yes, there's WordPress plugin already!

  3. Mike says:

    LaTeX is longer because it is intended for more complex mathematical formulas, and those require more control over typesetting. Once people write math professionally, they need to know LaTeX, and the best way to learn it is to start using it on simple formulas... even if those end up being a little longer than in ASCIIMathML.

  4. Murray says:

    @Mike: I agree with you that "real" mathematicians should know LaTeX. But for the other 99.5% of the population who study mathematics, but will never "write math professionally", ASCIIMathML is an easier and more practical option for communicating math equations and symbols, especially as it is similar to calculator input and Excel input.

  5. Ofer Hadas says:

    AsciiMathml and TeX where created for very different purposes: TeX was created by Donald Knuth for preparing books and articles (to be printed). Users are espected to invest a lot in learning a system to help them publish their books (or papers). AsciiMathml was created by Peter Jipsen as a sort of "natural language parser" that would parse the emails his students were sending him using approximate calculator syntax. The "users" that created the formulas were not expected to invest anything in learning it. It was meant to be good enough to handle most of the formulas people write like text without intending it to be parsed and displayed as a formula.

    Asciimathml is much more convenient for communication even for people that know how to compose TeX. And it has another advantage, that there are no syntax errors in AsciiMathml, because all expressions are syntactically correct.

    Several years ago I played with making an email interface display math formulas with Asciimathml. Here's a screenshot of a trial email I sent myself from my Gmail account that contains formulas(and the same email without rendering formulas). The interface is Fastmail.fm's "classic" interface (back then it was called "beta") that allows users to inject their own javascript into the webmail client interface, so I was able to add the AsciiMathml code into the mail reading screen in my account. Since no one else I knew could read formulas natively in their email client I had no use for this.

    It's a pity that communication software can be considered "fully internationalized" without any support for the language common to most of humanity: Mathematics.

  6. Murray says:

    @Ofer: Thanks for sharing and I share the lament in your final paragraph.

    Is it still possible to "inject your own javascript" in Fastmail.fm? I couldn't find it in their documentation.

    But until all email services provide a math option, it's not worth doing as you found. Hence my "send math in email" facility, here: http://www.intmath.com/help/send-math-email.php

Leave a comment


Comment Preview

HTML: You can use simple tags like <b>, <a href="...">, etc.

To enter math, you can can either:

  1. Use simple calculator-like input in the following format (surround your math in backticks, or qq on tablet or phone):
    `a^2 = sqrt(b^2 + c^2)`
    (See more on ASCIIMath syntax); or
  2. Use simple LaTeX in the following format. Surround your math with \( and \).
    \( \int g dx = \sqrt{\frac{a}{b}} \)
    (This is standard simple LaTeX.)

NOTE: You can't mix both types of math entry in your comment.

Search IntMath, blog and Forum