Principia Hypertextica · A Mathematics Educator's View of Web Design
-----------
intro speed accessibility validity navigability typesetting links
-----------
Let's face it: mathematics is very difficult to convey in HTML, because there are few mathematical symbols in ISO Latin 1, the character set that is the default standard in HTML. Some people try to get away with using the <font face=symbol> trick shown below, but this does not work on all systems, so it is not an acceptably portable solution.
| s | a | v | n | t | |
| s | s | a | v | n | t |
| a | a | v | n | t | s |
| v | v | n | t | s | a |
| n | n | t | s | a | v |
| t | t | s | a | v | n |
Greek letters do not appear in this table on all platforms.
Using ASCII
The ASCII character set (which forms the first 128 characters of the ISO Latin 1 repertoire) is available to all web browsers. The ASCII characters are what most people use in e-mail, and they contain these items useful for mathematics:
1 2 3 4 5 6 7 8 9 0
+ - x * / : ^ ! =
< > ( ) [ ] { }
' " | \ / _ ... ~ @ %
In addition, within the ISO Latin 1 repertoire there are a few other mathematical items, although the seven in the second column below will not appear correctly for people using Macintoshes. In the table, I present the decimal entity name, then the way it is presented by your browser using your current regular font and monospaced font.
| entity | reg | pre | name | entity | reg | p re | name | |
| ¢ | ¢ | ¢ | cent | ¹ | ¹ | ¹ | *sup1 | |
| £ | £ | £ | pound | ² | ² | ² | *sup2 | |
| ¬ | ¬ | ¬ | not | ³ | ³ | ³ | *sup3 | |
| ° | ° | ° | deg | ¼ | ¼ | ¼ | *frac14 | |
| ± | ± | ± | plusmn | ½ | ½ | ½ | *frac12 | |
| · | · | · | middot | ¾ | ¾ | ¾ | *frac34 | |
| ÷ | ÷ | ÷ | divide | × | × | × | *times |
*The entities in the second column do not appear correctly for Macintosh users.*
Clearly, the limitations of the available characters make discussing mathematics challenging. But people have been doing it for a long time via e-mail; on USENET newsgroups like k12.ed.math, sci.math, and sci.physics; and at mathematical web sites like the Ask Dr. Math site. The key is to be inventive in one's use of ASCII. The examples below are contained inside <pre></pre> tags so that multiple spaces are not collapsed. In this situation, you must replace all < and > symbols with "<" and ">" so that the browser will not interpret them as tag delimiters.
If 3 + 4 = 7, then 7 - 3 = 4.
a c
If - = - , then ad = bc.
b d
|-b| = b if b > 0.
|-b| = -b if b < 0.
x^2 + 4x + 4 = (x + 2)(x + 2) = (x + 2)^2
5! = 5 * 4 * 3 * 2 * 1
1 5
y = --- x + ---
3 6
___
\/ 5 + 1
phi = ----------- = ~1.618... <-- This is the golden ratio.
2
P(n + 2) = P(n) + P(n + 1)
?
sin(x^2) = (sin x)^2
When using ASCII, you may wish to set type inside the <tt></tt> tags, so that it appears in a monospaced font. If you do this, then you can use the <sup> and <sub> tags to get superscripts and subscripts in your documents.
d = sqrt[(x2 - x1)^2 + (y2 - y1)^2]
If you want exact positioning of characters (or multiple spaces that won't collapse into a single space), then you must use the <pre></pre> tags to preserve the formatting of your text. Note: The <sup> and <sub> tags are not allowed inside preformatted text, even if they are nested inside <tt> tags.
In the distance formula above I included the ^ symbol even though I used the <sup> tag to raise the 2 as a superscript. Not all browsers recognize the <sup> and <sub> tags, so the ^ symbol may be necessary to avoid confusion. If you eliminate the ^ symbol, then these two equations would look the same on browsers that do not support the <sup> and <sub> tags:
xn + yn = zn and xn + yn = zn
I think Andrew Wiles would probably have something to say about that!
Using GIF Files
Some web authors have decided to use GIF images to set equations on their web pages. The NCTM journal Mathematics Teacher, for instance, uses GIF images to describe line segments, triangles, and other geometric figures that would require special typesetting. See, for example, the paper by two high school students about the GLaD construction, a method for partitioning a line.
Unfortunately, such pages look like a mess to users browsing with images turned off, and may be virtually unusable for people using text-based browsers such as Lynx, unless the author has taken great care to provide suitable ALT texts. Furthermore, GIF images have an absolute size that may not match the font size of the user.
To build a GIF image of an equation, one method is to use a word processor or equation editor to create the equation, then take a "screen capture" of the image and save it as a PICT file. Open the file in an image editing program such as Photoshop or Paint Shop Pro, crop it, and save it as a GIF image. You can find shareware utilities that allow you to create GIF89 versions that have transparency, so that the image will appear to blend in with whatever background the user has specified in a browser.
Certainly GIF images are appropriate for creating simple geometric or graphical diagrams as well. My suite of pages about the historical precedents to the GLaD construction uses a mix of GIF images and ASCII mathematics.
In Development
There are some proposals for improving the ability to do typesetting on the web, but they are hampered by difficulties in distributing fonts online. This is a highly contested issue that font manufacturers and browser developers are currently devoting a great deal of energy to. In the meantime, there are a few experimental projects that demonstrate innovative ways of conveying mathematical information online.
Until dramatic changes occur, I expect that ASCII typesetting will continue to be the fastest and most accessible method of conveying math on the web. Try it and see.
-----------
intro speed accessibility validity navigability typesetting links
-----------
http://world.std.com/~wij/web-design/typesetting.html
revised 18 November 1998
HTML 4.0 validated