WOLFRAM

Wolfram Language & System » Documentation Center »
Wolfram Language
WEBMATHEMATICA TUTORIAL

MathML

MathML is designed to allow mathematical, scientific, and other technical information to be served, received, and processed on the World Wide Web. It is an official recommendation of the World Wide Web Consortium (W3C) working group on mathematics. Users of webMathematica can benefit from MathML in a number of ways. They can use MathML for documents that contain a mixture of mathematics and text, they can generate MathML dynamically on their webMathematica site, and they can use a MathML entry mechanism to enter mathematical notation into their web browser and send this to webMathematica for computation.

Wolfram Research has long been involved in the development of MathML, both as a founding member of the mathematics working group of the W3C and as the host of the first two official MathML conferences in 2000 and 2002. Mathematica contains many features for working with MathML and there is a strong relationship between the Mathematica typesetting system and MathML.

One resource for learning more about MathML is the Wolfram Research sponsored website, http://www.mathmlcentral.com. A section describing the evolution of MathML and some of the issues involved in developing a mathematical language suitable for a computation system such as Mathematica is found at http://www.mathmlcentral.com/history.html.

If you are not interested in the specific details of how MathML works and just want to use MathML in your output, then you should go to the sections Generating MathML and Sending MathML.

Embedding MathML in Web Documents

This section discusses how documents can be written that mix both mathematics and text. These documents are written in XML format and use both MathML and XHTML (the XML compliant form of HTML). webMathematica contains functions that do all of this automatically, so you do not need to read this unless you wish to learn more about the details of how browsers support MathML.

XHTML

XHTML is an XML compliant form of HTML, available as an official W3C recommendation, http://www.w3.org/MarkUp. It is very similar to HTML, except that for a document to be valid it must follow the rules of XML. (Some of these were described in the previous section.) To use documents that mix mathematics and text, XHTML is required. Use of XHTML is needed anyway, since the W3C intends that HTML will not be developed further.

The sample XHTML document illustrated below is very similar to HTML, except for the initial XML declaration and the DTD reference. The latter can be used by an XML parser to validate that the input document is indeed valid XHTML. This demonstrates one of the benefits of XML technology. That is, a parser can validate a document, checking details such as the different tags being in the correct places and holding the correct number of arguments, without specializing in the particular flavor of XML. The reference to the DTD is not required; however, it is necessary if the document is to be validated.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic XHTML Document</title>
</head>
<body>
<h1>XHTML</h1>
<p>This is a basic XHTML document.</p>
</body>
</html>

This document could be read by modern web browsers and would display in the expected fashion.

XHTML and MathML

To add mathematics and other technical notation to a text document, it is possible to write one document that contains both XHTML and MathML. A sample document follows.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" 
               "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd" [
          <!ENTITY mathml "http://www.w3.org/1998/Math/MathML">
    ]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic XHTML+MathML Document</title>
</head>
<body>
<h1>XHTML+MathML</h1>
<p>Here is a math expression.</p>
<math xmlns='http://www.w3.org/1998/Math/MathML'>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup></math>
</body>
</html>

This could be read into a browser that provides native support for MathML and would be read as expected. Note the reference to a DTD that allows the embedding of MathML into XHTML to form an XHTML+MathML document.

MathML is natively supported in Firefox and Safari, whereas other browsers may require a plug-in to function correctly.

Rendering XHTML and MathML Documents

The previous section showed how to embed MathML into XHTML, creating documents that mix text and mathematics. It also explained that this does not work with browsers that rely on a plug-in mechanism. This section shows how to write documents that will work in a wide range of browsers.

To support MathML in browsers using a plug-in mechanism, the document must use special tags that are relevant to the particular plug-in used. If the browser supports MathML natively, then no special tags are needed. Of course, an author does not want to produce different versions of each document specific to each rendering technology. The solution is to make use of XSLT stylesheet technology to convert the document in the browser before it is viewed. This automatically inserts any special tags that are needed for plug-ins. An XSLT stylesheet that implements this solution is available from the W3C Math site, http://www.w3.org/Math/XSL.

Here is a document that uses the MathML stylesheet.

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="http://www.w3.org/Math/XSL/mathml.xsl"?> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic XHTML+MathML Document</title>
</head>
<body>
<h1>XHTML+MathML</h1>
<p>Here is a math expression.</p>
<math xmlns='http://www.w3.org/1998/Math/MathML'>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</math>
</body>
</html>

