You are currently viewing a snapshot of www.mozilla.org taken on April 21, 2008. Most of this content is highly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. If there are any pages on this archive site that you think should be added back to www.mozilla.org, please file a bug.

Skip to main content

Authoring MathML for Mozilla

Roger B. Sidje <rbs@maths.uq.edu.au>

Validate your
XML/XHTML

With the W3C's
HTML/XHTML Validator

With RUWF? The
XML Syntax Checker

Validate your
CSS style sheets

From the
web location

With
copy-paste in a text area

With
file upload

Contents
  • Foreword

  • Essentials

  • XHTML Conformance

  • MathML Tips

 

Foreword

The definitive reference for MathML is the MathML specification. The implementation of MathML in Mozilla is first aimed at conforming to Presentation markup of MathML 1.x while considering additions (pros) and deprecated features (cons) from MathML 2.0.

This page is intended to summarize authoring guidelines that will enable you to get the most out of the current implementation which covers nearly all presentation elements in MathML 2.0.

As the implementation is in progress, certain obscure functionalities may be lacking or only partially implemented. Moreover, the entire Mozilla product is still under development and this entails instabilities and other unexpected behaviors. Thus, users who are experimenting MathML in Mozilla should keep all these facts in mind, knowing that they are on the bleeding edge.

Getting involved is part of your contribution. Your feedback can be manifested by putting MathML content on the web and inviting your colleagues to do the same, reporting bugs in BugZilla, and, if you can help with code, inspecting/improving the current code, and/or picking up an item in the ToDo list.

Essentials

Since MathML is an application of XML, a <math>...</math> fragment must be a well-formed XML fragment.

Mozilla does not support the mixture of XML and HTML within the same document. Thus a <math> fragment inside a HTML document is not rendered in Mozilla.

For a <math>...</math> fragment to be rendered in Mozilla, it should be a well-formed XML fragment within a well-formed XML document. This means, among other things, that each opening <tag> must have its associated closing </tag> and that all elements should be properly nested without overlap.

Mozilla is XML 1.0 compliant and can render XML pages that are styled with CSS or XSLT. Different XML vocabularies can be mixed in the same XML document, and each vocabulary will be distinguished by its namespace. Mozilla supports XHTML documents -- the format of choice when serving MathML fragments embedded in other text.

Because of the limitations of HTML, the W3C is now backing XHTML and is not considering doing any major work on HTML anymore. XHTML (eXtensible HTML) is a reformulation of HTML in XML. Contrary to HTML where sloppy markups are tolerated, ill-formed XML (and thus ill-formed XHTML) documents are not rendered.

Because XHTML is a stricter, tidier version of HTML, pages written with the XHTML syntax work well in most browsers. And since this is the format that goes well with the Mozilla MathML renderer, authors/generators ought to use the XHTML syntax. This is a crucial step towards browsing MathML content in Mozilla "out-of-the-box" .

XHTML Conformance

Here are the main rules to produce XHTML compliant documents that will work with Mozilla:
  • XHTML tags are all lowercase

    HTML

    XHTML

    <H1 Align="CENTER">Cauchy
    Integral</H1>

    <h1 align="center">Cauchy
    Integral</h1>


  • All non-empty elements must be terminated

    HTML

    XHTML 

    <p>MathML
  <ul>
    <li>Presentation markup
    <li>Content markup
  </ul>
            
    <p>MathML
  <ul>
    <li>Presentation markup</li>
    <li>Content markup</li>
  </ul>
</p>

  • Empty elements must include a trailing slash (/)

    HTML

    XHTML

    <img src="myimage.gif">

    <img src="myimage.gif" />

    <br>

    <br />

    <hr>

    <hr />


  • All attribute values must be quoted

    • HTML

    XHTML

    <table border=0>

    <table border="0">


  • Attribute-value pairs must be written in full

    • HTML

    XHTML

    <td nowrap>

    <td nowrap="nowrap">


  • The root element of the document must be <html> and must designate the XHTML namespace
    <html xmlns="http://www.w3.org/1999/xhtml">

  • All documents must have a DOCTYPE declaration 
    <!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Here is an example of a minimal XHTML document.

