Tex表記によるHTML文書への式の埋め込み
以前、「Google API で数式とグラフを書く（TEX + Google Chart API + Google Visualization API）」にて、
Tex表記で数式をHTMLに埋め込む方法を紹介していましたが、文字列の操作にPHPを利用している箇所があったため、HTMLファイルをローカルでウェブブラウザで表示する際には理容することができませんでした。そこで本項では、JavaScript単体で利用する方法を解説します。
class属性値に「equation」が指定されたimg要素のalt属性にTex表記した式を、img要素に画像として表示できるJavaScriptの実装方法を示します。
このようにすることで、img要素のみで完結した式の埋め込みができます。
実行結果：マクスウェル方程式
実装方法
img要素
<img src="" alt="\nabla \cdot \mathbf {B}(\mathbf { r},t) = 0" class="equation">
script要素
var imgs = document.querySelectorAll( ".equation" );
for(var i=0; i< imgs.length; i++ ){
var size = (imgs[i].style.height)? imgs[i].clientWidth : 50;
var color = "000000";
var backgroundColor = "FFFFFF00";
imgs[i].src = 'http://chart.apis.google.com/chart?cht=tx&chs='+ size + '&chf=bg,s,'+ backgroundColor +'&chco=' + color + '&chl=' + encodeURIComponent( imgs[i].alt );
}
式の大きさは「size」（縦幅px）、描画色は「color」、背景色は「backgroundColor」で指定することができます。 式の大きさはstyle属性のheightプロパティに値が与えられている場合にはその値を、与えられていない場合には50を与えるとします。 また、式や色を変更する場合は、別のclass属性値を与えて同様のスクリプトを実行します。
メモ
・ウェブに接続されている必要がある。
・「\boldsymbol」は使えないので、代わりに「\mathbf」を利用する。
