Backspaces: Math on the Web

Math on the Web · 2008-07-20

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:

Notation: I decided on TeX notation. It’s the standard and I decided I’d be ignorant not knowing it!
Tools: LaTeXiT, TextMate and similar tools are good at equation creation, producing images/pdf helping visualize/debug the LaTeX source.
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.
Images: I similarly decided not to use static images: they are inflexible and hard to manage, and also loose the basic TeX source.
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.
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}

$\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.

XHTML/CSS: The Quiet Web Revolution

Sites

Web Design

Math on the Web · 2008-07-20