とほほのMathML入門

MathMLとは

Mathematical Markup Language の略で、数式を記述するための XML ベースのマークアップ言語です。
2010年に MathML 3.0、2014年に MathML 3.0 2nd が勧告されました。MathML 4.0 のドラフト版も進んでいます。
まだまだ仕様変更も激しく、安定して利用できるとは言い難い状態です。
特に括弧を示す <mfenced> 要素が廃止されたことにより、古い MathML で記述された式は括弧が表示されないなどの混乱があります。
表示を重視するプレゼンテーションマークアップと、意味を重視するコンテントマークアップの2種類の記法があります。
数式を表示するには他にも MathJax を用いる方法もあります。

プレゼンテーションマークアップ

プレゼンテーションマークアップでは見栄えにより数式を表現します。例えば x² は下記の様に表します。「二乗」という意味はなく、<msup> を用いて 2 という数字を x の右上に表示することを指示しています。

<math>
 <msup>
  <mi>x</mi>
  <mn>2</mn>
 </msup>
</math>

コンテントマークアップ

コンテントマークアップでは数式を意味で表現します。例えば x² は下記の様に表します。<power> を用いて x を 2乗することを示しています。コンテントマークアップを表示できるブラウザはまだあまりありません。

<math>
 <apply>
  <power />
  <ci>x</ci>
  <cn>2</cn>
 </apply>
</math>

記法

数式(math)

数式は <math>～</math> の間に記述します。

x + y

<math>
 <mi>x</mi><mo>+</mo><mi>y</mi>
</math>

デフォルトではインライン要素として表示されますが display="block" を指定するとブロック要素として表示します。

<math display="block">
 <mi>x</mi><mo>+</mo><mi>y</mi>
</math>

数値(mn)

<mn> (math number) は数字を示します。

123

<math>
 <mn>123</mn>
</math>

演算子(mo)

<mo> (math operator) は演算子を示します。

5 + 3 = 8

<math>
 <mn>5</mn>
 <mo>+</mo>
 <mn>3</mn>
 <mo>=</mo>
 <mn>8</mn>
</math>

識別子(mi)

<mi> (math identifier) は変数などの識別子を示します。

a + b = c

<math>
 <mi>a</mi>
 <mo>+</mo>
 <mi>b</mi>
 <mo>=</mo>
 <mi>c</mi>
</math>

加減乗除(＋ー×÷)

加減乗除(＋ー×÷)は下記の様に表します。

a + b - c \times d \div e

<math>
 <mi>a</mi>
 <mo>+</mo>
 <mi>b</mi>
 <mo>&minus;</mo>
 <mi>c</mi>
 <mo>&times;</mo>
 <mi>d</mi>
 <mo>&divide;</mo>
 <mi>e</mi>
</math>

見えない掛け算(⁢)

⁢ は下記のように見えない掛け算がある場所に記述します。

a x = c

<math>
 <mi>a</mi>
 <mo>&InvisibleTimes;</mo>
 <mi>x</mi>
 <mo>=</mo>
 <mi>c</mi>
</math>

括弧((,))

括弧は以前は <mfenced> を使用していましたが、現在では <mo>(</mo>～<mo>)</mo> で表します。

a \times (b + c)

<math>
 <mi>a</mi>
 <mo>&times;</mo>
 <mo>(</mo>
 <mi>b</mi>
 <mo>+</mo>
 <mi>c</mi>
 <mo>)</mo>
</math>

# 古い書き方
<math>
 <mi>a</mi>
 <mo>&times;</mo>
 <mfenced>   # 非推奨
  <mrow>
   <mi>b</mi>
   <mo>+</mo>
   <mi>c</mi>
  </mrow>
 </mfenced>
</math>

分数(mfrac)

<mfrac> は分数を表します。2個の子要素を持ち、一つ目が分母、二つ目が分子となります。

\frac{5}{123}

<math>
 <mfrac>
  <mn>5</mn>
  <mn>123</mn>
 </mfrac>
</math>

分数は小さめに表示されるので CSS で mfrac のフォントサイズを 120% の大きさにしています。

