EzMath - a simple way to embed math in HTML

Dave Raggett <dsr@w3.org>,
Davy Batsalle <batsalle@email.enst.fr>
27th November 1997

Ezmath Icon The EzMath Plugin and Editor

The Web lacks an effective means for embedding mathematical expressions in Web pages. Hitherto, authors have been forced to use bitmapped images which are slow to load, complex to produce, and look bad when printed.

EzMath provides an easy to learn notation for embedding mathematical expressions in Web pages. The notation is inspired by how expressions are spoken aloud together with a few abbreviations for conciseness.

EzMath covers a widely used subset of mathematics. EzMath focusses on the meaning of mathematical notation rather than just how it looks on paper (or screen). The EzMath editor can be used to create MathML content tags conforming to the W3C mathematical markup language.

The paper on EzMath compares it with previous approaches and gives a definitive list of EzMath features. EzMath is freeware. It was developed by Dave Raggett and Davy Batsalle with the generous support of Hewlett Packard Laboratories. Suggestions for further work, and offers of help are welcomed.

Installing EzMath

Download the EzMath as a zipped file (131k). This contains the following:

What it looks like

Here is a screen shot of the EzMath Editor:

screen shot

The Ezmath for this expression is:

    a^m over a^n = either a^{m-n} when m > n 
    or 1 when m = n or 1 over a^{n-m} when m < n

Here is the markup generated by the editor for the expression:

    <embed type="text/ezmath"
        pluginspage="http://www.w3.org/People/Raggett/EzMath"
        align=absmiddle
        width= 181 height=106
        fontsize=small
        color="#FFFF00"
        bgcolor="#000080"
        alt="a^m over a^n = either a^{m-n} when m > n 
            or 1 when m = n or 1 over a^{n-m} when m < n">

If you change the clipboard format to MathML, you instead get the following:

    <e>
       <eq/>
       <apply>
          <over/>
          <apply>
             <power/>
             <ci>a</ci>
             <ci>m</ci>
          </apply>
          <apply>
             <power/>
             <ci>a</ci>
             <ci>n</ci>
          </apply>
       </apply>
       <ea>
          <apply>
             <apply>
                <power/>
                <ci>a</ci>
                <apply>
                   <minus/>
                   <ci>m</ci>
                   <ci>n</ci>
                </apply>
             </apply>
             <st/>
             <e>
                <gt/>
                <ci>m</ci>
                <ci>n</ci>
             </e>
          </apply>
          <apply>
             <cn>1</cn>
             <st/>
             <e>
                <eq/>
                <ci>m</ci>
                <ci>n</ci>
             </e>
          </apply>
          <apply>
             <apply>
                <over/>
                <cn>1</cn>
                <apply>
                   <power/>
                   <ci>a</ci>
                   <apply>
                      <minus/>
                      <ci>n</ci>
                      <ci>m</ci>
                   </apply>
                </apply>
             </apply>
             <st/>
             <e>
                <lt/>
                <ci>m</ci>
                <ci>n</ci>
             </e>
          </apply>
       </ea>
    </e>

Plugin Parameters

The EzMath plugin supports the following parameters:

Using <OBJECT> instead of <EMBED>

The OBJECT element has the advantage of offering a fallback for all the browsers that don't understand EMBED. The first version of Netscape that supports OBJECT is Netscape 4.0. So if you use OBJECT then earlier versions of Netscape won't recognize it. On the other hand you can include a fallback such as a gif image. An example of how to do this is given below.

Basically, OBJECT works in a similar way to EMBED. Some parameters are given as attributes of the OBJECT start tag, while others are given with PARAM elements. The earlier example can be rewritten as:

    <object type="text/ezmath"
        codebase="http://www.w3.org/People/Raggett/EzMath"
        align=absmiddle
        width= 181 height=106>
      <param name="fontsize" value="small">
      <param name="color" value="#FFFF00">
      <param name="bgcolor" value="#000080">
      <param name="alt" value="a^m over a^n = either
         a^{m-n} when m > n or 1 when m = n or
         1 over a^{n-m} when m < n">
      <img src=expr13.gif align=absmiddle
            width= 181 height=106
            alt="a^m over a^n = either a^{m-n} when m > n 
            or 1 when m = n or 1 over a^{n-m} when m < n">
      </object>

Known Problems

Printing doesn't work yet! I am having technical problems owing to the lack of source code for working example of a plugin that prints.

The following idioms are not (yet) recognized:

Similarly for other trignometric functions.

Future Work

I would like to extend EzMath to support additional areas of mathematics including vector calculus, and tensors. Your feedback on which areas you would like to see supported is welcomed! I also plan to extend the plugin to work with MathML as input.

Dave Raggett <dsr@w3.org> 25th January 1998