PhysLab.net – Displaying Math in HTML

Displaying math on web pages with HTML is challenging. There are many approaches. Here are some notes on what I've learned and the solutions I'm using (for now).

Goals and Requirements

What solution you choose for displaying math depends on your goals and requirements. Here are some factors to consider:

Package or font installation. Are your readers willing to install a package or special fonts required to view math?
Authoring. What kind of authoring environment do you want? How do you want to express your math? How much control do you want over the HTML that is produced?
Print quality. Is being able to produce a printed version important? How high quality must the print version be?
Academic papers. Are you putting an academic paper (usually in LaTeX format) on the web? Do you want to keep it as a LaTeX document and not have a separate version for the web?
Fancy math. Does your math have lots of fancy formatting and special symbols?
Compatibility. What browser & operating system combinations must you support? All of them, or only certain ones?
Speed. Should your web page display quickly, even on a slow internet connection?
Disabilities. Must you support readers with disabilities? For example, should readers with poor eyesight be able to increase the font size?
License and cost. What are your cost considerations? Do you require open source software that you can modify yourself?
Amount of math. Do you have less than 10 equations or more than 100 on your page?

How I Display Math on the Web

My reviews of the various options for displaying math on the web are given below. To cut to the chase, here is the solution that I came up with.

I use raw HTML and CSS (cascading style sheets) for most of the math display on PhysLab.net.

I would prefer to be writing math as LaTeX expressions within my HTML files that is then pre-processed to mathML. But mathML seems to be not quite ready for wide-spread use. mathML is built-in for very few browsers, so a user must download a special player which may not be available for all systems or browsers.

I sometimes have as many as 50 or more equations on a page, so I felt that converting them all to images would result in the page loading too slowly. Also, I would like to allow the user to change the font size of the text and math in the browser – but images do not adapt to font size changes. And the print quality is better with text-based math than with images.

My primary target is HTML pages, so I want a solution that lets me write HTML. Therefore I stayed away from tools where you write the entire page in LaTeX which is then converted to HTML. I felt that LaTeX to HTML conversion would not give me enough control over the resulting HTML.

I use a macro pre-processor to define macros that I use in creating the HTML math. For example I can write
     #define eqn_start      <span class="display_eqn">
which defines a macro that I can place before each equation. This makes for less typing, and if I need to change what comes before each equation I can do so in one place – by changing the macro (and re-processing the pages). I can also make macros that take one or more arguments. For example
     #define sup(1)      <sup>#arg#</sup>
is a macro for making a superscript. The #arg# is replaced by whatever is passed in to the macro.

