RK* - rikkertkoppes.com

thoughts

Authoring MathML

2005-02-06 modified: 2005-02-10

The formula's on this site are only shown in MathML supporting browsers, which are Mozilla, Firefox and Internet Explorer, aided by the MathPlayer plugin. All other browsers should show TeX code.

I have made some effords to make it possible to show equations on this site. As you might know, MathML is the XML way to do it, but it comes with a number of difficulties. In this article I will discuss those, and I will provide solutions.

Authoring

First of all, MathML is quite a nuicance to author. The (presentational) syntax is quite easy to remember, but it's a lot of tags to type for a single equation. As an example I will use the abc formula (to get the roots of a 2nd order polynomial):

$x = (-b +- sqrt(b^2 - 4ac)) / (2a)$
(1)

In MathML, this requires the following syntax:

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

Now do you want to type that? I do not, so I looked around for another solution.

ASCIIMathML

Peter Jispen's ASCIIMathML brings the solution, this is a Javascript library that transforms TeX (or similar) code to MathML, which saves you a lot of typing.

Our equation now reduces to x = (-b +- sqrt(b^2 - 4ac)) / (2a), that's what I want to author.

I used this library, with a little tweaks of my own (mostly the function at the bottom). The complete authoring is done as follows:

<pre class="math">$x = (-b +- sqrt(b^2 - 4ac)) / (2a)$
  <span class="mathnr">(1)</span>
</pre>

The whole TeX equation is embedded in a pre element, to make it look nice in browsers that do not support MathML. The extra span is the number of the equation, when browsers start supporting CSS counters, this could become automatic (in fact, it is already automatic in Opera).

Inline formula's are possible as well, but they're put into a <code class="math"> element. The polynomial $4x^2 - 2x + 6 = 0$ is an example of inline math.

Browser Support

As said, MathML only works in supporting browsers, which are, at this moment, Mozilla, Firefox and Internet Explorer with the MathPlayer plugin. For Firefox and Mozilla, a XML data island (in the MathML namespace) embedded in an XHTML document is sufficient (see the example above). For Internet Explorer, the MathPlayer plugin should be added, which is done in the head element as follows:

<!--[if lte IE 6]>
  <object id="mathplayer" classid="clsid:32F66A20-7614-11D4-BD11-00104BD3F987"></object>
  <?import namespace="mml" implementation="#mathplayer"?>
<![endif]-->

As you can see, I enclosed the whole in conditional comments, assuming MathML support in later versions of IE and keeping this bogus away from other browsers. Furthermore, a MathML namespace prefix must be declared for MathPlayer to work:

<html xmlns:mml="http://www.w3.org/1998/Math/MathML">

This breaks HTML validation however, since xmlns is not a valid attribute in HTML. Still looking for a solution.

wysiwyg

Playing with this, I thought it would be nice to have a wysiwyg equation editor for online authoring. After some experimenting, it turned out to be possible. I'm still working on this though, but I thought it would be nice to mention. Comments are welcome.

Update 2005-02-10

After reading Jacques Distler's comment (see below), I dug a little deeper on the Mathplayer plugin site. Mathplayer introduces itself in the user agent string, so you are able to discriminate between Mathplayer enabled IE and plain IE. This way I only serve the invalid xml namespace to Mathplayer enabled browsers.

Additional resources (top 15)

Below is a list of additional resources that might contain extra information about the subject at hand. These are all sites linking to this one (i.e. backtracking).

  1. Mathematical Symbols on the Web [en-US] (36)
  2. mathml - Live Search [nl] (33)
  3. Google zoeken: MathML firefox (23)
  4. Practical MathML | Oxide Interactive [en] (22)
  5. Google Search: mathml firefox (18)
  6. firefox mathml - Google Search (9)
  7. MathML News | Musings [en] (8)
  8. Mathematical Symbols on the Web [en-US] (7)
  9. mathml firefox - Google Search (6)
  10. mathml firefox - Google Search (6)
  11. Google Search: Firefox MathML (5)
  12. mathml firefox - Google Search (5)
  13. Google-Suche: mathml firefox (5)
  14. Google-Suche: mathML firefox (4)
  15. Pesquisa Google: mathml firefox (4)

comment

Jacques Distler (2005-02-09)

Your characterization of MathPlayer is incorrect (out of date).

The current version of MathPlayer (the only one available at web site you link to) works with exactly the same Standards-Compliant XHTML+MathML documents that Mozilla/Firefox do. No &lt;object&gt; element is necessary. You do need to have a well-formed XHTML document, and it does need to be served with the correct MIME-type to browsers with the MathPlayer plugin (or to Mozilla/Firefox).

But that's it.

(What?! No preview?)

Rikkert (2005-02-10)

You are right, if you serve application/xhtml+xml to IE with mathplayer, it will be accepted, as long as you use the xhtml 1.1 plus mathml 2.0 dtd. Mathplayer processes this page and adds back the <object> bogus, removes the doctype and adds a mathml namespace to the html element.

So in the end, the page is still rendered as tagsoup, the DOM is still a HTML dom (checked that) and furthermore, the rendering mode is put into quirks mode (since the doctype is removed), which might cause boxmodel problems.

The latter is solved by adding another doctype after the first one, but i'm not sure if that's allowed in any way.

I don't know whether it's good practice to do it this way too, in the end, after Mathplayers processing, you end up with a HTML document (but now an invalid one due to XHTML syntax) in quirks mode. It's just the same garbage in the end, but now it's done by Mathplayer, not by yourself.

I prefer adding the invalid bogus myself, but I found out it is possible to discriminate between Mathplayer IE and normal IE at the server, since Mathplayer introduces itself in the user agent string. This way, I only add the Mathplayer stuff (object element, xmlns attribute and import processing instruction) to Mathplayer enabled browsers.

Ow, and there's no preview, because you can't use HTML anyway, the output is the same as the thing you type in the textarea

Jacques Distler (2005-02-10)

Are you *sure* the document is parsed as tag-soup? I'm pretty sure (I thought I checked this) that if you throw an ill-formed document at MathPlayer 2.0, IE will throw an XML parsing error (indicating that the document went down the XML parser code-path).

There certainly are rendering issues (since IE, despite having a built-in XML parser, is not an XHTML UA), but that's not the same as saying that the document is parsed as tag-soup.

Rikkert (2005-02-11)

If I make a xhtml document (with the mathml doctype discussed above and served as application/xhtml+xml), IE does not care about open tags, nesting errors etc.

Add comment
older articles
AdministrationAtom feed