A Basic Article with MathML

Kyle Siegrist

Abstract

This article shows how to combine XHTML for basic exposition and MathML for mathematical expressions. This document can be used as a basic template, along with the files in the list below.

Keywords

Main Contents

  1. Introduction
  2. MathML
  3. SVG

Ancillary Material

MathML Style sheets

1. Introduction

This is a compound XML document that includes basic exposition in XHTML (the rigorous, XML version of HTML) and MathML (the Mathematics Markup Language) for mathematical expressions. Both of these markup languages are W3C standards, although currently only the Firefox browser supports them in native form. Nonetheless, compound documents like this are the future of mathematics on the web.

Recall that the first part of a compound XML document contains declarations about the type of XMLs used, the document type definition, and other information. A document with MathML should be saved with extension xhtml, and should have the following initial declarations:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN"
    "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/mathml2.dtd">
<?xml-stylesheet type="text/xsl" href="mathml.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

You don't really have to understand what all this means, but if you're curious, the first line declares that this is an XML document and gives the version and encoding. The second line declares that this is a compound document with MathML, and gives a link to a document type definition (DTD), The third line gives a references to an XSL style sheet which is necessary for content MathML (more about that later), and finally the html tag gives a reference to a namespace.

2. MathML

MathML comes in two flavors: Presentation MathML and Content MathML. Both versions encode a great deal about the structure of the mathematical expressions. We do not intend to give a tutorial of MathML in this article (see the resources for that). Rather, we will give a few examples that illustrate what MathML can do.

First, however, you will need to download the MathML style sheets listed in the table of contents and put them in your document directory. The last of these, ctop.xsl is only needed for Content MathML and hence can be omitted if you are just going to use presentation MathML.

Example 1

The roots of the quadratic equation a x 2 + bx +c=0 are given by

x= -b± b2 - 4ac 2a

The mathematical expressions in this example are written in Presentation MathML. The source code for the second expression is given below. Even though MathML is quite verbose, you can probably figure out what each tag does.

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
    <mrow>
        <mi>x</mi><mo>=</mo>
        <mfrac>
            <mrow>
                <mo>-</mo><mi>b</mi><mo>&plusmn;</mo>
                <msqrt>
                    <msup>
                        <mi>b</mi><mn>2</mn>
                    </msup>
                    <mo>-</mo>
                    <mn>4</mn><mo>&InvisibleTimes;</mo><mi>a</mi><mo>&InvisibleTimes;</mo><mi>c</mi>
                </msqrt>
            </mrow>
            <mrow>
                <mn>2</mn><mo>&InvisibleTimes;</mo><mi>a</mi>
            </mrow>
        </mfrac>
    </mrow>
</math>

Example 2

The following integral is important in the study of normal probability distributions, error functions, and other areas:

z 12 z 2 2

This example is written in Content MathML; the source code is given below. Again, even though the language is verbose, you can probably figure out what each tag does.:

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
    <apply><eq />
        <apply><int />
    <bvar><ci>z</ci></bvar>
        <lowlimit>
        <apply><minus />
            <infinity />
        </apply>
            </lowlimit>
            <uplimit><infinity /></uplimit>
            <apply><exp />
                <apply><times />
                    <apply><minus />
                        <cn type="rational">1<sep />2</cn>
                    </apply>
                    <apply><power />
                        <ci>z</ci>
                        <cn>2</cn>
                    </apply>
                </apply>
            </apply>
        </apply>
        <apply><root />
            <apply><times />
                <cn>2</cn>
                <pi />
            </apply>
        </apply>
    </apply>
</math>