Enter math in emails, forums and Web pages using ASCIIMathML

By Murray Bourne, 05 Sep 2009

Updates: ASCIIMathML is now integrated with MathJax (a cross-browser method for presenting math on the Web. See MathJax – render math on the Web on all browsers and ASCIIMathML input, MathJax output

Note: The rest of this article will only make sense if you are using Firefox browser (so you can see the math – get Firefox) and you are reading the original post (ie, rather than a feed). ASCIIMathML can also be made to work in Internet Explorer (as we’ll see later, but not in this post).

The Problem

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=”

Is that x/(y+2) or does he mean (x/y)+2?

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?

I have played with other solutions (see jsMath in WordPress Blogs (uses javascript and LaTeX to render math on the page) and Math rendering in WordPress using WPMathPub (which uses LaTeX-like code and generates an image on the fly). While these 2 solutions have great promise, I found them fiddly and it’s a big ask to get students to learn LaTeX.

ASCIIMathML is a viable alternative.

Example using ASCIIMathML

`int_0^(2 pi) sin x   dx = 0`

The above integral is not an image – it has been rendered using javascript. (If it just looks like text to you, please come back to this page using Firefox.)

To obtain the equation, all I needed to enter was:

`int_0^(2 pi) sin x dx = 0`

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):

<script src=
"http://mathcs.chapman.edu/~jipsen/math/pub/ASCIIMathML/ASCIIMathML.js" 
type="text/javascript"></script>

[Or you can download the javascript to your own server and change the path.]

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 (opening single quote)

Where do you find this “opening single quote” character (opening single quote, otherwise known as “backtick”)?

keyboard-1 keyboard-2

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:

`sum_(i=1)^n i^3=((n(n+1))/2)^2`

This should give you recognizable math, like this:

`sum_(i=1)^n i^3=((n(n+1))/2)^2`

(b) Entering math using a math and enda math

This is the second (and probably easiest) method for entering math using ASCIIMathML. “a math” stands for “automatic math”. Anything between the words a math and enda math will be (cleverly) rendered as math or text, depending on what you type. This entry mode is convenient, but suffers occasionally from unexpected math rendering when you don’t actually want it (like about half the time I’ve been writing this article!).

For example, let’s enter the following text:

amath 
Displacement: s = u t + 1/2 a t^2
Trigonometry: tan^2x+1=sec^2x
Summation: pi = 4 sum_(i=1)^(n) ((-1)^(k+1))/(2k-1) 
endamath

This will give you the following mix of text and math:

amath Displacement: s = u t + 1/2 a t^2
Trigonometry: tan^2x+1=sec^2x
Summation: pi = 4 sum_(i=1)^(n) ((-1)^(k+1))/(2k-1)
endamath

It knows that “displacement”, “trigonometry” and “summation” are words (and so presents them as text), while the letters and numbers should be rendered as math.

(c) Entering math using LaTex code

LaTex code has been the standard for math typesetting for some time. LaTex looks like this:

`$f(x)=\sum_{n=0}^\infty\frac{f^{(n)}(a)}{n!}(x-a)^n$`

This is how it renders:

`$f(x)=\sum_{n=0}^\infty\frac{f^{(n)}(a)}{n!}(x-a)^n$`

As a comparison, this is the same expression using plain text:

`f(x)=sum_{n=0}^oo (f^n (a))/(n!) (x-a)^n`

This gives:

`f(x)=sum_{n=0}^oo (f^n (a))/(n!) (x-a)^n`

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. You can see the coding used if you place your cursor over the math.

Matrices

amath A B = ((8,4),(5,1)) ((-8,5),(1,-15))=((8 xx -8 + 4 xx 1,8 xx 5 + 4 xx -15),(5 xx -8 + 1 xx 1,5 xx 5 + 1 xx -15))

=((-60,-20),(-39,10)) endamath

Quadratic Equation

amath If a x^2 + b x + c = 0, then

x = (-b+-sqrt(b^2-4a c))/(2a) endamath

Fractions on Fractions

`(6/(x+2))/(3/(2x+4)) = 6/(x+2)   -:   3/(2x+4) = 6/(x+2) xx (2(x+2))/3 = 4`

Roots

`root3x ≠ sqrt (3x)`

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

`[(5, 3, cos 2), (6, 7, 0), (1,-2, sin 5)]`

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:

`3 int x^2   dx + 5 int x   dx + 9 int   dx`

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, `x/(y+2)` and `x/y+2`, he may have learned something about brackets, and his question would have been clearer to me.

Graphs, too!

One of the cool things about ASCIIMathML is that it will also draw graphs. Below is not an image – it is an example of SVG (scalable vector graphics) output. Your browser renders it as a graph.

This is some example code:

\begin{gra ph}width=400; height=300; xmin=-6.3; xmax=6.3; 
xscl=1; plot(3cos(x^2)) \end{graph}

Here is the resulting graph. Move your mouse cursor over the graph – it tells you the `x`- and `y`-coordinates of the cursor position.

\begin{graph}width=400; height=300; xmin=-6.3; xmax=6.3;xscl=1; plot(3cos(x^2)) \end{graph}

I’ll do a separate article soon about the graphing capabilities of ASCIIMathML.

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)

