Mathematics Markup Language
One of the reasons that the TeX computer-typesetting package continues to be popular, despite being about as user-friendly as a rattlesnake, is that there are very few other affordable ways for typesetting mathematics.
Somehow, mathematics and HTML have never quite managed to live together. The extension of HTML was "on the way" for so long that now that XML has "arrived" HTML will probably never be extended to include mathematics. Even now, if you want to display basic mathematical equations in a Web page, you can choose between making a screen capture and importing it into your document as a graphics file, or wasting hours on the extremely frustrating exercise of trying to find the right symbol in the right font. (You then have to hope that readers will be prepared to go through almost as much pain to find the right fonts at their end.)
MathML attempts to correct this by providing a markup language for mathematics. There is even a Web browser that supports part of MathML; the Amaya browser can be downloaded from the W3C site (http://www.w3c.org/).
MathML represents a very interesting variation on a theme that has pervaded the SGML world since the very beginning: the seemingly conflicting interests of presentation and semantic (information-based) markup. MathML combines these interests, in parallel, in the same document.
| Presentation markup is primarily concerned with the appearance of the final result. The HTML elements <HR> and <BLINK> are presentation elements. |
Semantic markup is far more interested in identifying the information content of a document. This makes it possible to do other things with the data, such as render it audibly for the sight-impaired, or even (in the case of MathML) submit it to a computer algebra system so that it can plot or even solve the equation for you.
Perhaps recognizing that a picture really is worth a thousand words, MathML intends to incorporate both presentation-based and content-based markup schemes. Consider the simple equation: x(x + 4) = 1. Multiplying out the brackets, this gives x2 + 4x -1 =0, which can be written using only presentation codes, as shown in Listing 21.1.
Listing 21.1 An Example of MathML Presentation Markup
1: <MROW> 2: <MROW> 3: <MSUP> 4: <MI>x</MI> 5: <MN>2</MN> 6: </MSUP> 7: <MO>+</MO> 8: <MROW> 9: <MN>4</MN> 10: <MO>&InvisibleTimes;</MO> 11: <MI>x</MI> 12: </MROW> 13: <MO>-</MO> 14: <MN>1</MN> 15: </MROW> 16: <MO>=</MO> 17: <MN>0</MN> 18: </MROW>
Here the codes merely describe the appearance of the symbols on the page. Now compare this with Listing 21.2, where the same equation is marked up using semantic markup elements.
Listing 21.2 An Example of MathML Semantic Markup
1: <EXPR> 2: <EXPR> 3: <EXPR> 4: <MI>x</MI> 5: <POWER> 6: <MN>2</MN> 7: </EXPR> 8: <PLUS/> 9: <EXPR> 10: <MN>4</MN> 11: <TIMES> 12: <MI>x</MI> 13: </EXPR> 14: <MINUS/> 15: <MN>1</MN> 16: </EXPR> 17: <E/> 18: <MN>0</MN> 19: </EXPR>
| Listings 21.1 and 21.2 show two sets of markup that give completely different views of the same objects. One is a set of pretty meaningless symbols that are positioned in relation to each other, where terms such as superscript (element <MSUP>) and subscript (element <MSUB>) have predominated. The other displays markup that makes a semantically meaningful statement consisting of expressions (element <EXPR>). |
These two views of markup are, however, not irreconcilable and both have their place. Presentation markup is ideally suited for display and even provides a means for an expression to make sense when it is read out loud. In contrast, content markup represents the mathematical meaning of an expression so that the statements can be understood.
Recognizing the need for both types of markup, MathML uses a sort of super element-the <SEMANTIC> element. This element has two children. The first child is the presentation markup, and the second child is the semantic markup. Within MathML, the semantic markup would be a set of MathML content tags, but it doesn't have to be (it could be code that makes sense to some other program). The content of the semantic markup could be a computer algebra expression, or it could even be computer program source code (in C or even Java).
At the moment there is no support for the semantic part of XML, although there are a few individuals who are experimenting with it. The Amaya browser, however, does support the presentation part of XML. Listing 21.3 shows some simple examples of one of the most basic features of all mathematics (and a lot of other text), superscripts, and subscripts, and Figure 21.1 shows what it looks like in Amaya.
|
Listing 21.3 The MathML Presentation Markup for Subscripts and Superscripts
|
1: <html> 2: <head> 3: <title>MathML Examples 1</title> 4: </head> 5: <body> 6: <h1>Subscripts and Superscripts</h1> 7: <hr> 8: <h4>A Simple Subscript</h4> 9: 10: <math> 11: <msub> 12: <mi>x</mi> 13: <mn>y</mn> 14: </msub> 15: </math> 16: 17: <hr> 18: <h4>A Simple Superscript</h4> 19: <math> 20: <msup> 21: <mi>x</mi> 22: <mn>a</mn> 23: </msup> 24: </math> 25: 26: <hr> 27: <h4>A Subscript Squared</h4> 28: <math> 29: <msup> 30: <msub> 31: <mi>x</mi> 32: <mn>n</mn> 33: </msub> 34: <mn>2</mn> 35: </msup> 36: </math> 37: <p></p> 38: <hr> 39: <h4>A Subscript and a Superscript Combined</h4> 40: 41: <math> 42: <msubsup> 43: <mi>x</mi> 44: <mn>a</mn> 45: <mn>b</mn> 46: </msubsup> 47: </math> 48: <p></p> 49: <hr> 50: </body> 51: </html>
Figure 21.1 This is how Amaya displays the MathML code from Listing 21.3.
| Superscripts and subscripts aren't really that demanding. There are even HTML character codes that allow you to insert the small numbers. Listing 21.4 shows something a little more demanding-an example of the MathML code for some simple matrices. Figure 21.2 shows what the code looks like in Amaya. |
|
Listing 21.4 The MathML Presentation Markup for Matrices
|
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2: <html>
3: <head>
4: <title>
5: MathML Examples 2</title>
6: </head>
7: <body>
8: <h1>Matrices</h1>
9: <hr>
10:
11: <h4>A Simple Matrix</h4>
12: <math>
13: <mfenced open="[" close="]">
14: <mfrac>
15: <mi>a</mi>
16: <mi>b</mi>
17: </mfrac>
18: </mfenced>
19: </math>
20: <hr>
21:
22: <h4>Complex Braces (fences)</h4>
23: <math>
24: <mfenced open="(" close="]">
25: <mfrac>
26: <mi>a</mi>
27: <mi>b</mi>
28: </mfrac>
29: </mfenced>
30: </math>
31: <hr>
32:
33: <h4>A More Complex Matrix (math table)</h4>
34: <math>
35: <mfenced open="(" close=")">
36: <mtable>
37: <mtr>
38: <mtd>
39: <mn>1</mn>
40: </mtd>
41: <mtd>
42: <mn>0</mn>
43: </mtd>
44: <mtd>
45: <mn>0</mn>
46: </mtd>
47: </mtr>
48: <mtr>
49: <mtd>
50: <mn>0</mn>
51: </mtd>
52: <mtd>
53: <mn>1</mn>
54: </mtd>
55: <mtd>
56: <mn>0</mn>
57: </mtd>
58: </mtr>
59: <mtr>
60: <mtd>
61: <mn>0</mn>
62: </mtd>
63: <mtd>
64: <mn>0</mn>
65: </mtd>
66: <mtd>
67: <mn>1</mn>
68: </mtd>
69: </mtr>
70: </mtable>
71: </mfenced>
72: </math>
73: <hr>
74: </body>
75: </html>
Figure 21.2 This is how Amaya displays the MathML code from Listing 21.4.
| Matrices, arrangements of characters or digits that are enclosed by brackets and braces, are notoriously difficult to get right. The brackets and braces have to be scaled to fit the contents, and normally this means trying to build up composites using separate characters for the ends and vertical lines for the center pieces. Listing 21.4 shows how easy it can be to specify any kind of bracket or brace you want. They can even be scaled automatically, as shown in Figure 21.2. |
Matrices alone are quite an achievement, but what would mathematics be without integrals and all those other awkward symbols? Listing 21.5 shows a couple of more complex equations. Figure 21.3 shows what they look like in Amaya.
|
Listing 21.5 The MathML Presentation Markup for More Complex Math
|
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2: <html> 3: <head> 4: <title>MathML Examples 3</title> 5: <body> 6: <h1>More Complex Expressions</h1> 7: <hr> 8: <h4>Simple Fraction and a Square Root Expression</h4> 9: <math> 10: <mfrac> 11: <mi>1</mi> 12: <mi>x</mi> 13: </mfrac> 14: <msqrt> 15: <mi>a</mi> 16: <mi>b</mi> 17: <mi>c</mi> 18: </msqrt> 19: </math> 20: <p></p> 21: <hr> 22: <h4>Simple Integrals</h4> 23: <math> 24: <mrow> 25: <msubsup> 26: <mo>&int;</mo> 27: <mn>0</mn> 28: <mi>t</mi> 29: </msubsup> 30: <mfrac> 31: <mrow> 32: <mo>&dd;</mo> 33: <mi>x</mi> 34: </mrow> 35: <mi>x</mi> 36: </mfrac> 37: </mrow> 38: <mrow> 39: <msubsup> 40: <mo>&int;</mo> 41: <mn>-1</mn> 42: <mi>1</mi> 43: </msubsup> 44: <mfrac> 45: <mrow> 46: <mo>&dd;</mo> 47: <mi>y</mi> 48: </mrow> 49: <mi>dt</mi> 50: </mfrac> 51: </mrow> 52: </math> 53: <p></p> 54: <hr> 55: </body> 56: </html>
Figure 21.3 This is how Amaya displays the MathML code from Listing 21.5.
| As you can see, Amaya makes pretty light work of displaying additional mathematical symbols. |
MathML is not yet finished-it still has a number of features that need to be worked out. It is also a long way from being supported in the major Web browsers. However, there is a browser plug-in called EzMath that uses a proprietary math code, but the editor can create MathML code too (you can download this free software from http://www.w3.org/People/Raggett/EzMath.zip).