Skip to main content
Interactive Mathematics
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.

Related posts:

  1. Easy math input and nice output using ASCIIMathML and MathJax Here's a system that allows easy input of math (using calculator-like syntax) and good-looking...
  2. KaTeX with ASCIIMathML input and MathJax fallback KaTeX can handle ASCIIMathML input, and fall back to MathJax when KaTeX gives up...
  3. MathJax - render math on the Web on all browsers Here's another method for getting math onto a Web page - MathJax....
  4. Comparison of math Web publishing options Publishing math on the Web can be a challenge. Here's a comparison of MathJax,...
  5. How to write math in an email √Writing emails that contain math is usually a problem - how do you enter all...

Posted in Mathematics category - 05 Sep 2009 [Permalink]

Tags:

17 Comments on “Math in emails, forums and Web pages using ASCIIMathML”

  1. Murray says:
    5 Sep 2009 at 1:02 pm [Comment permalink]

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

    {\int_{0}^{{2}\pi}}{\sin{x}}{\left.{d}{x}\right.}={0}

  2. Jon Ingram says:
    5 Sep 2009 at 5:19 pm [Comment permalink]

    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:
    5 Sep 2009 at 7:37 pm [Comment permalink]

    Thanks, Jon.

    Oops - the links are fixed.

  4. John says:
    5 Sep 2009 at 8:22 pm [Comment permalink]

    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:
    5 Sep 2009 at 8:37 pm [Comment permalink]

    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:
    5 Sep 2009 at 8:41 pm [Comment permalink]

    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:
    5 Sep 2009 at 9:09 pm [Comment permalink]

    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:
    8 Sep 2009 at 8:32 pm [Comment permalink]

    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:
    8 Sep 2009 at 9:09 pm [Comment permalink]

    [...] 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:
    15 Sep 2009 at 8:54 pm [Comment permalink]

    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:
    23 Feb 2011 at 7:42 pm [Comment permalink]

    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:
    23 Feb 2011 at 9:08 pm [Comment permalink]

    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 MathTeX as the best solution. Did you see this comparison chart? Comparison of jsMath, ASCIIMathML, PHPMathPublisher, MathJax and MathTeX

  13. Peter says:
    8 Jun 2011 at 11:19 pm [Comment permalink]

    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:
    9 Jun 2011 at 9:05 pm [Comment permalink]

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

  15. Rick H. says:
    25 Jun 2011 at 3:47 pm [Comment permalink]

    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:
    25 Jun 2011 at 8:48 pm [Comment permalink]

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

  17. Vickie Abdullah says:
    25 Mar 2020 at 10:06 am [Comment permalink]

    First time visiting your website, I like your website!

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.