<?xml version="1.0"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head>  
    <title>Minimum XHTML Document</title>  
  </head>  
  <body>  
    <p>
      Accept all valid XHTML, including therefore 
      <a href="http://www.mozilla.org/">links</a>.
    </p>  
  </body>  
</html>

Authoring for Mozilla

Once your document is XHTML compliant, only minor changes are needed to use it in Mozilla, as illustrated in the following example:

<?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>Minimum Document with MathML</title> 
  </head>
  <body>
    <p>
      Accept all valid XHTML and MathML, including therefore 
      <a href="http://www.mozilla.org/">links</a>
      and math fractions 
      <math xmlns="&mathml;">
        <mfrac>
          <mi>a</mi>
          <mi>b</mi>
        </mfrac>
      </math>
    </p>
  </body>
</html>
[ If your browser is MathML-aware, see the rendering of this example ]

MathML Tips

  • Use valid MathML. The syntax of each element is precisely defined in the MathML specification. For example, many MathML elements require a specific number of child elements. Do your readers a favor by serving valid MathML on your website. Much bloat has been added to browsers in order to cope with sloppy HTML. Now with XML/XHTML/MathML, things are starting on a new footing from which the web can be kept clean.

  • Avoid extraneous tags, and/or tags with content that collapse into nothingness. The following is a valid markup (and is indeed rendered properly by the Mozilla MathML renderer): 
      <msup>
    <mrow>
      <mrow>
        <mrow>
          <mi>a</mi>
        </mrow>
      </mrow>
   </mrow>
   <mi>b</mi>
  </msup>

    However, it has a number of flaws in terms of performance and memory consumption:

    • Overhead to fetch the file on the net
    • All the superfluous <mrow> are kept in the DOM
    • CSS frames are created for each and every superfluous <mrow>
    • Time is wasted to reflow (format) them.

    It is simpler, more efficient (and readable too) to strip extraneous <mrow>: 

        <msup>
      <mi>a</mi>
      <mi>b</mi>
    </msup>
    Similarly, to code the 'sin' or 'mod' functions, rather than <mi>s</mi><mi>i</mi><mi>n</mi> or <mi>m</mi><mi>o</mi><mi>d</mi> use <mo>sin</mo> or <mo>mod</mo>.


  • Avoid ignorable whitespace at the beginning and the end of token elements. Rather than: 
        <mi>       a       </mi>
    use: 
        <mi>a</mi>
    MathML is already verbose, and you don't want to add to that verbosity. Do you? Note also that, in the code, price is paid in the loops used to trim and collapse whitespace. Remember, on the web, the same persons that can wait for the termination of a lengthy TeX run from the command line seem tempted to go elsewhere when a site is slow. By keeping extra whitespace out of your markup, you are skipping out of several loops in the code, thus enabling a speedy and better browsing experience to visitors of your website.

  • Use attributes when you expect a particular rendering. For example: stretchy='false', lspace='0', accent='true', accentunder='true'. The built-in default behavior may be different from what you expect.

  • Use CSS units on numeric values. A variety of units are supported (em, ex, px, in, cm, mm, pt, pc, %). The choice of which one to use in a particular context is yours. A numeric value without an unit, such as lspace='10' is ambiguous, and the Mozilla MathML engine will ignore the attribute altogether. Only zero does not need an explicit unit.

  • Add meaning to your markup, and separate style from content. For example, avoid using <mi>(</mi> (or any <mi>symbol</mi>). Unless the symbol is proven otherwise to be truly an identifier, use <mo>symbol</mo> instead. Rather than: 
            <mi fontweight='bold'>
    Use 
            <mi type='vector'>
    in conjunction with the following CSS declaration in your style sheet. 
            mi[type='vector'] { 
          font-weight: bold; 
        }
    This way, you can change the visual appearance of all vectors by just changing the CSS declaration.

See Also: