MathML

JMU

MathML
An Introduction

Prof. David Bernstein
James Madison University

Computer Science Department

bernstdh@jmu.edu

About MathML

Origins:
- Introduced in 1998
- One of the first applications of XML
Versions:
- MathML 2.0 - 2001 (revised 2003)
- XML Entity Definitions for Characters - 2010 (revised 2014)
- MathML 3.0 - 2010 (revised 2014)
Today:
- MathML is included in HTML5
- MathML is not included in all browsers
- Some browsers (and some dynamic uses) require the XML namespace (xmlns="http://www.w3.org/1998/Math/MathML ")

Some History

Purpose:
- Change the relative position of elements
Some Uses:
- Subscripts and superscripts
- Mathematical accents
- Stacking

The Top-Level math Element

Requirements:
- Contains one instance of MathML markup
- Must not contain another math element
Attributes:
- display can be "block" or "inline"
- overflow can be "linebreak", "scroll", "elide" (i.e., abbreviate), "truncate", or "scale"
- alttext provides a text alternative as a fall-back

Presentation Markup - Basics

Foundational Elements:
- mi - an identifier
- mo - an operator
- mn - a number

Click here for a demonstration.

htmlexamples/mathml/basics.html

<!DOCTYPE html>
<html>
  <body>
    <p>An Identifier: 
      <math>
        <mi>x</mi>
      </math>
    </p>

    <p>An Operator: 
      <math>
        <mo>+</mo>
      </math>
    </p>

    <p>Another Operator: 
      <math>
        <mo>&InvisibleTimes;</mo>
      </math>
    </p>

    <p>A Number: 
      <math>
        <mn>2</mn>
      </math>
    </p>


  </body>
</html>

Presentation Markup - Sub-Expressions

Motivation:
- Some MathML elements must contain a particular number of elements in a fixed order (e.g., a fraction contains a numerator and a denominator)
- Hence, one must be able to create sub-expressions (i.e., "horizontal" groupings)
Grouping Elements:
- mrow
- mfenced

Presentation Markup - Sub-Expressions (cont.)

Preferred Groupings:
- Sub-expressions should be grouped in the same way they are grouped in the mathematical interpretation (e.g., the expression \(ax + b\) should be in an <mrow> that contains an <mrow> for the sub-expression \(ax\))

Click here for a demonstration.

htmlexamples/mathml/rows.html

<!DOCTYPE html>
<html>
  <body>
    <p>A Row: 
      <math>
        <mrow>
          <mi>x</mi> <mo>+</mo> <mn>2</mn>
        </mrow>
      </math>
    </p>

    <p>A Fenced Row: 
      <math>
        <mfenced open="(" close=")" separators="">
          <mi>x</mi> <mo>+</mo> <mn>2</mn>
        </mfenced>
      </math>
    </p>


    <p>Nesting: 
      <math>
        <mrow>
          <mrow>
            <mi>a</mi> <mo>&InvisibleTimes;</mo> <mn>x</mn>
          </mrow>
          <mo>+</mo>
          <mi>b</mi>
        </mrow>
      </math>
    </p>

  </body>
</html>

Presentation Markup - Positioning

Purpose:
- Change the relative position of elements
Some Uses:
- Subscripts and superscripts
- Mathematical accents
- Stacking

Presentation Markup - Positioning (cont.)

Elements:
- msup or msub - superscript or subscript
- msubsup - subscript and superscript
- mover or munder - above or below
- munderover - below and above

Click here for a demonstration.

htmlexamples/mathml/positioning.html

<!DOCTYPE html>
<html>
  <body>
    <p>A Simple Superscript: 
      <math>
        <msup>
          <mi>x</mi> <mn>2</mn>
        </msup>
      </math>
    </p>

    <p>A Complicated Subscript: 
      <math>
        <msub>
          <mi>a</mi> <mrow> <mi>i</mi> <mo>+</mo> <mn>1</mn></mrow>
        </msub>
      </math>
    </p>

    <p>A Complicated Subscript and Superscript: 
      <math>
        <msubsup>
          <mo>&Sum;</mo> 
          <mrow><mi>i</mi> <mo>=</mo> <mn>1</mn></mrow>
          <mi>n</mi>
        </msubsup>
      </math>
    </p>

    <p>A Simple Above: 
      <math>
        <mover>
          <mi>x</mi> <mo>&Hat;</mo>
        </mover>
      </math>
    </p>

    <p>A Complicated Below: 
      <math>
        <munder>
          <mrow><mi>x</mi> <mo>+</mo> <mi>y</mi></mrow>
          <mo>&UnderBrace;</mo>
        </munder>
      </math>
    </p>


  </body>
</html>

Presentation Markup - Fractions

The mfrac Element:
- First child is the numerator
- Second child is the denominator

Click here for a demonstration.

htmlexamples/mathml/fraction.html

<!DOCTYPE html>
<html>
  <body>
    <p>
    A Simple Fraction:
      <math>
        <mfrac>
          <!-- Numerator -->
          <mrow>
            <mi>x</mi>
          </mrow>
          <!-- Denominator -->
          <mrow>
            <mn>2</mn>
          </mrow>
        </mfrac>
      </math>
    </p>

    <p>
    A More Complicated Fraction:
      <math>
        <mfrac>
          <!-- Numerator -->
          <mrow>
            <mn>2</mn> <mo>&InvisibleTimes;</mo> <mi>x</mi>
          </mrow>
          <!-- Denominator -->
          <mfenced>
            <mfrac>
              <!-- Numerator -->
              <mrow> 
                <mi>a</mi> <mo>+</mo> <mi>b</mi>
              </mrow>
              <!-- Denominator -->
              <mrow> 
                <mi>c</mi> <mo>&InvisibleTimes;</mo> <mi>d</mi>
              </mrow>
            </mfrac>
          </mfenced>
        </mfrac>
      </math>
    </p>
  </body>
</html>

Presentation Markup - Other Things

msqrt and mroot for radicals
mtable (containing mtr and mtd) for matrices and vectors
mlongdiv for long division (e.g., to explain division)
mscarries for carries, borrows, and crossouts (e.g., to explain elementary arithmetic)

Content Markup

Motivation:
- It is difficult to infer semantics from presentation
Approach:
- Use expression trees