math
Native MathML rendering with consistent styling, display/inline modes, numbered equations, and dark mode support.
Overview
The <math> element renders MathML notation natively in the browser. MathML Core is supported in all major engines: Chrome 109+, Firefox, and Safari. No JavaScript or external libraries required.
Vanilla Breeze provides consistent styling across browsers: a math font stack, display and inline modes, numbered equations via CSS counters, and dark mode normalization.
Inline Math
Inline math flows naturally within paragraph text. The element aligns to the text baseline.
<p>The area of a circle is <math> <mi>A</mi><mo>=</mo><mi>π</mi><msup><mi>r</mi><mn>2</mn></msup> </math>.</p>Display Math
Use display="block" for centered, standalone equations with vertical margins.
<math display="block"> <mi>x</mi><mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>b</mi><mo>±</mo> <msqrt> <msup><mi>b</mi><mn>2</mn></msup> <mo>-</mo><mn>4</mn><mi>a</mi><mi>c</mi> </msqrt> </mrow> <mrow><mn>2</mn><mi>a</mi></mrow> </mfrac></math>Numbered Equations
Wrap math[display="block"] in a div.equation for auto-incrementing equation numbers. Numbering uses CSS counters, so it works without JavaScript and respects DOM order.
<div class="equation"> <math display="block"> <mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup> </math></div> <div class="equation"> <math display="block"> <mi>F</mi><mo>=</mo><mi>m</mi><mi>a</mi> </math></div>Common Patterns
Fractions
<math display="block"> <mfrac> <mrow><mi>d</mi><mi>y</mi></mrow> <mrow><mi>d</mi><mi>x</mi></mrow> </mfrac> <mo>=</mo> <mfrac><mn>1</mn><msup><mi>x</mi><mn>2</mn></msup></mfrac></math>Radicals
<math display="block"> <msqrt> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </msqrt> <mo>=</mo> <mi>c</mi></math>Summation
<math display="block"> <munderover> <mo>∑</mo> <mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow> <mi>n</mi> </munderover> <msub><mi>a</mi><mi>i</mi></msub></math>Matrices
<math display="block"> <mi>A</mi><mo>=</mo> <mrow> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd><mn>2</mn></mtd> <mtd><mn>3</mn></mtd> </mtr> <mtr> <mtd><mn>4</mn></mtd> <mtd><mn>5</mn></mtd> <mtd><mn>6</mn></mtd> </mtr> <mtr> <mtd><mn>7</mn></mtd> <mtd><mn>8</mn></mtd> <mtd><mn>9</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow></math>Captioned Equations
Use figure.math to wrap an equation with a <figcaption>.
<figure class="math"> <math display="block"> <msubsup> <mo>∫</mo> <mn>0</mn> <mo>∞</mo> </msubsup> <msup><mi>e</mi> <mrow><mo>-</mo><msup><mi>x</mi><mn>2</mn></msup></mrow> </msup> <mi>d</mi><mi>x</mi> <mo>=</mo> <mfrac> <msqrt><mi>π</mi></msqrt> <mn>2</mn> </mfrac> </math> <figcaption>The Gaussian integral</figcaption></figure>Attributes
| Attribute | Values | Description |
|---|---|---|
display |
"block" |
Renders as centered block equation. Without this attribute, math renders inline. |
This element also supports global attributes.
VB Classes
| Class | Description |
|---|---|
equation |
Wrapper div that adds auto-incrementing equation number via CSS counters. Contains a math[display="block"]. |
Font Loading
MathML rendering quality depends on a math-capable font. Vanilla Breeze defaults to Latin Modern Math, falling back to STIX Two Math and Cambria Math.
For best results, load the math font explicitly:
<link rel="stylesheet" href="/fonts/math-fonts.css">When using the data-math attribute, the font is loaded automatically when math elements are detected.
Accessibility
- Native MathML is natively understood by screen readers including VoiceOver (Safari) and NVDA with MathPlayer
- No ARIA hacks required — the browser exposes math semantics directly to the accessibility tree
- Use
<semantics>and<annotation>for additional accessible descriptions when needed - Equation numbers assist navigation for sighted and non-sighted users