数式ブロック

数学・科学表記 — 分数、指数、下付き文字、ギリシャ文字、そして\ce{...}による化学式 — をサーバー側で、実際のalt属性付きの画像としてレンダリングします。メールクライアントは実際の数式組版を行えないためです。

仕組み

このブロックは、小さなLaTeX風の記法文字列(例: \frac{-b \pm \sqrt{b^2-4ac}}{2a})を受け取り、GET /api/formulaを通じてサーバー側でPNGにレンダリングします。これは、分析用チャートブロックが既に使っているのと同じ、一から作られたラスター/PNGエンコーディングの基盤の上に構築された署名付きエンドポイントです: クライアント側の数式ライブラリは一切関与せず、レンダラーの背後にnpm依存もありません。

数式の内容は、ライブであり続けるために表示ごとに再生成する必要があるカウントダウンGIFとは異なり、一度作成すれば固定されます。そのため、レンダリング要求全体(記法、表示モード、色)がURL自体に署名として組み込まれ、エンドポイントはFirestoreの読み取りを一切必要としません — レスポンスには長期間有効な不変のキャッシュヘッダーが付きます。

記法の構文は、分数、指数(^)、下付き文字(_)、平方根、ギリシャ文字、名前付き関数(\sin、\lim、\logなど)、集合・論理記号(\forall、\in、\cup、\negなど)、一般的な演算子をカバーしています。\left(/\right(は認識されますが、内容に合わせて自動的に拡大縮小されるのではなく通常サイズでレンダリングされます。これは本物のTeXエンジンではなく、小さなビットマップレンダラーであるためです。\text{...}は、数式の途中で項にラベルを付けるために、通常の単語表示に戻ります。

化学式には専用の\ce{...}マクロがあります: mhchemに似た小さなサブセットです。元素数は自動的に下付き文字になり(H2Oは下付きの2としてレンダリングされます)、末尾のイオン電荷は自動的に上付き文字になり(H3O+、SO4^2-)、->は反応式の矢印としてレンダリングされます。つまり\ce{2H2 + O2 -> 2H2O}では、原子数や電荷のたびに^/_を手で書く必要がありません。

パーサーが認識しない記法 — 完全なLaTeXドキュメント、パッケージ、行列、表など — は、送信を壊すことは一切ありません。代わりに、元の記法文字列をそのままプレーンなリテラルテキストとしてレンダリングする形に縮退します。この保証は2つの層で強制されています: パーサー自体が未知のマクロをリテラルテキストに縮退させ、レンダラーの最も外側の呼び出しはレイアウトの境界条件においても例外を投げません。

画像は表示モードに適したスケールでレイアウトされます: ブロックでは大きく、インラインでは小さくなります。メールで安全なサイズの予算を超える場合は、自動的にスケールを下げます。ほとんどの数式は最初の試行で収まります。異常に長い式だけがより小さなスケールを必要とし、病理的な式は無限にループするのではなく最小スケールに固定されます。

レンダリングされる<img>には、そのレイアウト処理から算出された明示的なwidth/height属性が付くため、Outlookなどのクライアントで画像の読み込み中にレイアウトが飛ぶように再配置されることはありません。重要な点として、alt属性には元の記法文字列そのものが設定されます。画像をブロックするクライアントやビットマップを解析できないスクリーンリーダーに対して、数式がテキストの代替を持たないまま画像の中に閉じ込められることは決してありません。

設定可能なフィールド:

記法(LaTeX風) — 数式のテキストで、300文字までに制限されます(文字数超過の値はレンダリング前に黙って切り詰められ、送信が壊れることはありません)。
表示モード — インライン(小さく、テキストの行内に収まる)またはブロック(大きく、独立した行になる)。
配置 — 左、中央、右(実質的にブロックモードのみで有効)。
色 — 記法のストロークの色です。無効または空の値は、拒否されるような値のまま署名付きエンドポイントに到達するのではなく、レンダラー自身のほぼ黒に近い既定値にフォールバックします。
カード全体の背景色、パディング、枠線、角丸。

記法が空の場合、空の画像ではなく何もレンダリングされません — 組版すべきテキストがない場合、ブロックは単純に出力しません。

サポートされる記法

以下の各例はすべて、モックアップではなく実際の/api/formulaエンドポイントから取得した本物のライブ署名付き画像です。そのため、ここで見えているものは受信者の受信トレイでレンダリングされる内容と完全に同じです。このリストにないもの(完全なLaTeXドキュメント、パッケージ、行列、表、\bar/\hatのようなアクセント記号、\dotsのような省略記号)は認識されません。送信を壊す代わりに、入力されたテキストそのものがそのまま文字通りレンダリングされるため、あるマクロが未対応であることは通常プレビューで一目瞭然です。

分数

\frac{a+b}{c-d}

$\frac{a+b}{c-d}$

指数と下付き文字

a_n = a_1 + (n-1)d

平方根と分数の入れ子

\sigma = \sqrt{\frac{1}{n}\sum (x_i - \mu)^2}

$\sigma = \sqrt{\frac{1}{n}\sum (x_i - \mu)^2}$

二次方程式の解の公式 — 分数、±、平方根を組み合わせたもの

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

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

ギリシャ文字

\Delta = b^2 - 4ac

$\Delta = b^2 - 4ac$

名前付き関数と極限(斜体ではなく立体で表示)

\lim_{x \to 0} \frac{\sin x}{x} = 1

$\lim_{x \to 0} \frac{\sin x}{x} = 1$

集合・論理記号

\forall x \in S,\ x^2 \geq 0

$\forall x \in S,\ x^2 \geq 0$

\left(/\right)の区切り記号 — 認識されるが、内容に合わせた自動拡大縮小はされない

y = \left(x+1\right)^2

$y = \left(x+1\right)^2$

数式中のラベル用の\text{...}

d = 5\text{ mi}

$d = 5\text{ mi}$

\ce{...}による化学式 — 原子数の自動下付き化、反応式の矢印

\ce{2H2 + O2 -> 2H2O}

$\ce{2H2 + O2 -> 2H2O}$

\ce{...} — イオン電荷の自動上付き化

\ce{SO4^2-}

$\ce{SO4^2-}$

例

Subject

This week in study group: the quadratic formula

化学の授業の復習メールでは、説明文のすぐ隣に、バランスの取れた反応式を文中にインラインで組版します: 「光合成: \ce{6CO2 + 6H2O -> C6H12O6 + 6O2}」。数式ブロックが教室向けダイジェストの中で課題、クイズ、フラッシュカードデッキと並んでどのように収まるかについては、教育を参照してください。物理の問題集では、解答例の前に、二次方程式の解の公式をブロックモードで独立した行として、より大きく中央揃えで配置します。統計のニュースレターでは、周囲の段落の流れを崩さずに、\mu = \frac{\sum x_i}{n}のような短いインライン数式を文中で使います。これは\bar{x}ではなく\muであることに注意してください: \bar/\hatのようなアクセントマクロは上記のサポートされる記法の一覧には含まれていないため、平均を表す必要がある場合の安全な代替として、プレーンなギリシャ文字が使われます。

静的フォールバックの見え方

<div style="margin:8px 0;text-align:left">
  <img src="https://mailinapp.com/api/formula?d=eyJub3RhdGlvbiI6...&s=abc123..."
       width="184" height="52" alt="E = mc^2"
       style="display:inline-block;max-width:100%;height:auto;vertical-align:middle" />
</div>

レンダリングのティアは1つだけです — 署名付きの<img>で、そのaltテキストには常に正確な記法文字列が含まれているため、画像自体が読み込まれない場合でも数式の内容は伝わります。

数式ブロック

仕組み

サポートされる記法

例

静的フォールバックの見え方

関連ページ