Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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.
Inline math in a paragraph
<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.
Display math (quadratic formula)
<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.
Numbered equations
<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
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
Radicals (Pythagorean theorem)
<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
Summation notation
<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
Matrix
<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 with caption
<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:
Load math font
<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