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.

The area of a circle is $A = π r^{2}$ .

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

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

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.

E = m c^{2}

F = m a

Common Patterns

Fractions

\frac{d y}{d x} = \frac{1}{x^{2}}

Radicals

\sqrt{a^{2} + b^{2}} = c

Summation

\sum_{i = 1}^{n} a_{i}

Matrices

A = [\begin{matrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{matrix}]

Captioned Equations

Use figure.math to wrap an equation with a <figcaption>.

\int_{0}^{\infty} e^{- x^{2}} d x = \frac{\sqrt{π}}{2}

The Gaussian integral

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

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

data-math — enhance <code> elements with precompiled MathML
<svg> — scalable vector graphics
<code> — inline code
<var> — variable name