MathMLを含むページを表示可能にする軽量のJavaScriptプログラムを作成してみた

MathMLに非対応のブラウザでも、MathMLを含むページを表示可能にする軽量のJavaScriptプログラムを作成してみました。

MathMLは数式をXML形式で表現するため、数式を画像として用意する場合とは異なり、細かな修正やプログラムからの操作に便利です。数式を含んだページを作成する際にはぜひとも利用したいところなのですが、対応しているブラウザを利用する、もしくはプラグインを組み込まないと表示されないのがネックになります。ただ10年くらい前はMozillaくらいしか対応ブラウザがなかったのですが、最近はHTML5の一部に含まれることもあって、ネイティブに対応しているブラウザが増えてきています。

また最近はMathJaxというライブラリがあり、これを利用するとMathMLに非対応のブラウザでも数式を表示することができます。実行結果も非常に美しい表示になり、MathML対応ライブラリの決定版という感じです。

ということでMathJaxを使えば全て解決かと思いきや、微妙な問題もあります。

  • (初回の)表示が重い
  • (そのままでは)日本語が使えない
  • (どうやら)HTMLタグを混在させることができない
  • (時々)数式が表示されない場合がある

大半が微妙な問題なので、今後のバージョンアップで解決しそうですね。

ただMathJaxでは、数式の表示にWebFontを利用しており、初回起動時にローディングがあるためどうしても表示まで時間がかかります。またWebFontに非対応のブラウザでは、各文字ごとに別れたフォント画像を1枚づつロードするため、やはりこちらも結構な重さです。特にiPhoneで3G回線を利用する場合等には若干キビシイものがあります。

美しい数式の表示にはMathJaxは素晴らしいのですが、見た目は適当で良いのでもう少し表示が軽いものも欲しくなります。そこで、JavaScript+CSSによるMathML表示用のプログラムを作成してみました。ちなみに、MathJaxはプラグイン構造になっているため、MathJaxを拡張することでも目的を達成できる可能性はあるのですが、NIHな精神により車輪の再発明をしています。

ソースコード

とりあえず基本的な部分が動くようになったのでGoogle Codeで公開してみました。ちなみに画像は一切利用せず、JavaScript+CSSのみで実現しています。またJavaScriptによる加工もほとんど行わず、基本的にHTML+CSSによるレイアウトを利用するようにしています。

使い方

MathMLを含むページの内に下記のコードを追加します。

<link rel="stylesheet" href="https://display-mathml.googlecode.com/hg/display-mathml.css?r=stable" />
<script src="https://display-mathml.googlecode.com/hg/display-mathml.js?r=stable"></script>

これだけでMathMLの部分が数式っぽく表示されるはずです。

動作デモ

下記のページで実際に試してみることができます。

  • Examples - 正常に動作する数式の例です。
  • Live Demo - MathMLタグをWordの数式エディタ等からコピペして表示を確認できます。
  • Bookmarklet - MathMLを含むページで利用することでMathML部分を数式として表示するブックマークレットです。

色々と未実装・バグがいっぱいなのですが、恐らく中学・高校くらいで出てくる数式であれば概ね表示できると思います。

最近のMicrosoft Office付属の数式エディタは、数式をMathMLとしてコピーする機能がついています。数式エディタからコピーするだけで、簡単にMathMLを利用してページ上に数式を表示できるのでぜひお試しください。