Math

Render high-quality LaTeX math formulas in HTML pages using Temml, compiled straight to native MathML.

Use when you need to render a LaTeX math formula as display math in an HTML page. <r-math> typesets the expression from its latex attribute with Temml, which compiles LaTeX to MathML that the browser lays out itself (no canvas/SVG, no KaTeX runtime).

Quick Start

Basic Usage

<r-math latex="\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1 \quad (a > b > 0)"></r-math>

API Reference

Properties

Property	Type	Default	Description
`latex`	`string`	`''`	The LaTeX formula to render. The formula is provided via this attribute, not slot text.
`display`	`string`	`'block'`	`block` (display math) or `inline` (inline math).
`font`	`string`	`''`	Set to `system` to skip the bundled Latin Modern Math face and use the reader's system math font.
`macros`	`string`	`''`	A JSON object of Temml macros. Invalid JSON is silently ignored.
`wrap`	`string`	`''`	Temml soft line-breaking: `none`, `tex`, or `=`.
`copy`	`boolean`	`false`	Shows a copy button. Bare `copy` copies the LaTeX source; `copy="mathml"` copies the rendered MathML.
`download`	`boolean`	`false`	Shows a download button/menu for the source (`.tex`) and/or MathML (`.mml`).
`sheet`	`string`	`''`	CSS injected into the component's shadow DOM.

💡 Note: The latex property getter decodes its value with decodeURIComponent, so URI-encoded formulas are decoded before rendering. When the attribute is absent, the element’s text content supplies the formula.

Formula `latex`

<r-math latex="x = {-b \pm \sqrt{b^2-4ac} \over 2a}"></r-math>

External Styles `sheet`

<r-math latex="e^{i\pi} + 1 = 0" sheet=".ran-math { justify-content: flex-start; }"></r-math>

Events

Event	detail	Fired when
`render`	`{ ok: true }`	The formula rendered successfully.
`error`	`{ message: string }`	Temml failed to parse the formula (e.g. invalid LaTeX).
`copied`	`{ kind: 'source' \| 'mathml' }`	The copy button copied the source or MathML to the clipboard.
`download`	`{ format: 'source' \| 'mathml' }`	The download button saved a `.tex` or `.mml` file.

Styling

<r-math> exposes 16 CSS custom properties of its own, plus the semantic tokens it reads from the theme. Set one anywhere it inherits from, such as :root, a wrapper, or the element:

r-math {
  --ran-math-error-background: var(--ran-color-bg-subtle);
}

Parts: button · error · math · menu · render · toolbar

The full list is in style tokens; which token to use is in the design system.

Best Practices

Provide formulas via latex: Set the formula on the latex attribute; slotted text content is not rendered.
Escape backslashes in JavaScript: When assigning latex from a JS string literal, remember that \ must be escaped (e.g. '\\frac{1}{2}').
Handle parse failures: Listen for error (or check the rendered ::part(error) box) rather than assuming every formula is valid LaTeX.
Custom layout via sheet: Use the sheet attribute to override the internal .ran-math layout when needed.

Enabled controls stay visible in a quiet row above the content: 32px targets for fine pointers, 44px for touch, with an 8px gap. Without controls, no row space is reserved. Copy keeps focus and prevents duplicate writes while pending. Clipboard rejection or unavailability appears locally in ::part(copy-status) (role="status"), localized with label-copy-error; retry uses the same button. copied fires only after the current content reaches the clipboard. A source or copy-target change invalidates feedback from older requests. A source-only update preserves the focused button and allows copying the new source immediately.

Wide equations scroll horizontally inside ::part(render) without widening the page or moving the toolbar.