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.
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 |
∂ θ' |
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:
r = √ | x^{2} + y^{2} |
5 |
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−^{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 θ
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.
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.
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.
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.