mfrac { font-size: 120%; }

グルーピング(mrow)

<mrow> は式をグルーピングします。

\frac{a}{b + c}

<math>
 <mfrac>
  <mi>a</mi>
  <mrow>
   <mi>b</mi>
   <mo>+</mo>
   <mi>c</mi>
  </mrow>
 </mfrac>
</math>

累乗(msup)

<msup> は式を右上に表示します。累乗などを表現する際に用いられます。

x^{2}

<math>
 <msup>
  <mi>x</mi>
  <mn>2</mn>
 </msup>
</math>

添字(msub)

<msub> は式を右下に表示します。

x_{2}

<math>
 <msub>
  <mi>x</mi>
  <mn>2</mn>
 </msub>
</math>

上付文字(mover)

<mover> は式を上部に表示します。ベクトルなどに使用されます。

\vec{v}

<math>
 <mover>
  <mi>v</mi>
  <mo>→</mo>
 </mover>
</math>

下付文字(munder)

<munder> は式を下部に表示します。

\lim_{x \to \infty} x

<math>
 <munder>
  <mi>lim</mi>
  <mrow>
   <mi>x</mi><mo>→</mo><mi>∞</mi>
  </mrow>
 </munder>
 <mi>x</mi>
</math>

右上・右下文字(msubsup)

<msubsup> は式を右上と右下に表示します。

x_{a}^{b}

<math>
 <msubsup>
  <mi>x</mi>
  <mi>a</mi>
  <mi>b</mi>
 </msubsup>
</math>

上下付文字(munderover)

<munderover> は式を上部と下部に表示します。

x_{a}^{b}

<math>
 <munderover>
  <mi>x</mi>
  <mi>a</mi>
  <mi>b</mi>
 </munderover>
</math>

四隅(mmultiscripts)

<mmultiscripts> は式を右下・右上・左下・左上に表示します。右側と左側の境界には <mprescripts /> を挿入します。

{}_{c}^{d}x_{a}^{b}

<math>
 <mmultiscripts>
  <mi>x</mi>
  <mo>a</mo>
  <mo>b</mo>
  <mprescripts />
  <mo>c</mo>
  <mo>d</mo>
 </mmultiscripts>
</math>

順列(_nP_r)

順列を表現するには mmultiscripts を使用します。右上と左上には <none /> を指定します。

{}_{n}P_{r}

<math>
 <mmultiscripts>
  <mi>X</mi>
  <none />
  <mi>c</mi>
  <mprescripts />
  <mi>b</mi>
  <none />
 </mmultiscripts>
</math>

総和(Σ)

総和(Σ)は <munderover> を用いて表現します。

\sum_{i = 1}^{n} k_{i}

<math>
 <munderover>
  <mi>&sum;</mi>
  <mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
  <mi>n</mi>
 </munderover>
 <msub><mi>k</mi><mi>i</mi></msub>
</math>

平方根(msqrt)

<msqrt> は平方根を表示します。

\sqrt{2}

<math>
 <msqrt>
  <mi>2</mi>
 </msqrt>
</math>

累乗根(mroot)

<mroot> は累乗根を表示します。

\sqrt[3]{x}

<math>
 <mroot>
  <mi>x</mi>
  <mn>3</mn>
 </mroot>
</math>

行列((...))

行列を表すには <mtable>, <mtr>, <mtd> によるテーブルを用います。

(\begin{matrix} 1 & 2 \\ 3 & 4 \end{matrix})

<math>
  <mo>(</mo>
  <mtable>
    <mtr>
     <mtd><mn>1</mn></mtd><mtd><mn>2</mn></mtd>
    </mtr>
    <mtr>
     <mtd><mn>3</mn></mtd><mtd><mn>4</mn></mtd>
    </mtr>
  </mtable>
  <mo>)</mo>
</math>

関数(f(x))

関数は下記の様に表します。(x) が f の引数であることを示すために ⁡ を記述します。

f (x)

<math>
 <mi>f</mi>
 <mo>&ApplyFunction;</mo>
 <mo>(</mo>
 <mi>x</mi>
 <mo>)</mo>
</math>

