Adding math to Web pages with EzMath

Abstract

Keywords

Mathematics; Expressions; Formulae; Markup; Education; Training

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 (e.g. x^y denotes x raised to the power y).

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 makes it very easy to create the markup for pasting into your Web pages, either in the EzMath notation or as MathML.

The full length paper on EzMath [1] compares it with previous approaches and gives a definitive list of EzMath features. EzMath was developed by Dave Raggett and Davy Batsalle with the generous support of Hewlett Packard Laboratories. Suggestions for further work, and offers of help for porting to other platforms including ActiveX, and ideas for extensions to other areas of mathematics are welcomed.

A freeware implementation of EzMath is available now for Windows 95/NT, and support for other platforms is underway. You can download the editor, plugin and documentation as a zip file (137 k) from:

http://www.w3.org/People/Raggett/EzMath.zip

The Ezmath for the expression in the figure above 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

Some other examples:

        ax^2+bx+c=0
        integral from 0 to pi of sin ax wrt x
        limit as x tends to infinity of function f(x)
        matrix M = matrix (1,2;2,1)

The EzMath editor does all the work needed to markup this up in a form that will be recognized by your browser, you can then simply paste the markup into your HTML:

        <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">

You can use the OBJECT element instead of EMBED, but this won't work with Netscape 3.0. The OBJECT element does, however, allow you to provide a fallback, e.g.

          <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>

Work underway at Hewlett Packard on next generation style sheets [2] will simplify this to just:

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

W3C's MathML [3] provides two sets of tags, one concerned primarily with presentation, and the other with the meaning of mathematical expressions. MathML aims to provide a low level format for machine to machine communication. It is much more verbose than EzMath, and is not intended for direct editing.

The EzMath editor also provides support for marking up expressions in MathML's content tags. To do this, you simply change the clipboard format to MathML. For the above expression you now 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>

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> February 1998

References

[1] EzMath is fully described at http://www.w3.org/People/Raggett/EzMath/.

[2] HP is developing a free browser supporting extensions to HTML via style sheets written in blend of CSS and JavaScript; for further details see the HP Spice submission to W3C at http://www.w3.org/TR/1998/NOTE-spice-19980123.html and attend the presentation on Developers' Day.

[3] More information about MathML can be found at http://www.w3.org/Math/.