Embedding equations in HTML - Part I

• Published 2005-01-26 (3 years, 3 months ago)
• Updated 2005-02-15 (3 years, 3 months ago)

As a PhD student I need tools for typesetting mathematical equations. However, when writing for the web, I seldom use equations. This is mostly because I don't need them, but also because the lack of support for mathematics in HTML makes it a nuisance to write equations like for instance:

I'm currently working on a simple CMS for my web site. It is based on XHTML and PHP on the server and Python is used as a transformation tool and to glue the various components together. The use of Python gives incredible flexibility, so why not include a way to easily embed and display mathematical equations in my web pages?

In a two part article I will show you how to embed mathematics in your XHTML documents and generate beautiful equations. In the first part I will discuss various aspects concerning browsers and markup. In part two I will describe a practical solution to the problem, using Python, LaTeX and a handy little program called dvipng.

Investigating our options

For rendering mathematics in a browser there are three main options:

• HTML and CSS.
• MathML
• Images

The first option is a good choice for simple equations. HTML has the <sub> and <sup> tags for subscripts and superscripts. However, writing fractions, Greek letters and other mathematical symbols is difficult.

MathML

According to the W3C, MathML is:

MathML is intended to facilitate the use and re-use of mathematical and scientific content on the Web, and for other applications such as computer algebra systems, print typesetting, and voice synthesis. MathML can be used to encode both the presentation of mathematical notation for high-quality visual display, and mathematical content, for applications where the semantics plays more of a key role such as scientific software or voice synthesis.

This sounds great. However, MathML is a low-level specification based on XML, and handwriting equations in MathML is a lot of work. Of more concern is the fact that, at the time of writing, the majority of browsers can not render MathML without downloading additional plug-ins.

Images

The safest way of displaying complex mathematics on the web is by using images. You first generate the equations in some program, and then save them as images for inclusion in your HTML document. It is not an optimal solution, but at the present time it seems to be the best choice. A good example of this method is the Mathworld site.

Markup

LaTeX has a simple and powerful syntax for writing mathematics. The TeX engine also produces esthetically pleasing and beautiful equations, so LaTeX is an obvious choice for writing mathematics. LaTeX also has an xml-friendly syntax, so LaTeX code can easily be included directly in the XHTML document.

To produce the equation

I want to write something as simple as:

<div class="eq">
  y = \int_0^\infty \gamma^2 \cos(x) dx 
</div>

Or for an inline equation like :

bla bla <span class="eq">y^2=x^2+\alpha^2</span> bla bla
    

I have now presented how I want to write mathematics for the web; a method with LaTeX code embedded directly in the XHTML markup. The LaTeX compiler can then be used to generate beautiful looking equations that can be displayed as images in the browser. Now it's time to find out how to implement a convenient and automated solution. This will be the topic of the second part of the article.