HOME > natural science Laboratory > コンピュータ・シミュレーション講座 > 仮想物理実験室

Tex表記によるHTML文書への式の埋め込み

文責:遠藤 理平 (2016年3月25日) カテゴリ:仮想物理実験室(277)計算物理学(132)

 以前、「Google API で数式とグラフを書く(TEX + Google Chart API + Google Visualization API)」にて、 Tex表記で数式をHTMLに埋め込む方法を紹介していましたが、文字列の操作にPHPを利用している箇所があったため、HTMLファイルをローカルでウェブブラウザで表示する際には理容することができませんでした。そこで本項では、JavaScript単体で利用する方法を解説します。

 class属性値に「equation」が指定されたimg要素のalt属性にTex表記した式を、img要素に画像として表示できるJavaScriptの実装方法を示します。 このようにすることで、img要素のみで完結した式の埋め込みができます。

実行結果:マクスウェル方程式

\nabla \times \mathbf{E} (\mathbf { r},t)=- \frac{\partial  }{\partial  t} \,\mathbf{ B}(\mathbf {r},t)
\nabla \times \mathbf { H}(\mathbf { r},t)=\mathbf { j}(\mathbf {r},t)  + \frac{\partial  }{\partial  t} \, \mathbf {D}(\mathbf { r},t)

\nabla \cdot \mathbf { D}(\mathbf { r},t)  = \rho(\mathbf { r},t)

\nabla \cdot \mathbf {B}(\mathbf { r},t)  = 0

実装方法

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」を利用する。



タグ: ,

▲このページのトップNPO法人 natural science トップ

関連記事

仮想物理実験室







計算物理学







▲このページのトップNPO法人 natural science トップ