Math in emails, forums and Web pages using ASCIIMathML
By Murray Bourne, 05 Sep 2009
Update 2: I now use KaTeX to display math on most of the IntMath site.
A lot of people write to me with their math questions, usually via a Web form or email. They often struggle to communicate their question, especially if it involves algebra, indices, square roots, integrals, fractions and the like. But what's worse, I have great difficulty figuring out what they are really asking about and I often need to write back to clarify their question. This example came today:
"Simplify x over y plus 2="
or does he mean this?
We need a simple way to communicate math on the Web. I'm often amazed that a really popular math forum like Ask Dr Math has these tedious math typing suggestions where you have to enter hundreds of spaces to get things to line up.
The process of publishing math on a Web page can be very troublesome. One way is to type it in a word processor or some computer algebra system, then convert it to images, embed the images into an HTML page and then upload it all to a server. It gets very tedious, especially when you have tens of thousands of equations, like I do in Interactive Mathematics.
Another solution for communicating math via the Web involves typing it in some math software (like Scientific Notebook, Maple, Mathematica, etc) and then attaching the file to an email. But strangely, students and instructors resist this approach, which amazes me because it is probably the easiest if you and your students are all using the same software. But what if you aren't?
ASCIIMathML is a viable alternative.
Example using ASCIIMathML
The above integral is an image and to obtain the equation, all I needed to enter was:
This is easy to type and I hope you'll agree it renders nicely.
Don't be scared by the name ASCIIMathML. "ASCII" just means the ordinary characters that you type on your computer keyboard, like "qwerty" and "12345", while "MathML" is the standard way to represent math on the Web (but unfortunately, the only browser that renders it properly is Firefox. In Internet Explorer, you need to get the MathPlayer plugin).
ASCIIMathML converts your text into MathML then your Web browser can interpret it (well, the good ones do, not Internet Explorer) .
So the point is that you can type fairly simple text (like you would enter into a calculator or a spreadsheet) and it will render as proper looking mathematics.
ASCIIMathML - How it's done
To implement ASCIIMathML in your own Web pages (including blogs), you proceed as follows. It is one of the easiest procedures I've come across for this kind of thing.
At the top of your blog, forum or Web page, you insert the following bit of code in your header (between the <head> and </head> tags):
Then in your Web page, you can easily add math using ASCIIMathML in one of the following 3 ways:
(a) Enclosing math in opening single quote characters ()
Where do you find this "opening single quote" character (, otherwise known as "backtick")?
In the first image, the "opening single quote" key is at the top left of the keyboard, on the same key as the tilde (~). In the keyboard on the right, the key is at the upper right and you would need to use the "shift" key (upper case).
To create math on a Web page, use the opening single quote to start and end your math, like the following:
This should give you recognizable math, like this:
(b) Entering math using LaTex code
LaTex code has been the standard for math typesetting for some time. LaTex looks like this:
This is how it renders:
As a comparison, this is the same expression using plain text:
If you are familiar with LaTeX, it will work for you, but I'll be sticking to plain text.
More Examples of ASCIIMathML
Here are some random renderings to give you an idea what ASCIIMathML can do.
Fractions on Fractions
Another matrix example
This next example was one I tried to create using WPMathPub but had trouble because it wasn't very intuitive (see WPMathPub article).
Now, that was much easier compared to WPMathPub! This is the code I used for the above ASCIIMathML:
[(5, 3, cos (2)), (6, 7, 0), (1,-2, sin (5))]
An AskDrMath forum question
This is what someone had to type in an Ask Dr Math question:
/ / / 3 | x^2 dx + 5 | x dx + 9 | dx / / /
With some imagination, you may be able to work out that it's an integral expression. It certainly doesn't look much like math. To get this, the writer had to carefully line up the verticals (|) and slants (/) and it must have taken some time.
In ASCIIMathML, it can be rendered easily like this:
Isn't that nicer, more readable and much easier to type?
The writer's question
Earlier I mentioned a student who wrote and asked how to simplify "x over y plus 2". If the student could have seen the 2 possibilities, and , he may have learned something about brackets, and his question would have been clearer to me.
Things I like about ASCIIMathML
- Easy to set up
- Easy to input math
- Visually pleasing output (for the most part)
- The output takes on the font size of the surrounding text (this is a big plus)
- The output expands if you increase the font size in your browser (whereas images will become more jagged if you zoom in on them)
- It's open source and freely available. You can modify it how you like
- Can be easily scripted, so it can be dynamic (that is, you can display math that changes after user input, or with random parameters)
- Editing - users need to learn a new system, but this is a minor issue as ASCIIMath is like calculator input.
- Like all open source software, there are several different versions of ACIIMathML floating around, so I got confused with some things working in one place but not another.
- Some minor spacing issues
STIX stands for "Scientific and Technical Information Exchange". The STIX fonts are meant to handle a full range of mathematical symbols. You don't have to download them to use ASCIIMathML, but they do fix a few problems. (Go here to find out more about MathML and Firefox and to download the STIX fonts.)
For example, without STIX fonts, this is how part of the solution of the quadratic formula looks. The square root is strange and is actually mathematically incorrect, since it is supposed to include all of the fractions. (This is a screen shot. The coding is correct - what it displays is not, since the square root symbol should span numerator and denominator of the fractions.)
Here's the correct rendering after STIX fonts are installed.
However, the STIX fonts do add some small typesetting glitches, like the square root sign is too tall for the following 2 examples (it happens whenever a letter under the square root has a stem (like b, d, p and q do) or a dot (like i and j do), as we can see in these 2 screen shots:
When the letter does not have a stem (or a dot), the square root is well behaved (the coding for this example has square root for the numerator only and it renders just fine):
My projects using ASCIIMathML
(a) Math emails
As mentioned above, it is very difficult to communicate math in emails. The following solution hopefully addresses that. You can send a mail to someone using ASCIIMathML. The recipient gets an email with a link back to a page where (s)he can view the math. They can then reply or forward your mail on to someone else.
Check out send an email containing math.
[You can also use the above page to practice input for ASCIIMathML, without sending a mail. It works in both Firefox and Internet Explorer (where the math is rendered as images). The emails go out with images, so work in all browsers.]
(b) Matrices - infinite examples and enter your own numbers
Most of the sections in Interactive Mathematics include fixed examples. That is, each time you come back to the page the example is the same because they are images.
I have used ASCIIMathML to produce a page that gives you different examples each time you load the page. (Looks nicest in FF, works OK in IE)
This next page allows you to enter your own numbers into 2 matrices and then the script will multiply them and find their inverses. (Also looks nicest in FF, works OK in IE)
You can't do that with static images!
You can edit these files and see the results on your own computer, and upload them to a server when you are ready.
ASCIIMathML in your blog
Other Options for Math Input
I also reviewed WPMathPub. This was OK, but for those unfamiliar with LaTex, it is a messy solution. Yes, you can use a LaTex editor, but that is a double-dip process.
Zoho Writer is a wiki with a really neat WYSIWYG Tex editor. This is a viable solution for use with students, since they can use the visual interface and never have to worry about typing math. File sizes and storage are not an issue with Zoho writer, since it is all stored on their servers.
You may find this math editor interesting: LaTex editor.
ASCIIMathML is a good solution for communicating math on the Web. It's a shame that the dominant browser (Windows Internet Explorer) still does not support MathML or SVG graphics, so a lot of people are never going to see it.
While ASCIIMathML is still not a cross-browser, cross-system solution (yet), it is elegant and simple — and that's what's needed to help people communicate math on the Web.
See the 16 Comments below.