三角関数(sin,cos,tan)

三角関数の場合にも ⁡ を指定します。

\sin θ

<math>
 <mi>sin</mi>
 <mo>&ApplyFunction;</mo>
 <mi>θ</mi>
</math>

積分(∫)

積分には <msubsup> を使用します。

\int_{a}^{b} f (x) d x

<math>
 <msubsup>
  <mo>∫</mo>
  <mi>a</mi>
  <mi>b</mi>
 </msubsup>
 <mrow>
  <mi>f</mi>
  <mo>&ApplyFunction;</mo>
  <mo>(</mo>
  <mi>x</mi>
  <mo>)</mo>
  <mi>d</mi>
  <mi>x</mi>
 </mrow>
</math>

対数(log)

対数には <msub> を使用します。

\log_{a} x

<math>
 <msub>
  <mi>log</mi>
  <mi>a</mi>
 </msub>
 <mi>x</mi>
</math>

スタイル(mstyle)

<mstyle> を用いて色、フォントサイズなどのスタイルを指定することができます。

3 + 2 = 5

<math>
 <mstyle mathcolor="red" mathbackground="#fcc" mathsize="24pt">
  <mn>3</mn><mo>+</mo><mn>2</mn><mo>=</mo><mn>5</mn>
 </mstyle>
</math>

テキスト(mtext)

<mtext> はテキストを記述します。

Text...

<math>
 <mtext>Text...</mtext>
</math>

文字列(ms)

<ms> は数式処理システムやプログラムなど他のシステムで解釈される文字列を記述します。

String

<math>
 <ms>String</ms>
</math>

エラー(merror)

<merror> はエラーを示します。

Division by zero: \frac{1}{0}

<math>
 <merror>
  <mrow>
   <mtext>Division by zero:</mtext>
   <mfrac>
    <mn> 1 </mn>
    <mn> 0 </mn>
   </mfrac>
  </mrow>
 </merror>
</math>

スペース(mspace)

<mspace> は何らかの理由でスペースを開けたい場合に使用します。

a b

<math>
 <mi>a</mi>
 <mspace width="2em" />
 <mi>b</mi>
</math>

パディング(mpadded)

<mpadded> を用いて数式をパディングすることができます。

x + y

<math display="block">
 <mpadded width="20em" height="1em" depth="5em"
          lspace="2em" voffset="-3em"
          style="background: lightblue">
  <mi>x</mi>
  <mo>+</mo>
  <mi>y</mi>
 </mpadded>
</math>

ファントム(mphantom)

<mphantom> は幻影の意味を持ち、見えない式を記述します。式の位置を揃えたい場合に使用します。

2 x = 6

x = 3

<math>
 <mi>2</mi><mo>&InvisibleTimes;</mo><mi>x</mi><mo>=</mo><mn>6</mn>
</math>
<br>
<math>
 <mphantom><mi>1</mi><mo>&InvisibleTimes;</mo></mphantom><mi>x</mi><mo>=</mo><mn>3</mn>
</math>

改行

linebreak や linebreakstyle などの属性が定義されていますが、大半のブラウザではサポートされていません。

<math>
 <mn>2</mn><mo>+</mo><mn>3</mn>
 <mo linebreak="newline" linebreakstyle="after">=</mo>
 <mi>5</mi>
</math>

display="block" を指定することによりブロック要素として表示することができますがセンタリングされてしまいます。行間も狭いです。行間は margin-bottom で制御できますが、センタリングは text-align も効かないようです。

2 x + 3 x =10

x = 2

<math display="block">
 <mn>2</mn><mi>x</mi><mo>+</mo><mn>3</mn><mi>x</mi><mo>=10</mo>
</math>
<math display="block">
 <mi>x</mi><mo>=</mo><mn>2</mn>
</math>

<div> で囲むのが手っ取り早いかもしれません。

2 x + 3 x =10

x = 2

<div>
 <math><mn>2</mn><mi>x</mi><mo>+</mo><mn>3</mn><mi>x</mi><mo>=10</mo></math>
</div>
<div>
 <math><mi>x</mi><mo>=</mo><mn>2</mn></math>
