math formulae in webpages

[Note, I published this before elsewhere; now, a new version is available] 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...


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})}$"
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.


Anonymous said...

Reminds me of when the PNG format came out but wasn't supported by many browsers. Web servers would return GIF images if the browser didn't support GIF. Perhaps something similar could be done here?

What browsers do and which don't support MathML?

Anonymous said...

"if the browser didn't support *PNG*."

Anonymous said...

Didn't work for me until I modified texdrive.el. I had to insert the explicit path to dvips and latex, changing the texdrive.el to

(defvar texdrive-dvips "/usr/local/texlive/2009/bin/i386-linux/dvips"
"name of the 'dvips' program on your system")

Ditto for "latex".

djcb said...

@Anonymous: 'defvar' creates the variable and sets some default; if the default
does not work in your case, you can use 'setq' to set texdrive-dvips etc., to
some other value. There's no need to change the texdrive source code for this.