This document can be rendered by any browser that is supported by the stylesheet. At the current time this includes the following:

Windows:

1.  Internet Explorer with the MathPlayer plug-in

2.  Firefox

3.  Opera

4.  Amaya (Presentation MathML only)

Macintosh:

5.  Firefox

6.  Opera

Linux:

7.  Firefox

8.  Opera

9.  Amaya (Presentation MathML only)

See http://www.w3.org/Math/XSL for updates.

By using an absolute reference to the stylesheet, documents that use the stylesheet found on the W3C site can be moved from one server to another or saved locally and continue to work. One issue with an absolute stylesheet reference is that Internet Explorer may, according to its configuration, give a warning or even reject the stylesheet altogether (leading to a failure to render the MathML). This can be solved with a relative reference to the stylesheet and by placing a copy of the stylesheet on the same server as the document. For example, the document can start as follows.

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="/webMathematica/Resources/XSL/mathml.xsl"?>

This means that the stylesheet will be found at the URL /webMathematica/Resources/XSL/mathml.xsl relative to the root of the server from which the document is being retrieved. If a server chooses to do this, it will work well with Internet Explorer, but it will be necessary to ensure that the server has an up-to-date version of the stylesheet. It will also mean that documents will not be quite so portable when moved from one server to another.

Note that the XHTML+MathML document shown above that uses the MathML stylesheet does not contain a DOCTYPE declaration. This is, of course, a limitation because the document cannot now be validated. Another consequence is the XML system that renders it will not be aware of any special entity names. The DTD is missing because Internet Explorer does not accept all the entities in the MathML DTD. The solution is to use MathML which refers to numerical rather than named entities.

Here is an example that uses a named entity reference, &af;.

<math xmlns='http://www.w3.org/1998/Math/MathML'>
<mrow>
<mi>sin</mi>
<mo>&af;</mo>
<mrow>
<mo>(</mo>
<mi>x</mi>
<mo>)</mo>
</mrow>
</mrow>
</math>

This example uses the numerical value &#8289;. It is the preferred form.

<math xmlns='http://www.w3.org/1998/Math/MathML'>
<mrow>
<mi>sin</mi>
<mo>&#8289;</mo>
<mrow>
<mo>(</mo>
<mi>x</mi>
<mo>)</mo>
</mrow>
</mrow>
</math>

If you want to find the numerical value for any character, you can use the Mathematica function ToCharacterCode to generate the numerical value, and BaseForm to generate the hexadecimal form. For example, the unicode value of a capital phi can be found as follows.

In[1]:=
Click for copyable input
Out[1]//BaseForm=

Further information on the appropriate numerical values can be found at the MathML site, http://www.w3.org/TR/MathML2/chapter6.html as well as at the unicode site, http://www.unicode.org.

Generating MathML from webMathematica

Certain webMathematica applications generate results that contain mathematical expressions suitable for formatting with MathML. This section shows how to generate MathML with webMathematica and take advantage of the rendering techniques described in the previous section.

The main webMathematica documentation describes how MathML can be generated with MSPFormat using a format style of MathMLForm. The following will format the expression expr into MathML.

<msp:evaluate>
    MSPFormat[ expr, MathMLForm]
</msp:evaluate>

MathML comes in two different varieties: presentation MathML specifies the appearance of the MathML whereas content MathML attempts to specify what the MathML means. Since MathML contains no general extension mechanism, the amount of information that can be encoded with content MathML is limited. However, if presentation MathML is generated from Mathematica, it will always work when sent back to Mathematica.

It is also possible to use other formatting styles, such as StandardForm or TraditionalForm, in which case the format type RawMathML should be selected, as shown here.

The following shows how to generate presentation MathML.

<msp:evaluate>
    MSPFormat[ expr, TraditionalForm, PresentationMathML]
</msp:evaluate>

The following generates content MathML.

<msp:evaluate>
    MSPFormat[ expr, TraditionalForm, ContentMathML]
</msp:evaluate>

Tools for working with MathML typically support both content and presentation.

MathML Integrate Example