</div>

MDN では <mtable> を使用していました。

\begin{matrix} 2 x + 3 x =10 \\ x = 2 \end{matrix}

<math>
 <mtable>
  <mtr><mtd><mn>2</mn><mi>x</mi><mo>+</mo><mn>3</mn><mi>x</mi><mo>=10</mo></mtd></mtr>
  <mtr><mtd><mi>x</mi><mo>=</mo><mn>2</mn></mtd></mtr>
 </mtable>
</math>

セマンティクス(semantics)

<semantics> を用いて数式に対して注釈をつけることができます。

x^{2}

<math>
 <semantics>
  <mrow>
   <msup>
    <mi>x</mi>
    <mn>2</mn>
   </msup>
  </mrow>
  <annotation-xml encoding="MathML-Content">
   <apply>
    <power />
    <ci>x</ci>
    <cn>2</cn>
   </apply>
  </annotation-xml>
 </semantics>
</math>

MathMLの使用例

二次方程式

a x^{2} + b x + c = 0

<math>
 <mi>a</mi><mo>&InvisibleTimes;</mo><msup><mo>x</mo><mn>2</mn></msup>
 <mo>+</mo>
 <mi>b</mi><mo>&InvisibleTimes;</mo><mo>x</mo>
 <mo>+</mo>
 <mi>c</mi>
 <mo>=</mo>
 <mn>0</mn>
</math>

二次方程式の解

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

<math>
 <mrow>
  <mi>x</mi>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mrow><mo>-</mo><mi>b</mi></mrow>
      <mo>&#xB1;</mo>
      <msqrt>
        <mrow>
          <msup><mi>b</mi><mn>2</mn></msup>
          <mo>-</mo>
          <mrow><mn>4</mn><mo>&#x2062;</mo><mi>a</mi><mo>&#x2062;</mo><mi>c</mi></mrow>
        </mrow>
      </msqrt>
    </mrow>
    <mrow><mn>2</mn><mo>&#x2062;</mo><mi>a</mi></mrow>
  </mfrac>
 </mrow>
</math>

アインシュタインの公式

E = m c^{2}

<math>
 <mi>E</mi>
 <mo>=</mo>
 <mi>m</mi>
 <mo>&InvisibleTimes;</mo>
 <msup><mi>c</mi><mn>2</mn></msup>
</math>

シュレディンガー方程式

i ℏ \frac{\partial ψ}{\partial t} = - \frac{ℏ^{2}}{2 m} \frac{\partial^{2} ψ}{\partial x^{2}} + V (x) ψ

<math>
 <mi>i</mi><mo>&InvisibleTimes;</mo><mi>&#x210F;</mi>
 <mo>&InvisibleTimes;</mo>
 <mfrac>
  <mrow><mo>&#x2202;</mo><mi>&#x03C8;</mi></mrow>
  <mrow><mo>&#x2202;</mo><mi>t</mi></mrow>
 </mfrac>
 <mo>=</mo>
 <mo>&minus;</mo>
 <mfrac>
  <msup><mi>&#x210F;</mi><mn>2</mn></msup>
  <mrow><mn>2</mn><mo>&InvisibleTimes;</mo><mi>m</mi></mrow>
 </mfrac>
 <mo>&InvisibleTimes;</mo>
 <mfrac>
  <mrow><msup><mo>&#x2202;</mo><mn>2</mn></msup><mi>&#x03C8;</mi></mrow>
  <mrow><mo>&#x2202;</mo><msup><mi>x</mi><mn>2</mn></msup></mrow>
 </mfrac>
 <mo>+</mo>
 <mi>V</mi><mo>&ApplyFunction;</mo><mrow><mo>(</mo><mi>x</mi><mo>)</mo></mrow><mi>&#x03C8;</mi>
</math>

MyScript Math

MyScript というサイトの Math というデモサービスがすごいです。手書きの数式を MathML に変換してくれます。

https://webdemo.myscript.com/views/math/index.html

リンク

初版:2023年4月23日最終更新:2023年4月23日

http://www.tohoho-web.com/ex/mathml.html