HTML5,MathMLを使ってみる
MathMLを試しました。実際にこの記事上にMathML記述を 置き、かつそのコードを示しています。 現時点ではfirefoxのみがMathMLに 仮対応できているようです。
上はfirefox4で動かした画面のキャプチャです。 firefox3.6.6でもMathML有効な設定にすれば得られます。 MathMLに対応したブラウザではこの下に同様の数式がでる はずです。対応していない場合、1+a b,1+5 2,t2=t1 1 - v 2 C 2といった要素 のみの並びが表示されます。
（１）分数
（２）黄金比
firefox3.6.6でMathMLを有効にする設定：
アドレスバーにabout:configを入力して、移動すると、設定パラメターが
出てきます。項目の中からhtml5:enableをtrueにします。
firefox4では標準でmathmlが使えます。
firefox3では√の中に分数があると前垂れの長さが足らなくなっていましたが
firefox4では修正されています。
MathML記述
本記事のサンプルは以下のMathML記述をHTML上に 直接書いて出しています。
（１）分数
<math style="display:block"> <!-- display:block指定がないと小さくなってしまう -->
<mn>1</mn> <!-- 数値は<mn>で囲む -->
<mo>+</mo> <!-- 演算子は<mo>で囲む -->
<mfrac> <!-- 分数は<mfrac>の中に２つの要素を並べる -->
<mi>a</mi> <!-- mfracの分子；変数は<mi>で囲む -->
<mi>b</mi> <!-- mfracの分母；変数は<mi>で囲む -->
</mfrac> <!-- 機械的で無意味で鬱陶しいXMLの閉じタグ -->
</math> <!-- 機械的で無意味で鬱陶しいXMLの閉じタグ -->
（２）黄金比
<math style="display:block">
<mfrac>
<mrow> <!-- 分子;複数要素からなる場合は<mrow>でまとめる -->
<mn>1</mn>
<mo>+</mo>
<msqrt> <!-- √は<msqrt>で囲む -->
<mn>5</mn>
</msqrt>
</mrow>
<mn>2</mn> <!-- 分母;単要素なので直接書いている -->
</mfrac>
</math>
（３）時間に関するローレンツ変換式
<math style="display:block">
<mi>t2</mi>
<mo>=</mo> <!-- 等号は単純な演算子扱い -->
<mfrac>
<mi>t1</mi>
<msqrt><mrow>
<mn>1</mn>
<mo>-</mo>
<mfrac>
<msup> <!-- n乗は<msup>内に基数と乗数を書く -->
<mi>v</mi> <!-- 基数 -->
<mn>2</mn> <!-- 乗数 -->
</msup>
<msup>
<mi>C</mi>
<mn>2</mn>
</msup>
</mfrac>
</mrow></msqrt>
</mfrac>
</math>
mathにdisplay:blockを指定しないと、１行分の高さになるようで、
例のような多段式の場合、小さくなりすぎます。
表示サイズに関しては最終仕様がどうなるかは分かりませんが、
ここでは対症処置としてこの指定を行っています。
MathMLを利用した記事を▼動画で見せるプラチナ比と黄金比の仕組み に置きました。まだまだ対応しないブラウザがほとんどなので数式を画像 化したものも載せてます。
MathML現実的記述法
MathMLの形式の記述を人間が行うことは全く現実的ではありません。
例えば次のような記述からMathML構文を生成するのは難しいことではありません。
// 分数
1+a÷b;
// 黄金比
{1+√5}÷2;
// ローレンツ変換
t2=t1÷√{1-{v^2}÷{C^2}};
式の定義法は色々考えられます。例えばtex/latexなどのように複雑な
制御語で行うこともできますが、ここでは可能な限り本来の
数式に近い形で表現できるように定義しています。
長い経験からいって特に修練しなくても式が分かる
形こそ望まれるものだと考えています。
この例は実際に簡素な記述からツールによりMathML記述を生成し、このページに コピーしたものです。
ツールにより実際に作成されたものを載せます。
<math>
<mi>1</mi>
<mo>+</mo>
<mfrac>
<mn>a</mn>
<mn>b</mn>
</mfrac>
</math>
<math>
<mfrac>
<mrow>
<mi>1</mi>
<mo>+</mo>
<msqrt>
<mi>5</mi>
</msqrt>
</mrow>
<mi>2</mi>
</mfrac>
</math>
<math>
<mn>t2</mn>
<mo>=</mo>
<mfrac>
<mn>t1</mn>
<msqrt>
<mrow>
<mi>1</mi>
<mo>-</mo>
<mfrac>
<mrow>
<msup>
<mn>v</mn>
<mi>2</mi>
</msup>
</mrow>
<mrow>
<msup>
<mn>C</mn>
<mi>2</mi>
</msup>
</mrow>
</mfrac>
</mrow>
</msqrt>
</mfrac>
</math>
使ったツールはsymphonieといい、構文定義と、解析したい文を与える と構文解析し構文木をXMLの形で出力することができます。
解析のために与えた構文定義は次のものです。
//#omit expression term-list term operator op-term math-list
@ ::= ?"[ \t\n\f\r\u3000]+"
@ ::= ?"//.*$"
@mi ::= ?"[0-9]+\.[0-9]+" | ?"[0-9]+"
@mn ::= ?"[a-zA-Z][0-9a-zA-Z]*"
@mo ::= "+" | "=" | "/" | "-" | "×" / "×"
| "÷" / "(÷)" | "⁢" / "*"
| "±" / "±"
math-list ::= {math}
math ::= expression ";"
expression ::= {op-term}
op-term ::= operator | term
operator ::= mo
term ::= mn | mi | mrow | msqrt | mfrac | msup | mfenced
mfenced ::= "(" expression ")"
mrow ::= "{" expression "}"
msqrt ::= "√" term
mfrac ::= term "÷" term
msup ::= term "^" term
分数は÷で指示し、ルートは√で指示しています。*による掛け算は記号が
省略されます。×で×がでます。使用頻度の低い割り算÷は(÷)で現します。
Windowsで次のように実施しました。構文定義はsyntax.hnに式の文はe1.txtで出力はout.xmlに得ています。 構文定義と解析対象文をツールに与えているだけであり、解析プログラムを別途組んだりしていない事に 注目してください。
java -jar C:\jlib\symphonie.jar syntax-check -no_escape ^
-syntax syntax.hn -source e1.txt -xml -with_begin_end -out out.xml
なお、HTMLにはめ込むに当たってdisplay:blockは<math>に設定せず cssで与える形でもかまいません。下ではmath全てを 変更していますが、一般にはclass定義とすべきです。
<style type="text/css">math { display:block }</style>
この版は、可能性を軽く試しただけで本格的なものにはしていません。 しかしながらMathMLフルセット対応をしてもさほど大規模にはならないと 思います。
このツール(symphonie)はオツアンドサンズで公開されています。
WEBクライアント上で動的に変換を行う例を
WEB上で動的MathML生成：クライアントで構文解析を実行
に置きました。
オフラインで変換を行う例を
◆HTML5-MathMLを実用的にする式変換ツール
に置きました。
＃＃＃
2011/5/11:
実際の数式での出現率を考え若干の修正を施しました。
・分数を÷で現す
・見えない掛け算を*で現す
・乗算×は×で現す
・割り算÷はめったに出現しないため(÷)で現す
firefox4で画面をとり直しました。
| 固定リンク