Math on the Web

One of my favorite challenges to my friends is “Send me an equation”. It sounds like a dumb thing, but after a bit of thought, you’ll agree that

Math Is A Second Class Citizen On The Web!

The Math Typesetting for the Internet page has a good discussion on the issues.

So what to do?! MathML? HTML/CSS? ASCII stunts? Equation Editors? LaTeX Tools? JavaScript?

The fact is that it’s not at all easy to make a choice. So here’s the road I took:

1. Notation: I decided on TeX notation. It’s the standard and I decided I’d be ignorant not knowing it!
2. Tools: LaTeXiT, TextMate and similar tools are good at equation creation, producing images/pdf helping visualize/debug the LaTeX source.
3. Plugins: I decided to not use plugins: I’d need a different one for each blog, wiki, forum and so on. They also often require root access.
4. Images: I similarly decided not to use static images: they are inflexible and hard to manage, and also loose the basic TeX source.
5. LaTeX2HTML: I did not want to use LaTeX2HTML (or similar) because my blog (and wiki and forum) all have their own markdown language that I did not want to “escape” by inserting raw HTML.
6. LaTeX Source: I wanted to retain the LaTeX source in the HTML so that in the future I might use the equation in a different tool.

This led fairly quickly to a very nifty solution: CodeCogs has created a LaTeX Equation Editor and a web service for rendering the results! Sixth Form Mathematics & Law blogs on using the CodeCogs facility for dynamic images created by a server.

The idea is quite elegant: send a LaTeX equation in a URL to a server which converts it, dynamically, to a tiny image. The LaTeX segment below is rendered into the equation following it.

\int_{-\infty}^{\infty}e^{-x^{2}}dx=\sqrt{\pi}

Click on the LaTeX code above to see the CodeCogs URL used and the result of its use as a stand-alone image.

Here’s the Textile markdown used in this article:

!http://www.codecogs.com/eq.latex?
int_{-infty}^{infty}e^{-x^{2}}dx=sqrt{pi}!

The following can be used instead and allows blanks in the LaTeX source:

== <img src=

http://www.codecogs.com/eq.latex?

int_{-infty}^{infty}e^{-x^{2}}dx=sqrt{pi}
/> ==

Note that the line breaks after the “?” in the above URLs are used to fit on the page, they do not occur in the HTML/Textile source.