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.
#define eqn_start <p class="display-equation">
#define sup(1) <sup>#arg#</sup>
#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.
#define _x <i>x</i>
_x
in the HTML file, and the pre-processor turns that into the italicized version automatically.
<sub>
for subscripts, <sup>
for exponents, or <b>
for vectors. <sup>1</sup>⁄<sub>2</sub>
⁄
renders this a bit nicer than a regular slash (though older browsers might not recognize it at all). θ
= θ π
= π ω
= ω √
= √ ∫
= ∫ ∑
= ∑−
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.
to fix up spacing problems, in math and elsewhere.<sub>
and <sup>
with sup { vertical-align: 0.8ex; font-size:95%; }
sub { vertical-align: -0.6ex; font-size:95%; }
span.inline-math { white-space: nowrap; }
...the function <span class="inline-math">f(x) = x + 2</span> is a simple function...
{ 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.
<table>
border-top
style to create the fraction line. Here's an example:
x = | x^{2} + x + 1 |
2 cos(x) |
x = | x^{2} + x + 1 |
2 cos(x) |
<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.
∂ L |
∂ θ' |
<table>
<table>
command. It's very similar to the fractions-with-tables described above. Here's an example:
r = √ | x^{2} + y^{2} |
r = √ | x^{2} + y^{2} |
<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%;">√</span> </td><td style="border-top:solid 1px black;" nowrap="nowrap"> <i>x</i><sup>2</sup> + <i>y</i><sup>2</sup> </td> </tr> </table>Things to notice:
to give a little more room next to the radical. style
directive inside the <table>
commands (this is shown in the fraction example above).r = √ | x^{2} + y^{2} |
5 |
<table>
for numbering equations. Here's an example:
a^{2} + b^{2} = c^{2} | (1) |
a^{2} + b^{2} = c^{2} | (1) |
<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.
−^{b}⁄_{R} θ' cos^{2} θ − m x'' cos θ − m R θ'' cos^{2}θ + m R θ' ^{2}sin θ cos θ − m g sin θ − ^{b}⁄_{R} θ' sin^{2} θ = m R θ'' sin^{2}θ + m R θ' ^{2}sin θ cos θ
The solution is to surround the sub-expressions with the tags <span style="white-space:nowrap;"> ... </span>
nowrap
styling:
−^{b}⁄_{R} θ' cos^{2} θ − m x'' cos θ − m R θ'' cos^{2}θ + m R θ' ^{2}sin θ cos θ − m g sin θ − ^{b}⁄_{R} θ' sin^{2} θ = m R θ'' sin^{2}θ + m R θ' ^{2}sin θ cos θ
<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>
<img src="eqns/web_math000.png" width="88" height="48"
alt="\sum_{k=1}^\infty \frac{1}{k^2} = \frac{\pi^2}{6}">
.htex
extension, and gladTeX then produces a document with the .html
extension.) <eq inline=1>\int x \; dx = x^2 /2</eq>
inline=1
property. GladTeX takes special measures to get the equation to line up with the other text on the line.
alt
tag.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.
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.
<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.
<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.
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.
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.
This web page was first published September 2004.