Skip to main content
Search IntMath
Close

Math in emails, forums and Web pages using ASCIIMathML

By Murray Bourne, 05 Sep 2009

Update 1: 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

Update 2: I now use KaTeX to display math on most of the IntMath site.

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

\frac{x}{{y}+{2}}

or does he mean this?

{\left(\frac{x}{y}\right)}+{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 (jsMath which used javascript and LaTeX to render math on the page, but has since been superceded by MathJax) and WPMathPub (which used LaTeX-like code and generated an image on the fly). While these 2 solutions had 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}}{\left.{d}{x}\right.}={0}

The above integral is an image and to obtain the equation, all I needed to enter was:

 {\int_{0}^{{2}\pi}}{\sin{x}}{\left.{d}{x}\right.}={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}={{\left(\frac{{{n}{\left({n}+{1}\right)}}}{2}\right)}}^{2}

This should give you recognizable math, like this:

{\sum_{{i}={1}}^{n}}{i}^{3}={{\left(\frac{{{n}{\left({n}+{1}\right)}}}{2}\right)}}^{2}

(b) Entering math using LaTex code

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

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

This is how it renders:

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

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

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

This gives:

{f{{\left({x}\right)}}}={\sum_{{n}={0}}^{\infty}}\frac{{{f}^{n}{\left({a}\right)}}}{{n}!}{{\left({x}-{a}\right)}}^{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.

Matrices

{A}{B}={\left(\begin{matrix}{8}&{4} \\ {5}&{1}\end{matrix}\right)}{\left(\begin{matrix}-{8}&{5} \\ {1}&-{15}\end{matrix}\right)} ={\left(\begin{matrix}{8}\times-{8}+{4}\times{1}&{8}\times{5}+{4}\times-{15} \\ {5}\times-{8}+{1}\times{1}&{5}\times{5}+{1}\times-{15}\end{matrix}\right)}

={\left(\begin{matrix}-{60}&-{20} \\ -{39}&{10}\end{matrix}\right)}

Quadratic Equation

\text{If }\ {a}{x}^{2}+{b}{x}+{c}={0},\ \text{ then}

{x}=\frac{-{b}\pm\sqrt{{b}^{2}-{4}{a}{c}}}{{2}{a}}

Fractions on Fractions

\frac{{\frac{6}{{x}+{2}}}}{{\frac{3}{{2}{x}+{4}}}}=\frac{6}{{x}+{2}}\div\frac{3}{{2}{x}+{4}}=\frac{6}{{x}+{2}}\times\frac{{{2}{\left({x}+{2}\right)}}}{3}={4}

Roots

{\sqrt[{3}]{{q}+\sqrt{{q}^{2}-{p}^{3}}}}+{\sqrt[{3}]{{q}-\sqrt{{q}^{2}-{p}^{3}}}}

Another matrix example

This next example was one I tried to create using WPMathPub but had trouble because it wasn't very intuitive.

{\left[\begin{matrix}{5}&{3}&{\cos{{\left({2}\right)}}} \\ {6}&{7}&{0} \\ {1}&-{2}&{\sin{{\left({5}\right)}}}\end{matrix}\right]}

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}{\left.{d}{x}\right.}+{5}\int{x}{\left.{d}{x}\right.}+{9}\int{\left.{d}{x}\right.}

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,

\frac{x}{{y}+{2}}

and

\frac{x}{y}+{2},

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)

ASCIIMathML Drawbacks

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

Check out send an email containing math, which outputs math as images which you can include in an email.

(You can also use the above page to practice input for ASCIIMathML.)

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

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 found jsMath to be an elegant solution, but it's no longer under development. 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: Codecogs 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 17 Comments below.

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 mix both types of math entry in your comment.

top

Tips, tricks, lessons, and tutoring to help reduce test anxiety and move to the top of the class.