MathML

MathMLとはMathematical Markup Languageの略称で、数式を記述するためのマークアップ言語です。この記事では、MathMLを使ってHTMLで数式を表示させる方法をご紹介します。

1 対応ブラウザ
2 タグ
1. 2.1 <math>
3 書き方
1. 3.1 数字
2. 3.2 変数
3. 3.3 演算子
4. 3.4 乗法
5. 3.5 等号
6. 3.6 不等号
7. 3.7 添字
8. 3.8 関数
9. 3.9 三角関数
10. 3.10 分数
11. 3.11 累乗
12. 3.12 平方根
13. 3.13 累乗根
14. 3.14 行列
15. 3.15 積分
16. 3.16 Σ
17. 3.17 順列・組み合わせ
18. 3.18 ベクトル
4 数式の例
1. 4.1 特殊相対性理論
2. 4.2 ベイズの定理
3. 4.3 オイラーの等式
5 変換
6 参考文献

1 対応ブラウザ

主要なWebブラウザは MathML に対応している。

MathML support
ブラウザ	対応状況
Apple Safari	✓
Google Chrome	✓
FireFox	✓
Microsoft Edge	✓

2022年までは Google Chrome と Microsoft Edge が MathML に対応していなかったが、2023年1月に対応した。

2 タグ

2.1 <math>

MathML のルート要素は math である。

HTMLの中でMathMLを使うには、次のようにする。

<!DOCTYPE html>
<html>
  <head>
    <title>MathML in HTML</title>
  </head>
  <body>
    <math>
      <!-- MathML content -->
    </math>
  </body>
</html>

XHTMLの中でMathMLを使うには、次のようにする。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>MathML in XHTML</title>
  </head>
  <body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <!-- MathML content -->
    </math>
  </body>
</html>

3 書き方

3.1 数字

MathML における 1 や 2 などの数字の書き方は、mn (math number) 要素のタグで数字を囲う。

<math>
  <mn>256</mn>
</math>

256

3.2 変数

MathML における変数の書き方は、mi (math identifier) 要素のタグで識別子を囲う。

<math>
  <mi>x</mi>
</math>

x

3.3 演算子

MathML における + や - などの演算子の書き方は、mo (math operator) 要素のタグで演算子を囲う。

<math>
  <mi>x</mi>
  <mo>+</mo>
  <mn>1</mn>
</math>

x + 1

3.4 乗法

MathML における乗法（乗算）の書き方は、mo (math operator) 要素のタグで InvisibleTimes 実体参照を囲む。

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

a x

3.5 等号

MathML における等号の書き方は、mo (math operator) 要素のタグで等号を囲む。

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

a = b

3.6 不等号

MathML における不等号の書き方は、mo (math operator) 要素のタグで不等号を囲む。不等号を表すには実体参照を利用する。

<math>
  <mi>a</mi>
  <mo>&gt;</mo>
  <mi>b</mi>
</math>

a > b

<math>
  <mi>a</mi>
  <mo>&ge;</mo>
  <mi>b</mi>
</math>

a \geq b

<math>
  <mi>a</mi>
  <mo>&lt;</mo>
  <mi>b</mi>
</math>

a < b

<math>
  <mi>a</mi>
  <mo>&le;</mo>
  <mi>b</mi>
</math>

a \leq b

3.7 添字

MathML における添字の書き方は、msub 要素のタグで中身を囲う。

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

x_{1}

3.8 関数

MathML における関数の書き方は、関数名の後に ApplyFunction 実体参照と引数（変数）を記述する。引数の括弧は mo (math operator) 要素のタグで括弧を囲う。

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

f (x)

3.9 三角関数

三角関数の書き方は、関数に準じる。

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

\sin θ

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

\cos θ

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

\tan θ

3.10 分数

MathML における分数の書き方は、mfrac (math fraction) 要素のタグで分子と分母を囲う。

<math>
  <mfrac>
    <mn>1</mn>
    <mi>x</mi>
  </mfrac>
