Math

Renderiza fórmulas matemáticas LaTeX de alta qualidade em páginas HTML com o Temml, compiladas direto para MathML nativo.

Use quando precisar renderizar uma fórmula LaTeX como matemática de bloco numa página HTML. O <r-math> compõe a expressão do atributo latex com o Temml, que compila LaTeX para MathML e deixa o próprio navegador diagramar (sem canvas nem SVG, sem runtime do KaTeX).

Início rápido

Uso básico

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

Referência da API

Propriedades

Propriedade	Tipo	Padrão	Descrição
latex	string	''	A fórmula LaTeX a renderizar. Vem por este atributo, não pelo texto do slot.
display	string	'block'	block (matemática de bloco) ou inline (matemática em linha).
font	string	''	Use system para dispensar a fonte Latin Modern Math embutida e usar a do sistema.
macros	string	''	Um objeto JSON com macros do Temml. JSON inválido é ignorado silenciosamente.
wrap	string	''	Quebra de linha flexível do Temml: none, tex ou =.
copy	boolean	false	Mostra um botão de copiar. copy sozinho copia o LaTeX; copy="mathml" copia o MathML.
download	boolean	false	Mostra um botão ou menu para baixar a fonte (.tex) e/ou o MathML (.mml).
sheet	string	''	CSS injetado no shadow DOM do componente.

💡 Nota: o getter da propriedade latex decodifica o valor com decodeURIComponent, então fórmulas codificadas em URI são decodificadas antes da renderização. Passar a fórmula como texto no slot não tem efeito; só o atributo latex é renderizado.

Fórmula latex

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

Estilos externos sheet

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

Eventos

Evento	detail	Disparado quando
render	{ ok: true }	A fórmula foi renderizada com sucesso.
error	{ message: string }	O Temml não conseguiu analisar a fórmula (LaTeX inválido).
copied	{ kind: 'source' | 'mathml' }	O botão copiou a fonte ou o MathML para a área de transferência.
download	{ format: 'source' | 'mathml' }	O botão de download salvou um arquivo .tex ou .mml.

Estilos

O <r-math> expõe 16 propriedades personalizadas de CSS próprias, além dos tokens semânticos que lê do tema. Defina uma em qualquer lugar de onde ela seja herdada: :root, um contêiner ou o próprio elemento:

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

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

A lista completa está em tokens de estilo; qual usar está no design system.

Boas práticas

• Passe a fórmula por latex: defina a fórmula no atributo latex; o texto do slot não é renderizado.
• Escape as barras invertidas em JavaScript: ao atribuir latex a partir de uma string JS, lembre que \ precisa ser escapada (por exemplo '\\frac{1}{2}').
• Trate falhas de análise: escute error (ou verifique a caixa ::part(error) renderizada) em vez de supor que toda fórmula é LaTeX válido.
• Layout próprio com sheet: use o atributo sheet para sobrescrever o layout interno de .ran-math quando precisar.