Math 300: Creating MathML (back to Math 300 notes)


MathML is far from easy to create. There are relatively few MathML editors that could be called user-friendly, nor are there good tools for converting other markup languages, such as TeX, into MathML. There are some tools that do not yet qualify as "good", but can be useful. Notable among these is the Amaya browser/editor, from the W3C. This browser is a demonstration project for a number of the W3C's standards programs, one of which is MathML. Amaya is primarily an editor for web formats, and so it includes a MathML editor. This editor, while primitive and difficult to use, is probably the best one extant. Another option is the Firemath addon for Firefox, if you can learn to work with its dreadful interface.

While it is painful, it is probably important to have some understanding of the details of MathML, so that we can fix the mess made by many MathML editors. Consider a very simple MathML expression: ab . When you examine the source code for this, you will see that the first markup is the <mfrac> tag, which indicates that a fraction is coming. This is the way all MathML works: we first have to specify the large structure we are typesetting, and only inside that structure can we specify the characters that make up the pieces. The larger structures will always take a specified number of arguments. In the case of <mfrac> there are two arguments; the first is the numerator, the second is the denominator. In this case, both numerator and denominator are single letters, set in a math italic font, hence the <mi> tags.

Now suppose we need the expression a+c in the numerator. In this case, there is more than a single character there, so we need to indicate the grouping of the symbols a and + and c together in the numerator. We do this by using the ubiquitous <mrow> tag, as you can see by examining the source of the following expression. a+c b The <mrow> tag simply tells the browser that the material enclosed is to be taken as a horizontally-aligned group - a row of mathematical notation. It does not imply any actual mathematical grouping (i.e. parentheses). To get that we might have used the <mfenced> tag - viz a+c b . Observe also that the plus sign is not formatted in math italic. Instead it is declared as a math object using the <mo> tag. This works primarily to put the proper spacing around the math object.

Formatting something like an integral uses more tags again, as well as some special symbols. Most particularly, we need an integral symbol. In this case, we want a definite integral, so that the integral symbol must have both sub- and superscripts. The lower limit will be zero, so we need to declare it as type math number using the <mn> tag. The result looks like this. 0 f x dx The sub- and superscripts on the integral sign are implemented using the <msubsup> tag. This takes three arguments: the first the symbol or character that is to get the subscripts and superscripts, the second the subscript, and the third the superscript. If any of these is to be composed of more than one character, then we would apply an <mrow> tag. x-1 f x dx

Note also that we must have some special characters available to us in our fonts. In the integral, we needed an integration symbol, specified by enclosing the work Integral between an ampersand and a colon, and an infinity symbol which we obtain analogously. One must have the proper fonts on the system where the page is viewed to use these characters.

Typesetting matrices in MathML is more troublesome again, though it is entirely analogous to setting tables in HTML. In this case we must appeal to the <mtable> tag, and its associated math table row (<mtr>) and math table data (<mtd>) tags. I= 10 01 Note that this time the <mfenced> tag made parentheses that were the right size to enclose the text within. This is the point of that tag - parentheses have to vary in size according to the shape of the material inside. The <mfenced> tag defaults to using parentheses, but you can control what grouping symbol is used as in the following. I= 10 01

It is even possible in MathML to use symbols that have text above and below them, such as summations. We typeset the following summation using the <munderover> tag, which again takes three arguments: the base symbol, the part that goes underneath that symbol, and the part that goes above the symbol. Note that we have also introduced the <msup> tag here. This takes two arguments: the base symbol, and the part that appears in the superscript. There is an analogous <msub> tag. i = 1 x i

You now understand that in practice, it is cumbersome to type MathML. We need an editor, and the web browser Amaya has one. You can get it for any platform you wish at W3C. This is a nice product, but as we mentioned above, it is not a production browser. My experience in using it to create MathML is that it is quite difficult to get Amaya to mix math and text, and too frequently when typing long expressions Amaya either fails to understand what I have in mind, or worse, after getting an expression to the form I want, I make one change that causes it to revert irretrievably to a bad form. I don't recommend Amaya for generating entire documents, though you are free to try it. It is, however, very useful for creating individual MathML expressions using the following procedure.

  1. Open a MathML generator such as Amaya, a MathML compliant browser such as Firefox, and a text editor such as gedit.
  2. Now type your HTML5 and MathML in the gedit window. You unfortunately have to type all the HTML tags yourself - no wysiwyg formatting.
  3. You can preview your document using the browser window
  4. Whenever you need to type a mathematical expression, go to the Amaya (or other MathML generator) window, and use the math editor to create the expresssion.
  5. When you have the expression formatted, click Views->Show Source to see the source code for the MathML.
  6. Select the source for the expression you want using the mouse and then use the X buffer to paste it into your gedit window at the appropriate place.
  7. Finish editing the MathML in the editor.