This example JSP uses the MathML stylesheet. The page is actually a combination of two JSPs, IntegrateForm.jsp and IntegrateXSLT.jsp, that use JavaScript. They are closely modeled on the standard webMathematica examples PlotScript.jsp and PlotScript1.jsp. The source for these MathML examples is available in webMathematica/Examples/MathML. If you installed webMathematica as described above, you should be able to connect to this JSP via http://localhost:8080/webMathematica/Examples/MathML/IntegrateForm.jsp. (You may have some other URL for accessing your server.)

You first see the source for the input page, IntegrateForm.jsp.

<%@ taglib uri="http://www.wolfram.com/msp" prefix="msp" %>

<html>

<head>
<title>MathML Example: Integrate a Function</title>
<script>
function integrate(f, page) 
{
if ( page == 1)
    pageToLoad = "IntegrateXSLT.jsp"
else if ( page == 2)
    pageToLoad = "IntegrateXML.jsp"
else
    pageToLoad = "IntegrateMathPlayer.jsp"
  win = window.open( pageToLoad + "?fun=" + URLescape(f.fun.value), "integrate", 
             "toolbar=none,resizeable=yes,width=450,height=350");
}
</script>
</head>

<body>

<h1>MathML Example: Integrate a Function</h1>

<form action="IntegrateForm.jsp" method="post">
Enter a function to be integrated: <br/>
<input type="text" name="fun" size="24" value="<msp:evaluate>MSPValue[$$fun, "Sin[x]^2"]</msp:evaluate>"/> 
The following uses the MathML XSLT style sheet.
<input type="image" name="btnSubmit" src="../../Resources/Images/Buttons/xslt.gif" onclick="integrate(this.form, 1)"/> <br/>
<i>Uses the general MathML XSLT style sheet, this is the most general solution.</i>
The following are alternatives for rendering MathML. They are not 
general solutions, but are included for demonstration purposes.
<input type="image" name="btnSubmit" src="../../Resources/Images/Buttons/xml.gif" onclick="integrate(this.form, 2)"/> <br/>
<i>Returns XHTML+MathML, suitable for a browser with native MathML support.</i>
<input type="image" name="btnSubmit" src="../../Resources/Images/Buttons/mathplayer.gif" onclick="integrate(this.form, 3)"/> <br/>
<i>Uses MathPlayer specific markup, suitable if you have MathPlayer installed.</i>
</form>

This example shows how MathML can be generated from webMathematica.
</body>
</html>

This is standard HTML. When the input button is clicked, a JavaScript function is called that extracts the input from the input field and calls the JSP IntegrateXSLT.jsp, which then opens in a new window. The contents of IntegrateXSLT.jsp are shown below.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/webMathematica/Resources/XSL/mathml.xsl"?>

<%@ taglib uri="http://www.wolfram.com/msp" prefix="msp" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Integrate Result</title>
</head>

<body>

<msp:evaluate>
    MSPPageOptions[ "ContentType" -> "text/xml"];
    fun = Unspecified;
    int = Unspecified;
    If[ MSPValueQ[ $$fun],
        fun = MSPToExpression[ $$fun];
        int = Integrate[ fun, x];
        If[ Head[int ] === Integrate, int = Unknown]] ;
</msp:evaluate>

Integration of a function, formatting into MathML.

<table border="2" rules="all">
<thead>
    <tr>
    <th>Function</th><th>Integral</th>
    </tr>
</thead>
    <tr>
    <td align="center"><msp:evaluate> MSPFormat[ fun, MathMLForm]</msp:evaluate></td>
    <td align="center"><msp:evaluate> MSPFormat[ int, MathMLForm]</msp:evaluate></td>
    </tr>
</table>

</body>
</html>

This uses the MathML stylesheet, which here is assumed to be installed in the webMathematica web application in the directory XSL. The output content type is set to text/xml, and the necessary computation in Mathematica is carried out.

When this example works, it might be interesting to use the View Source menu of your browser. It should be noted how the MathML flows naturally with the XHTML. Also note how the document does not state the physical size of each mathematical expression. This is very useful because the size will only be known accurately when the document is rendered in the browser.

The actual example code delivered with webMathematica is a little more complicated since it contains alternatives for rendering directly with MathPlayer and for generating XHTML+MathML. However, the one shown above that uses the MathML stylesheet is the most general solution. The others are included in the example for demonstration purposes.

Send Feedback