ASCIIMathML Drawbacks

  • Only works in Firefox (with zero hassle). In IE you need to download the MathPlayer plugin to see equations and the Adobe SVG plugin to see graphs, which most users aren’t going to bother doing, so will miss out.
  • Editing – users need to learn a new system. While it is simple and intuitive for those with some experience, it could be pretty messy for the novice.
  • 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. For example, `root3x` (which is “root3x” enclosed in single opening quote marks) works as expected, while a math root3x enda math does not render, and gives simply amath root3x endamath.
  • Some spacing issues, like `AA x` shouldn’t show a space between the `AA` and the `x`. I would like to have better control over spacing. Most of the time it is very good, but I would like to be able to insert a space between the `x` and the `dx` in `int x{:dx` (I can, using &nbsp;, but I mean I would like to use a symbol)

STIX fonts

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

non-stix-2

Here’s the correct rendering after STIX fonts are installed.

stix-fonts-1

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:

stix-fonts-2 stix-fonts-3

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):

stix-fonts-4

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)

See Simple Online Matrix Calculator.

You can’t do that with static images!

Download ASCIIMathML

You can download the javascript and example HTML files from here: Download ASCIIMathML.js.

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

squareCircleZ runs on WordPress and to write this post I added the call to the javascript at the top of my post and it worked just fine. If you know you are going to use ASCIIMathML a lot, you would add the javascript call in the header.php in your theme so you can access it in any post.

If you are using Blogger.com, you can follow these instructions to include javascript.

Other Options for Math Input

As mentioned earlier, I recently evaluated jsMath and found it to be an elegant solution. However, while ASCIIMathML works in a similar way (you call a javascript file then input your math in a specified way) it is simpler to set up than jsMAth, simpler to input math and is more pleasing visually.

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.

Resources

You may find this math editor interesting: LaTex editor.

Conclusion

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.

Kudos to the developers of ASCIIMathML, particularly Peter Jipsen, Chapman University.

See the 16 Comments below.

Share this page

16 Comments on “Enter math in emails, forums and Web pages using ASCIIMathML”

  1. Murray says:

    You can also add math in the comments here in the blog:

    `int_0^(2 pi) sin x   dx = 0`

  2. Jon Ingram says:

    Interesting writeup — I’ll have to have a play with this system.

    The links to your two matrix examples are broken (they point to ‘localhost’). I’d like to look at them if they get fixed!

  3. Murray says:

    Thanks, Jon.

    Oops – the links are fixed.

  4. John says:

    The math typesetting looks great when I visit your blog’s web page directly (using Firefox) but it does not render when I read your blog via Google Reader. Unfortunately, this is usually the case for convenient ways of adding math to blog posts.

    I don’t know whether this is a problem for other RSS readers. However, 70% of those who subscribe to my blog use Google Reader.

  5. Murray says:

    Hi John – good to hear from you. Yah, I mentioned this problem early in the post:

    Note: This article will only make sense if you are using Firefox browser (so you can see the math – get Firefox) and you are reading the original post (ie, rather than a feed).

    There is also an option with ASCIIMathML to show images if the rendering fails. Not sure if that will still work in a feed (it will depend on javascript anyway, I imagine). I will look into that if I get a chance.

  6. John says:

    Sorry about that. You do say it clearly right up front. I caught the part about requiring Firefox but missed the line about feeds.

  7. Murray says:

    No worries!

    Did you have a try of “Math in emails“? I’ll send you a mail using that system – your feedback would be appreciated.

  8. stelt says:

    Would using SVGWeb instead of Adobe SVG Viewer also work for those still on Internet Explorer? See last bit of http://developers.slashdot.org/story/09/09/04/1355216/Google-To-Host-International-SVG-Conference

  9. Wiskundige formules in mail en op web « Open source en standaarden op de UT says:

    [...] niet met MathML overweg kan, is communicatie met daarin wiskundige formules een probleem. Dit artikel over ASCIIMathML laat manieren zien om dit probleem te [...]

  10. Murray says:

    Stelt: Thanks for the tip! The codinginparadise.org site was down so I couldn’t check it out earlier. I’ll certainly incorporate SVGWeb when I work on the SVG graphs later.

  11. saroj lama says:

    The math typesetting looks great when I visit your blog’s web page directly (using Firefox) but it does not render when I read your blog via Google Reader. Unfortunately, this is usually the case for convenient ways of adding math to blog posts.

    I don’t know whether this is a problem for other RSS readers. However, 70% of those who subscribe to my blog use Google Reader.

  12. Murray says:

    Hi Saroj. Yes, this is a problem with any of these javascript-based math solutions. I do have a caution at the beginning of the article that says:

    “Note: This article will only make sense if you are using Firefox browser (so you can see the math – get Firefox) and you are reading the original post (ie, rather than a feed).”

    I keep leaning towards MatTeX as the best solution. Did you see this comparison chart? Comparison of jsMath, ASCIIMathML, PHPMathPublisher, MathJax and MathTeX

  13. Peter says:

    I just wanted to thank you for the information on your web site.

    These days, not many websites are informative. Congratulations that yours is different! If I ever publish a website, I will make a link of your website into it.

    Peter

  14. Murray says:

    @Peter: Thanks for the positive feedback! I’m glad it was useful.

  15. Rick H. says:

    Thanks Murray for the nice overview of ASCIImathML. You expressed a desire for having a convenient way to add space to a math expression. Well, within a math expression, if you insert a backslash followed by a space, then the ASCIIMathML generator will put a bit of extra space at that very location. So, to use your example, `int x dx` can be done as `int x\ dx`.

  16. Murray says:

    Hi Rick. Actually, I figured that out since, but forgot to update the post. Thanks for doing it for me!

Leave a comment