I wrote my own macro pre-processor but there are probably better ones out there, such as htmlex. (If you are interested I'm happy to provide my macro pre-processor – written in C – under an open source license, just email me.)

Since I use italics for variable names, I usually have several macros like this:
     #define _x      <i>x</i>
Then I can just refer to _x in the HTML file, and the pre-processor turns that into the italicized version automatically.

Writing Math in HTML and CSS

You can look at the HTML source of any of the pages on my physics simulation website to see examples of writing math with HTML. (Keep in mind that I use macros when authoring the math, so the actual HTML is more dense than what I work with). You can also look at the CSS style sheet for this website. Here I'll explain some of the techniques I use.

A good reference for rendering math in HTML is Jukka Korpela's website. I use many of the basic techniques he describes. Some are obvious such as using <sub> for subscripts, <sup> for exponents, or <b> for vectors.

A nice trick for small fractions that I found on Jukka's website is this:
     <sup>1</sup>&frasl;<sub>2</sub>
which is rendered by HTML as ¹⁄₂. You can create a macro to make this easier to type. The fraction slash character &frasl; renders this a bit nicer than a regular slash (though older browsers might not recognize it at all).

I use many of the HTML 4.0 Character Entity References for greek characters such as
     θ = θ
     π = π
     ω = ω
Also available are some math symbols like
     √ = √
     ∫ = ∫
     ∑ = ∑
Compatibility? Modern browsers support these, but it depends on the font. Some font's have these symbols and others don't. I've seen a case where different sizes of the same font varied in whether they have these symbols.

I use − instead of a dash. Compare how they look: −1, -1. If you are using a mono-spaced font (like Courier) then you can get away with using a dash instead.

I frequently use the non-breaking space   to fix up spacing problems, in math and elsewhere.

Using a CSS cascading stylesheet can help standardize the look of math across many pages and different browsers. For example, I define the styles for <sub> and <sup> with
     sup { vertical-align: 0.8ex; font-size:95%; }
     sub { vertical-align: -0.6ex; font-size:95%; }
This helps ensure that CSS compliant browsers show subscripts and superscripts as I want them to.

I define several CSS classes to control things like margins, centering, line breaks, default font, etc. For example, here is my class for inline math display:
     span.inline_eqn { white-space: nowrap; }
Then in the HTML I would write something like
...the function <span class="inline_eqn">f(x) = x + 2</span> is a simple function...
which ensures that the inline equation is not split onto two lines when the browser renders the page.

I specify a bigger line height for display equations (equations that are on their own line) with { line-height: 2em } to help make the spacing between equations more even. This helps because then equations with or without subscripts or superscripts have about the same line height.

Fractions with `<table>`

Fractions can be made with HTML tables. I use the CSS border-top style to create the fraction line. Here's an example:

x =	x² + x + 1
	2 cos(x)

Here is the equation with the table borders turned on, so you can see where the cells are:

x =	x² + x + 1
	2 cos(x)

This is the HTML and CSS that produces the fraction.

<style>
    td.upper_line { border-top:solid 1px black; }
    table.fraction { text-align: center; vertical-align: middle;
        margin-top:0.5em; margin-bottom:0.5em; line-height: 2em; }
</style>

<table class="fraction" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="2" nowrap="nowrap">
            <i>x</i> =  
        </td><td nowrap="nowrap">
            <i>x</i><sup>2</sup> + <i>x</i> + 1
        </td>
    </tr><tr>
        <td class="upper_line">
            2 cos(<i>x</i>)
        </td>
    </tr>
</table>

Note that the part of the equation that is not in the fraction is put into a separate table cell that spans the rows of the table. I find that proper indenting helps to make the HTML more readable while authoring. I don't use macros for these tables because macros would obscure the indenting of the table.

At present, tables cannot be used for inline display – some browsers show them on a separate line. For example, here is a small table fraction

∂ L

∂ θ'

that should appear within the text, not on a separate line. Compatibility is not quite enough: on my systems, Internet Explorer shows it correctly; Netscape Navigator shows it inline, but not vertically centered; Safari and Opera put it on a separate line.

Using tables for layout is generally frowned-upon by advanced web gurus. But, until MathML is more widely supported, I think using tables is a good short-term solution.

Square Roots with `<table>`

Square roots can also be done with the HTML <table> command. It's very similar to the fractions-with-tables described above. Here's an example:

r = √

x² + y²

Depending on your browser and default fonts, the radical and the horizontal line may not join up exactly. On my PC this looks best with Internet Explorer, fair with Opera, and poor with Firefox. (Firefox seems to be doing more kerning of the characters which causes some overlap problems).

To see where the table cells are, here is the same equation with borders turned on:

r = √

x² + y²

The HTML to produce this is:

<table style="margin-top:0.5em; margin-bottom:0.5em; text-align: center;"
    align="center" cellpadding="0" cellspacing="0" >
    <tr>
        <td nowrap="nowrap" align="right">
            <i>r</i> = <span style="font-size: 150%;">&radic;</span>
        </td><td style="border-top:solid 1px black;" nowrap="nowrap">
            &nbsp;<i>x</i><sup>2</sup> + <i>y</i><sup>2</sup>
        </td>
    </tr>
</table>

Things to notice:

the radical symbol is given a larger font size;
the horizontal line is made by giving the cell a top border;
I use a non-breaking space   to give a little more room next to the radical.

For consistency and flexibility you may want to use CSS style classes instead of the style directive inside the <table> commands (this is shown in the fraction example above).

Larger radicals can be had by increasing the font size (though each browser interprets this a bit differently); here is an example that is combined with a fraction:

r = √	x² + y²
	5

A different approach is to use a bitmap image for the radical symbol. With CSS absolute positioning you can make a transparent PNG or GIF bitmap and position it over the text. But the drawbacks to this approach are: if the user chooses a different font size, then the radical symbol won't scale correctly along with the text under the radical; and print quality is not as good when mixing bitmaps and text.

Numbering Equations

I use <table> for numbering equations. Here's an example:

a² + b² = c²

(1)

Here is the table with borders to show where the cells are:

a² + b² = c²

(1)

The HTML to produce this is

<style>
    table.num_eqn { width:99%;  text-align: center; vertical-align: middle;
        margin-top:0.5em; margin-bottom:0.5em; line-height: 2em; }
    td.eqn_number { text-align:right; width:2em; }
</style>

<table class="num_eqn" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <i>a</i><sup>2</sup> + <i>b</i><sup>2</sup> = <i>c</i><sup>2</sup>
        </td>
        <td class="eqn_number">
            (1)
        </td>
    </tr>
</table>

Note that the <style> tag goes in the <head> section of your HTML document. Also I use a macro to generate most of the HTML code for the numbered equation table, so it's a lot easier to type.

Long Equations and Line-Breaking

With long equations, it is annoying when the browser puts a line-break in the middle of a math expression. Try resizing your browser window and you'll see this here: −^b⁄_R θ' cos² θ − m x'' cos θ − m R θ'' cos²θ + m R θ' ²sin θ cos θ − m g sin θ − ^b⁄_R θ' sin² θ = m R θ'' sin²θ + m R θ' ²sin θ cos θ The solution is to surround the sub-expressions with the tags
<span style="white-space:nowrap;"> ... </span>
Here is the same equation with the nowrap styling: −^b⁄_R θ' cos² θ − m x'' cos θ − m R θ'' cos²θ + m R θ' ²sin θ cos θ − m g sin θ − ^b⁄_R θ' sin² θ = m R θ'' sin²θ + m R θ' ²sin θ cos θ

Reviews of Math Display Packages

HTML math as described above is not a package, but for comparison here is a review:

Authoring: More complicated than other packages that use LaTeX input. Helpful to use a macro package to reduce the amount of HTML you have to write.

Compatibility: Very good. Uses built-in HTML and CSS standards. But be sure to test under various browsers and operating systems.

mathML is the new standard for displaying math on the web. In the long term this will probably be the best solution.

Authoring: MathML is too verbose to write directly, so you need to find an authoring package that will produce it. Several packages are available, however you then need to integrate the resulting mathML into your HTML file.

Advantages: it is the standard. Can represent any imaginable equation. Display and print quality should be very good. It downloads quickly because it arrives as text within the web page, instead of separate image files.

Disadvantages: Not yet widely supported by browsers. Requires a player to be installed by the user.

Compatibility: Not yet widely supported. There is a free player available for IE under Windows. Directly supported by Amaya and Mozilla/Netscape browsers.

jsMath produces some of the best looking math I've seen, and is very easy to use. You put a TeX equation inside an HTML <span> or <div> tag, and then some Javascript will turn it into HTML. The Javascript is sent along with the page to the user's machine where it runs when they look at the page. The Javascript is based on an actual TeX engine, so the result is quite beautiful.

Advantages: Easy authoring using standard TeX inside HTML tags. Free, open source.

Disadvantages: Users should install TeX fonts for best results. jsMath works without the TeX fonts, but the result doesn't look nearly as good and the speed of display is slow. Even with the TeX fonts it can take a while to render lots of math, so best for pages without much math.

Compatibility: Seems good, but relies on complex Javascript code and specific fonts.

TtH is a TeX to HTML translator. It is a highly developed package and seems to be well regarded.

Authoring: You create a LaTeX document which is then converted to HTML by TtH (a C program).

Advantages: Easy authoring in LaTeX.

Disadvantages: The resulting math is sometimes a bit odd looking. The HTML is not really under author control.

Compatibility: Reliance on the Symbol font means this does not work on Macintosh systems.

License: Free only for non-commercial uses. Not open source.

pdf is a great format for display-only on the web. You can easily make a pdf version of a LaTeX paper using pdflatex.

Advantages: Looks great. Prints great.

Disadvantages: Not HTML, therefore not well integrated into a web site. Appears in a special player window. User must have installed a PDF viewer.

Compatibility: PDF viewer is widely available.

Other Math Display Packages

TexToGif is a LaTeX-to-image convertor requires you to write each equation as a separate .tex file.

HTeX is a LaTeX-to-image convertor seems to not be actively supported currently.

Hyperlatex "is a way to create documents that will look good both as printed text and on the web. It is not a general-purpose converter to take LaTeX into HTML. Rather it is a set of macro definitions that allow a user to write one document for two media and to have the output look good in both. Hyperlatex is a set of Emacs macros, which can be used from within Emacs, or compiled and used independently."
If you are not scared off by emacs, hyperlatex may be a good solution.

LaTeX2HTML is a well-known converter from LaTeX to HTML. I would rather have more control over the HTML, so I did not evaluate this seriously.

Tex4HT is a general LaTeX-to-HTML converter similar to TtH or Latex2HTML.

Mathematica is a commercial math package. It provides some solutions for exporting to HTML or MathML.