HTML5 - MathML

HTML5 - MathML

MathML (Mathematical Markup Language) is an XML-based language for describing mathematical notation and capturing both its structure and content. It aims to enable mathematics to be served, received, and processed on the World Wide Web, just as HTML has enabled this for text.

HTML5 allows MathML elements to be embedded directly within an HTML document using the <math> tag, similar to how SVG is embedded using the <svg> tag. This allows mathematical expressions to be treated as part of the web page content, rather than as static images.

Browser Support

Native browser support for MathML has improved significantly but can still vary. As of recent versions:

• Firefox and Safari: Generally have good, long-standing support for displaying MathML.
• Chromium-based browsers (Chrome, Edge): Support has been added and improved considerably (MathML Core implementation). Older versions might have limited or no support.
• Internet Explorer: Does not support MathML.

For browsers lacking native support or for ensuring consistent rendering, JavaScript libraries like MathJax (https://www.mathjax.org/) are commonly used. MathJax can parse MathML (and other formats like LaTeX) and render it using HTML/CSS or SVG, providing excellent cross-browser compatibility and high-quality typesetting.

Embedding MathML in HTML5

You embed MathML code within <math> tags. The xmlns attribute is technically not required in HTML5 but is often included for compatibility with XML tools.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MathML Example</title>
</head>
<body>

    <h1>Pythagorean Theorem in MathML</h1>

    <math xmlns="http://www.w3.org/1998/Math/MathML">
        <msup>
            <mi>a</mi>
            <mn>2</mn>
        </msup>
        <mo>+</mo>
        <msup>
            <mi>b</mi>
            <mn>2</mn>
        </msup>
        <mo>=</mo>
        <msup>
            <mi>c</mi>
            <mn>2</mn>
        </msup>
    </math>

    <h1>Quadratic Formula</h1>

    <math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
      <mrow>
        <mi>x</mi>
        <mo>=</mo>
        <mfrac>
          <mrow>
            <mo form="prefix">-</mo>
            <mi>b</mi>
            <mo>&PlusMinus;</mo>
            <msqrt>
              <mrow>
                <msup>
                  <mi>b</mi>
                  <mn>2</mn>
                </msup>
                <mo>-</mo>
                <mn>4</mn>
                <mo>&InvisibleTimes;</mo> <!-- or use <mi>a</mi><mi>c</mi> -->
                <mi>a</mi>
                <mo>&InvisibleTimes;</mo>
                <mi>c</mi>
              </mrow>
            </msqrt>
          </mrow>
          <mrow>
            <mn>2</mn>
            <mo>&InvisibleTimes;</mo>
            <mi>a</mi>
          </mrow>
        </mfrac>
      </mrow>
    </mathdisplay>

</body>
</html>

The display="block" attribute on the <math> tag suggests rendering the expression as a block element (like a paragraph) rather than inline.

Core MathML Elements (Presentation Markup)

MathML has two main flavors: Presentation MathML (focuses on how the math looks) and Content MathML (focuses on the mathematical meaning). Presentation MathML is more commonly used for direct display in browsers. Some core elements include:

• <math>: The root element.
• <mi>: Identifier (variables like ‘x’, function names like ‘sin’).
• <mn>: Number (numeric literals like ‘2’, ‘3.14’).
• <mo>: Operator, fence, separator (like ’+’, ’=’, ’(’, ’{’, ’,’).
• <mtext>: Text (for embedding descriptive text within math).
• <mspace>: Represents space.
• <msup>: Superscript (base followed by script).
• <msub>: Subscript (base followed by script).
• <msubsup>: Both subscript and superscript.
• <mfrac>: Fraction (numerator followed by denominator).
• <msqrt>: Square root.
• <mroot>: Root with an explicit index (radicand followed by index).
• <mfenced>: Surrounds content with fences (like parentheses or brackets), specified by open and close attributes.
• <mtable>: Creates tables or matrices (contains <mtr> rows and <mtd> cells).

Layout Schemata elements like <mrow> are used to group sub-expressions horizontally.

Mathematical Symbols (Entities)

MathML uses standard XML/HTML character entities for many mathematical symbols. Common examples include:

• ⁢ (or ⁢): For multiplication when the operator isn’t explicitly shown (like ‘2x’).
• ⁡ (or ⁡): Function application (like ‘f(x)’).
• ± (±): ± symbol.
• ∑, ∫: Summation (∑) and integral (∫) symbols.
• ∀, ∃: Universal (∀) and existential (∃) quantifiers.
• α, β, π: Greek letters (α, β, π).

Alternatively, you can often use Unicode characters directly if your document encoding is UTF-8.

Example: Matrix

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>A</mi>
  <mo>=</mo>
  <mfenced open="[" close="]">
    <mtable>
      <mtr>
        <mtd><mi>x</mi></mtd>
        <mtd><mi>y</mi></mtd>
      </mtr>
      <mtr>
        <mtd><mi>z</mi></mtd>
        <mtd><mi>w</mi></mtd>
      </mtr>
    </mtable>
  </mfenced>
</math>

This code represents the matrix A = [ [x, y], [z, w] ].

Accessibility

One of the key benefits of MathML is accessibility. Screen readers and other assistive technologies can interpret the MathML structure to read equations aloud correctly, which is impossible with static images of equations.

When to Use MathML

Use MathML when you need to display mathematical notation semantically and accessibly on the web. For complex or highly interactive mathematical content, or to ensure cross-browser consistency, consider using libraries like MathJax.

For detailed information, refer to the W3C MathML Specification (https://www.w3.org/TR/MathML4/) and the MDN Web Docs for MathML (https://developer.mozilla.org/en-US/docs/Web/MathML).