Displaying Math on the Web

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).

This page was created in 2004. As of December 2010, the situation has not significantly improved, however there are some hopeful developments. MathML is now supported in more browsers. And MathJax looks very promising: MathJax is an open source JavaScript display engine for mathematics that works in all modern browsers. No more setup for readers. No more browser plugins. No more font installations... It just works.

Goals and Requirements

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

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 MyPhysicsLab. In addition I'm using a modified version of gladTeX to create bitmap images of the fancier equations.

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      <p class="display-equation">
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.

Another example of macro usage: 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 as frac(1,2). 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
     &theta; = θ
     &pi; = π
     &omega; = ω
Also available are some math symbols like
     &radic; = √
     &int; = ∫
     &sum; = ∑
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 &minus; 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 &nbsp; 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-math { white-space: nowrap; }
Then in the HTML I would write something like
...the function <span class="inline-math">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 =   x2 + x + 1
2 cos(x)
Here is the equation with the table borders turned on, so you can see where the cells are:
x =   x2 + 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.

To display a table within a sentence apply the CSS "display:inline-table" property to the table. For example, here is a small table-based fraction:
∂ L
∂ θ'
  which should appear within the text, not 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 = √  x2 + y2
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 = √  x2 + y2
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: 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 = √  x2 + y2
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:
a2 + b2 = c2 (1)
Here is the table with borders to show where the cells are:
a2 + b2 = c2 (1)
The HTML/CSS to produce this is 
<style>
    table.numbered-equation { width:99%;  text-align: center;
        vertical-align: middle;
        margin-top:0.5em; margin-bottom:0.5em; line-height: 2em; }
    td.equation-number { text-align:right; width:2em; }
</style>

<table class="numbered-equation" 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="equation-number">
            (1)
        </td>
    </tr>
</table>
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 θ' cos2 θ − m x'' cos θ − m R θ'' cos2θ + m R θ' 2sin θ cos θ − m g sin θ − b⁄R θ' sin2 θ = m R θ'' sin2θ + m R θ' 2sin θ 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 θ' cos2 θ − m x'' cos θ − m R θ'' cos2θ + m R θ' 2sin θ cos θ − m g sin θ − b⁄R θ' sin2 θ = m R θ'' sin2θ + m R θ' 2sin θ cos θ

GladTeX for Windows

gladTeX is a perl script that converts LaTeX expressions to bitmap images. (Note that I have created an enhanced version of gladTeX for Windows, more on this below). The LaTeX is embedded in your HTML document within <eq> tags. When the document is processed by gladTeX, bitmap images are produced and <img> tags are inserted into your HTML document. For example,
     <eq>\sum_{k=1}^\infty \frac{1}{k^2} = \frac{\pi^2}{6}</eq>
is replaced by
     <img src="eqns/web_math000.png" width="88" height="48"
     alt="\sum_{k=1}^\infty \frac{1}{k^2} = \frac{\pi^2}{6}">
which displays this equation image

\sum_{k=1}^\infty \frac{1}{k^2} = \frac{\pi^2}{6}

(Actually, the source document should have a .htex extension, and gladTeX then produces a document with the .html extension.)

Here is an example of an inline equation: \int x \; dx = x^2 /2 which is specified with the text
     <eq inline=1>\int x \; dx = x^2 /2</eq>
Note the inline=1 property. GladTeX takes special measures to get the equation to line up with the other text on the line.

I've enhanced gladTeX in several ways: To use gladTeX, you need to install several other tools: perl, LaTeX, ghostscript, and grep. See the page describing my enhanced version of gladTeX for more information.

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.

Advantages: Fast display of lots of math. No special installation required for users. Free and standards based. Adjusts to user font size preferences.

Disadvantages: Authoring can be more tedious. Only simple math can be represented, though you can combine it with GladTeX as needed for more complex equations.

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.


gladTeX is a perl script that converts LaTeX expressions to bitmap images. The LaTeX is embedded in your HTML document within <eq> tags. When the document is processed by gladTeX, bitmap images are produced and <img> tags are inserted into your HTML document. Note that I have created a version that works on Windows and that has some additional useful features.

Advantages: Easy authoring with LaTeX embedded directly in your HTML document.

Disadvantages: With many equations on a page, image files can make the page slow to display. Image files require some additional file and directory organization. Print quality is not the best. Images do not scale if the reader changes font size.

Compatibility: 100% compatible with all browsers, all systems.

License: Open source.


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 similar to gladTeX, but requires you to write each equation as a separate .tex file.

HTeX is a LaTeX-to-image convertor similar to gladTeX, but 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.

Other Links

Here are some useful links about displaying math on the web:

This web page was first published September 2004.

vorherig nächste Valid HTML 4.01