</math>

\frac{1}{x}

3.11 累乗

MathML における累乗の書き方は、<msup>タグを使う。

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

x^{2}

3.12 平方根

MathML における平方根の書き方は、<msqrt>タグ(math square root)を使う。

<math>
  <msqrt>
    <mi>x</mi>
  </msqrt>
</math>

\sqrt{x}

3.13 累乗根

MathML における累乗根の書き方は、<mroot>タグ(math root)を使う。

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

\sqrt[x]{3}

3.14 行列

MathML における行列の書き方は、<mtable>タグを使う。

<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>

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

3.15 積分

MathML における積分の書き方は、<msubsup>タグを使う。

<math>
  <msubsup>
    <mo>∫</mo>
    <mi>a</mi>
    <mi>b</mi>
  </msubsup>
  <mi>f</mi>
  <mfenced>
    <mi>x</mi>
  </mfenced>
  <mi>d</mi>
  <mi>x</mi>
</math>

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

3.16 Σ

MathML における和の記号 Σ（シグマ）の書き方は、munderover 要素のタグで要素を囲う。

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

\sum_{i = 1}^{10} 2 k

3.17 順列・組み合わせ

MathML における順列の書き方は、mmultiscripts 要素のタグで要素を囲う。

<math>
  <mmultiscripts>
    <mi>P</mi>
    <mi>r</mi>
    <none/>
    <mprescripts/>
    <mi>n</mi>
    <none/>
  </mmultiscripts>
<math>

{}_{n}P_{r}

組み合わせの書き方も同様である。

<math>
  <mmultiscripts>
    <mi>C</mi>
    <mi>r</mi>
    <none/>
    <mprescripts/>
    <mi>n</mi>
    <none/>
  </mmultiscripts>
<math>

{}_{n}C_{r}

3.18 ベクトル

MathML におけるベクトルの書き方は、mover 要素のタグで変数と RightArrow 実体参照を囲う。

<math>
  <mover>
    <mi>v</mi>
    <mo>&RightArrow;</mo>
  </mover>
<math>

\vec{v}

ただし、これは高校数学でのベクトルの書き方である。大学数学や一般数学では、ベクトルに矢印記号を付けない。一般的なベクトルの書き方を以下に示す。

<math>
  <mi>v</mi>
<math>

v

4 数式の例

4.1 特殊相対性理論

特殊相対性理論として有名な「質量とエネルギーの等価性」の数式は、次のように表わす。

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

E = m c^{2}

4.2 ベイズの定理

ベイズ統計学におけるベイズの定理は、次のように表わす。

<math>
  <mi>P</mi>
  <mo>(</mo>
  <mi>A</mi>
  <mo>|</mo>
  <mi>B</mi>
  <mo>)</mo>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mi>P</mi>
      <mo>(</mo>
      <mi>B</mi>
      <mo>|</mo>
      <mi>A</mi>
      <mo>)</mo>
      <mi>P</mi>
      <mo>(</mo>
      <mi>A</mi>
      <mo>)</mo>
    </mrow>
    <mrow>
      <mi>P</mi>
      <mo>(</mo>
      <mi>B</mi>
      <mo>)</mo>
    </mrow>
  </mfrac>
</math>

P (A | B) = \frac{P (B | A) P (A)}{P (B)}

4.3 オイラーの等式

ネイピア数 e、虚数単位 i、円周率 π の間に成り立つ等式で、「世界で一番美しい数式」と呼ばれるオイラーの等式は、次のように表わす。

<math>
  <msup>
    <mi>e</mi>
    <mrow>
      <mi>i</mi>
      <mi>π</mi>
    </mrow>
  </msup>
  <mo>+</mo>
  <mn>1</mn>
  <mo>=</mo>
  <mn>0</mn>
</math>

e^{i π} + 1 = 0

5 変換

MyScript の Math では、手書きの数式を MathML に変換できる。

6 参考文献

The World Wide Web Consortium 2022. MathML Core