HTML5で数式を表現する

HTML5で数式が扱えるようになる背景

HTMLの次期バージョンである HTML5 では、SVG（ベクター画像形式）だけでなく、MathML（数学記述用のXML言語） を使って数式を表現できるようになります。 どの程度の表現力があるのか気になったので、実際に試してみました。

MathMLでマクローリン展開を書いてみた

まずは、パソコンを触っていると何かと便利な「ごまかしの友」、マクローリン展開を書いてみました。

Firefox上では、意外ときれいに表示されます。 ただし、この数式を構成している MathML のソースコードはXMLそのもの で、人間が手書きするにはかなり厳しい構造です。RSSと同じく、直接入力するものではないと痛感しました。

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <semantics>
        <mrow>
            <mi>f</mi>
            <mrow>
                <mrow>
                    <mo stretchy="false">(</mo>
                    <mi>x</mi>
                    <mo stretchy="false">)</mo>
                </mrow>
                <mi mathvariant="normal">=</mi>
                <mi>f</mi>
            </mrow>
            <mrow>
                <mrow>
                    <mo stretchy="false">(</mo>
                    <mn>0</mn>
                    <mo stretchy="false">)</mo>
                </mrow>
                <mo stretchy="false">+</mo>
                <mi>f</mi>
            </mrow>
            <mi>'</mi>
            <mrow>
                <mo stretchy="false">(</mo>
                <mn>0</mn>
                <mo stretchy="false">)</mo>
            </mrow>
            <mrow>
                <mi>x</mi>
                <mo stretchy="false">+</mo>
                <mfrac>
                    <mrow>
                        <mi>f</mi>
                        <mi>'</mi>
                        <mi>'</mi>
                        <mrow>
                            <mo stretchy="false">(</mo>
                            <mn>0</mn>
                            <mo stretchy="false">)</mo>
                        </mrow>
                    </mrow>
                    <mrow>
                        <mn>2</mn>
                        <mi>!</mi>
                    </mrow>
                </mfrac>
            </mrow>
            <mrow>
                <mrow>
                    <msup>
                        <mi>x</mi>
                        <mn>2</mn>
                    </msup>
                    <mo stretchy="false">+</mo>
                    <mi mathvariant="normal">⋯</mi>
                </mrow>
                <mo stretchy="false">+</mo>
                <mfrac>
                    <mrow>
                        <msup>
                            <mi>f</mi>
                            <mrow>
                                <mo stretchy="false">(</mo>
                                <mi>n</mi>
                                <mo stretchy="false">)</mo>
                            </mrow>
                        </msup>
                        <mrow>
                            <mo stretchy="false">(</mo>
                            <mn>0</mn>
                            <mo stretchy="false">)</mo>
                        </mrow>
                    </mrow>
                    <mrow>
                        <mi>n</mi>
                        <mi>!</mi>
                    </mrow>
                </mfrac>
            </mrow>
            <mrow>
                <mrow>
                    <msup>
                        <mi>x</mi>
                        <mi>n</mi>
                    </msup>
                    <mo stretchy="false">+</mo>
                    <mi mathvariant="normal">⋯</mi>
                </mrow>
                <mi mathvariant="normal">=</mi>
                <mrow>
                    <munderover>
                        <mi mathvariant="normal">∑</mi>
                        <mrow>
                            <mi>n</mi>
                            <mi mathvariant="normal">=</mi>
                            <mn>1</mn>
                        </mrow>
                        <mi mathvariant="normal">∞</mi>
                    </munderover>
                    <mrow>
                        <mfrac>
                            <mrow>
                                <msup>
                                    <mi>f</mi>
                                    <mrow>
                                        <mo stretchy="false">(</mo>
                                        <mi>n</mi>
                                        <mo stretchy="false">)</mo>
                                    </mrow>
                                </msup>
                                <mrow>
                                    <mo stretchy="false">(</mo>
                                    <mn>0</mn>
                                    <mo stretchy="false">)</mo>
                                </mrow>
                            </mrow>
                            <mrow>
                                <mi>n</mi>
                                <mi>!</mi>
                            </mrow>
                        </mfrac>
                        <msup>
                            <mi>x</mi>
                            <mi>n</mi>
                        </msup>
                    </mrow>
                </mrow>
            </mrow>
        </mrow>
        <annotation encoding="StarMath 5.0">
            f(x)=f(0)+f'(0) x+{f''(0)}over{2!}x^2+dotsaxis+{f^{(n)}(0)}over{n!}x^n+dotsaxis=sum from
            n=1 to infinity {{f^{(n)}(0)}over{n!}x^n}
        </annotation>
    </semantics>
</math>

WordやOpenOfficeでのMathML出力

Word 2010 や OpenOffice.org 3.2 Math では、MathML形式で数式を出力できます。

• Wordの場合： 数式オプションで「MathMLをテキストとしてクリップボードにコピーする」を有効にすると、コピー＆ペーストでMathMLを取得できます。
• OpenOfficeの場合： MathMLが保存形式として選べます。ただし、テキストエディタで開くと文字化けすることがありました。

なお、Wordからのコピペは余計な情報が多く、ブラウザで正しく再現できないケースもあります。さすがWord様、といったところでしょうか。

2010年7月時点では、MathMLを正しく表示できたのはFirefoxのみでした。 IEやChromeでは表示できず、Firefoxでも設定変更が必要です。

• Firefoxの設定： アドレスバーに about:config と入力し、 html5.enable を true に変更するとMathMLが有効になります。