Wednesday, 26 November 2008

it's so easy

Sometimes, I like to use mathematical notation in webpages, either to impress people or simply for decoration. One way to do that is MathML, which is an XML-based markup language for mathematical notation. However, many browsers do not support MathML at all, or require you to download plugins and/or special fonts. Another problem with MathML is that XML is a really inconvenient format to edit by hand. Practically, you'll need some kind of formula editor.

tex vs mathml

As an old-schooler, I prefer to use the math-notation invented for TeX instead - it is short and sweet and powerful. Donald Knuth invented the whole TeX language because he was unhappy with the quality of typesetting of mathematic, and it is widely used in both computer science and mathematics. Anyway, I'm sure many people remember the 'abc-formula' to calculate the roots of a quadratic function :

In the TeX-sublanguage for math, one can specify the formula as follows:
 -b \pm \sqrt{b^2 - 4ac} \over 2a

The corresponding MathML is no fewer than 20 lines; see the example in Wikipedia. Clearly, MathML is not designed for hand-editing. There are are some editors available, but hand-editing TeX is much faster (at least for me); and, as mentioned, even if you have the MathML, many browser will not show it correctly.

So what I'd like is a way to use (i) TeX-notation and (ii) have it display correctly in any (graphical) browser. One way to that is to use LaTeX to process and render the formulae, and convert that to a PNG-image. In 2004, I wrote a little tool called WebTeX to create small images from TeX-formulae. It was nothing too fancy; you enter a <img ...>-element with some decription of some formula, and the little tool would turn it into an image, using LaTeX and ImageMagick. I don't maintain that old tool anymore - it was time for something new. Therefore...

texdrive

This weekend, I wrote a new maths-in-webpages tool using emacs-lisp. The emacs-integration makes adding formulae to html-pages really easy. For example, if I want to include the famous Bayes' Theorem, I simply type:
  M-x texdrive-insert-formula  Formula: $P(A|B) = \frac{P(B|A)P(A)}{P(B|A)P(A) + P(B|\overline{A})P(\overline{A})}$  Title: bayes-theorem

Et voilà; the following is inserted:
  <img src="bayes-theorem.png" title="bayes-theorem"        class="texdrive-formula" name="$P(A|B) = \frac{P(B|A)P(A)}{P(B|A)P(A) + P(B|\overline{A})P(\overline{A})}$"        border="0">

Now, all we need to do is texdrive-generate-images-from-html, and the corresponding image will be generated:

So, for immediate download: texdrive.el. It works pretty well for me; please let me know if you have any problems or are missing something. In some cases, the formulae are not as sharp as they could be; I hope I'll be able to improve it with some tweaking. Anyway, it's nice to see how one can solve problems by glueing together some existing open-source tools. Standing on the shoulders of giants...

Note that some wiki-software, notably Wikipedia's MediaWiki, use a similar approach.

Bernard said...

I realise that your aim is to allow others to display equations without having to modify their browser environment, but if your target audience uses Firefox and greasemonkey there's a handy Tex to MathML converter available here.

djcb said...

@Bernard: did not know that one, thanks. does not really solve the problem, as you note, but still interesting tool.

Marius Gedminas said...

I ask you to consider using the 'alt' attribute rather than 'name' to store the TeX formula.

djcb said...

@Marius: sure, that could be done -- but why? to provide something for non-graphical browsers?

maybe what it's in the 'title' element currently would be better; ie. 'bayes-theorem' might be more useful than the TeX.

there are some options:
http://www.w3.org/TR/html401/struct/objects.html#edef-IMG