HTML5 MathML

ウェブページ上で数式を正確かつ美しく表示するために、HTML5ではMathMLという標準が導入されました。

MathMLとは
MathMLの基本構造
MathMLの主な要素
ブラウザのサポート
MathJaxの利用

MathMLとは

Mathematical Markup Language（MathML）は、webページ上で数学的な記述や数式を表示するためのXMLベースの言語です。MathMLは、ブラウザが数式を正確にレンダリングし、スクリーンリーダーが適切に数式を読み上げることを可能にします。

MathMLの基本構造

MathMLでは、<math>タグを使用して数式を囲みます。

その中に、様々な子要素を入れることで数式を構成していきます。

サンプルコード①

<math xmlns="http://www.w3.org/1998/Math/MathML">
               
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
                               
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>
                               
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
                       
      </math>

表示例①

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

サンプルコード②

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mo>-</mo>
        <mi>b</mi>
        <mo>±</mo>
        <msqrt>
          <mrow>
            <msup>
              <mi>b</mi>
              <mn>2</mn>
            </msup>
            <mo>-</mo>
            <mrow>
              <mn>4</mn>
              <mo>×</mo>
              <mi>a</mi>
              <mo>×</mo>
              <mi>c</mi>
            </mrow>
          </mrow>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn>
        <mo>×</mo>
        <mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
</math>

表示例②

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

この例②では、二次方程式の解の公式をMathMLで表現しています。

MathMLの主な要素

<mi>：変数や関数名を表現するための要素です。
<mo>：演算子（+、-、* など）を表現するための要素です。
<mn>：数値を表現するための要素です。
<mfrac>：分数を表現するための要素です。子要素として分子と分母を持ちます。
<msqrt>および<msup>：平方根や冪乗を表現するための要素です。

ブラウザのサポート

MathMLは、ほとんどの主要なブラウザでサポートされていますが、Internet ExplorerやMicrosoft Edge（旧バージョン）ではサポートされていません。そのため、MathJaxなどのJavaScriptライブラリを使用して、これらのブラウザでもMathMLを表示できるようにすることが一般的です。

MathJaxの利用

MathJaxは、MathMLを含むHTMLページをすべての主要なブラウザで表示できるようにするためのJavaScriptライブラリです。

MathJaxを使用することで、MathMLの表示を改善し、非対応のブラウザでも適切なレンダリングができます。以下のスクリプトをHTMLの<head>タグ内に追加することで、MathJaxを利用できます。

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>