MathML is an XML-based markup language designed to semantically describe mathematical expressions and render them in a scalable and accessible manner on web browsers.
MathML(Mathematical Markup Language)は、数式を構造的かつセマンティック(意味的)に記述できるXMLベースのマークアップ言語です。数式を画像として扱うのではなく、ブラウザが直接数式の構造を理解し、フォント調整や拡大縮小、アクセシビリティ支援などに優れた柔軟な表示が可能になるのが大きな特徴です。
MathMLは、Web標準の一部として策定されていますが、ブラウザごとに対応状況に違いがあります。主要ブラウザの多くが基本的なプレゼンテーションMathMLのレンダリングに対応しつつありますが、完全対応という段階ではないブラウザも存在します。
したがって、MathMLを直接利用するか、MathJaxなどのライブラリに依存するかは、プロジェクトの要件やターゲットとなるユーザーのブラウザ環境によって判断するとよいでしょう。
MathMLには大きく分けてプレゼンテーション(Presentation)MathMLとコンテント(Content)MathMLの2種類があります。
<mfrac>
(分数)、<msup>
(上付き)、<msub>
(下付き)など本記事では、主にプレゼンテーションMathMLを中心に解説します。
MathMLで数式を記述する際は、原則として<math>
要素がルート要素になります。その中に、数式の部品を意味するさまざまな要素を入れていくイメージです。
HTML
<!-- インライン表示: テキストの途中に数式を混ぜたい場合 -->
<p>これはインライン表示の例:<math>
<mi>x</mi><mo>+</mo><mi>y</mi><mo>=</mo><mn>10</mn>
</math>です。</p>
<!-- ブロック表示: 数式を大きく目立たせたい場合 -->
<math display="block">
<mi>F</mi><mo>=</mo><mi>m</mi><mo>×</mo><mi>a</mi>
</math>
これはインライン表示の例:です。
<mi>
(Math Identifier)<mo>
(Math Operator)+
, -
, =
, (
, )
など)。<mn>
(Math Number)<mfrac>
HTML
<math display="block">
<mfrac>
<mi>a</mi>
<mi>b</mi>
</mfrac>
</math>
分子と分母を縦に並べた形で表示されます。
<msup>
<msub>
<msubsup>
HTML
<!-- a^2 -->
<math display="block">
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
</math>
<!-- x の n+1 乗 -->
<math display="block">
<msup>
<mi>x</mi>
<mrow>
<mi>n</mi><mo>+</mo><mn>1</mn>
</mrow>
</msup>
</math>
<!-- a の添字 i と上付き j -->
<math display="block">
<msubsup>
<mi>a</mi>
<mi>i</mi>
<mi>j</mi>
</msubsup>
</math>
<msqrt>
および <mroot>
HTML
<!-- 平方根 -->
<math display="block">
<msqrt>
<mrow>
<mi>x</mi><mo>+</mo><mn>1</mn>
</mrow>
</msqrt>
</math>
<!-- n乗根 -->
<math display="block">
<mroot>
<mi>y</mi>
<mn>3</mn>
</mroot>
</math>
<mo stretchy="true">
括弧や積分記号などを自動的に大きくしたい場合、stretchy="true"
を利用すると便利です。
HTML
<math display="block">
<mo stretchy="true">(</mo>
<mfrac>
<mi>a</mi>
<mi>b</mi>
</mfrac>
<mo stretchy="true">)</mo>
</math>
MathMLの様々な要素を組み合わせると、複雑な数式表現も可能です。次の例では、<mo stretchy="true">
を使って連立方程式の中カッコを表現しています。
HTML
<math display="block">
<mo stretchy="true">{</mo>
<mtable>
<mtr>
<mtd>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
<mo>=</mo>
<mn>2</mn>
</mrow>
</mtd>
</mtr>
<mtr>
<mtd>
<mrow>
<mi>x</mi>
<mo>−</mo>
<mi>y</mi>
<mo>=</mo>
<mn>0</mn>
</mrow>
</mtd>
</mtr>
</mtable>
</math>
上記の例では、<mtable>
と<mtr>
、<mtd>
を用いて行列やシステム(式の集まり)を表現しています。
MathMLの要素には、通常のHTML要素と同様にCSSを適用できます。例えばフォントサイズや色の指定を行うには、mstyle
要素や外部CSSを利用する方法があります。
HTML
<!-- mstyle要素でまとめてスタイルを指定 -->
<math display="block">
<mstyle mathsize="1.2em" color="blue">
<mi>x</mi><mo>+</mo><mi>y</mi><mo>=</mo><mn>10</mn>
</mstyle>
</math>
mstyle
要素以外にも、通常のCSSセレクタを利用して、たとえば mi { color: red; }
のように記述することも可能です。
MathMLは、スクリーンリーダーによる数式の読み上げなどアクセシビリティ面で大きな利点があります。例えば、<semantics>
要素と<annotation>
要素を使うことで、テキスト版や別のフォーマットを併記できます。
HTML
<math>
<semantics>
<mrow>
<mi>x</mi><mo>+</mo><mi>y</mi>
</mrow>
<annotation encoding="application/x-tex">x + y</annotation>
</semantics>
</math>
これにより、支援技術が適切に数式を解釈できる可能性が高まります。
Content MathMLは、数学的な意味を厳密に表現できるため、コンピュータ代数システムや音声読み上げと組み合わせると威力を発揮します。以下は二変数の加算を表す簡単な例です。
HTML
<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply>
<plus/>
<ci>x</ci>
<ci>y</ci>
</apply>
</math>
しかし、現状のWebブラウザではContent MathMLを直接表示するケースは少ないため、純粋にレンダリングが目的の場合はプレゼンテーションMathMLを利用するのが一般的です。
すでにLaTeX記法で数式を大量に用意している場合は、変換ツール(たとえば pandoc や latexml、オンラインコンバータなど)を使うと、LaTeXからMathMLに変換できます。逆にMathMLをTeXに変換するツールも存在します。
MathMLを直接書く場合は、数式が複雑になるとXMLのネストが深くなるため、可読性が落ちることがあります。そのため、大規模なサイトや研究成果の公開では、TeX入力 + JavaScriptライブラリ(MathJax, KaTeX, etc.) を使って、ブラウザ上で動的にMathMLへ変換・レンダリングする方法がよく採用されます。
MathJaxやKaTeXは、MathMLだけでなくHTML/CSSによるレンダリングにも対応しており、ブラウザのネイティブサポートに依存しない というメリットがあります。
<semantics>
や <annotation>
要素を活用すると、スクリーンリーダーなどへの対応を強化できる。<mo>
、変数は <mi>
など)をしっかり行うことで、数式の意味を正しく伝えられる。MathMLは、数学的な表現を意味を失わずに記述でき、アクセシビリティや検索性、拡大縮小時の品質保持など多くの利点をもたらします。一方で、まだ完全ではないブラウザ対応や、XMLベースのため学習・記述コストが高いといった懸念点も存在します。
<mi>
, <mo>
, <mn>
, <mfrac>
, <msup>
など)を使って単純な数式を表示するところから始めましょう。MathMLは今後も標準化が進むと期待されている領域です。プロジェクトや研究内容に応じて、ネイティブMathMLの活用やMathJax等との併用を検討し、よりアクセシブルで豊かな数式表現をWeb上で実現していきましょう。