Math

Temml を使って HTML ページ上に高品質な LaTeX 数式を描画します。ネイティブの MathML へ直接コンパイルします。

使いどころ：HTML ページの中で LaTeX の数式をディスプレイ数式として描画したいとき。<r-math> は latex 属性の式を Temml で組版します。Temml は LaTeX を MathML にコンパイルし、レイアウトはブラウザ自身が行います（canvas も SVG も KaTeX ランタイムもありません）。

クイックスタート

基本的な使い方

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

API リファレンス

プロパティ

プロパティ	型	既定値	説明
`latex`	`string`	`''`	描画する LaTeX の式。式はこの属性で与えます。スロットのテキストではありません。
`display`	`string`	`'block'`	`block`（ディスプレイ数式）または `inline`（インライン数式）。
`font`	`string`	`''`	`system` にすると同梱の Latin Modern Math を使わず、読み手のシステム数式フォントを使います。
`macros`	`string`	`''`	Temml のマクロを表す JSON オブジェクト。不正な JSON は黙って無視されます。
`wrap`	`string`	`''`	Temml のソフト改行：`none`、`tex`、`=`。
`copy`	`boolean`	`false`	コピーボタンを表示します。`copy` 単体は LaTeX ソースを、`copy="mathml"` は MathML をコピーします。
`download`	`boolean`	`false`	ソース（`.tex`）や MathML（`.mml`）のダウンロードボタン／メニューを表示します。
`sheet`	`string`	`''`	コンポーネントの shadow DOM に注入する CSS。

💡 メモ：latex プロパティのゲッターは値を decodeURIComponent で復号するので、URI エンコードされた式は描画前に復号されます。スロットのテキストとして式を渡しても効果はありません。描画されるのは latex 属性だけです。

式 `latex`

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

外部スタイル `sheet`

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

イベント

イベント	detail	発生するとき
`render`	`{ ok: true }`	式の描画に成功した。
`error`	`{ message: string }`	Temml が式を解析できなかった（不正な LaTeX など）。
`copied`	`{ kind: 'source' \| 'mathml' }`	コピーボタンがソースまたは MathML をクリップボードへ写した。
`download`	`{ format: 'source' \| 'mathml' }`	ダウンロードボタンが `.tex` か `.mml` を保存した。

スタイリング

<r-math> は自前の CSS カスタムプロパティを 16 個、そしてテーマから読むセマンティックトークンを公開しています。継承が届く場所ならどこにでも設定できます（:root、外側のコンテナ、要素そのもの）。

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

Part：button · error · math · menu · render · toolbar

一覧はスタイルトークンに、どのトークンを使うかはデザインシステムにあります。

ベストプラクティス

式は latex で渡す：式は latex 属性に設定します。スロットのテキストは描画されません。
JavaScript ではバックスラッシュをエスケープする：JS の文字列リテラルから latex に代入するときは \ のエスケープを忘れずに（例：'\\frac{1}{2}'）。
解析失敗に備える：すべての式が正しい LaTeX だと決めてかからず、error を購読する（あるいは描画された ::part(error) の箱を見る）ようにします。
sheet で独自のレイアウトに：内部の .ran-math のレイアウトを上書きしたいときは sheet 属性を使います。