[ Snowfox Blog ]

Mountains and Photography

*prev | next#

2016.04.09

[ MathJax Webと数式 (1) ]

今回は数式を直接ウエブブラウザに出力する方法を試してみます。MathJaxというJavaScriptライブラリを読み込んで出力します。MathJaxはアメリカ数学会、アメリカ物理学会などが後援するプロジェクトで、これから世界標準となるだろうと考えられています。さっそく試してみます。
文章中に数式を出力すると  \( y = \frac{\pi^2}{\sin x } \)  となります。 字が小さいのはインラインなので仕方ありません。出力はTeXと同じ美しさです。今度は別行立てで書いてみます。

\[
\left( \int_0^\infty \frac{\sin x}{\sqrt{x}} dx \right)^2 = \sum_{k=0}^\infty \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1} = \prod_{k=1}^\infty \frac{4k^2}{4k^2 - 1} = \frac{\pi}{2}
\]

MathJaxの実装については http://genkuroki.web.fc2.com を参考にさせていただきました。知識ゼロからのスタートだったので助かりました。長い数式は奥村晴彦氏『LaTeX2e美文書作成入門』から借用しました。私にとってTeXの先生のような本です。


 追記 
ウェブブラウザに数式を出力するには、画像を貼るやり方よりMathJaxの方が手間が省けるだけでなく綺麗です。ただ問題は閲覧する機器やブラウザによって出力に差が出てくる点です。これはMathJaxに限らず、画像を貼りつけたりプラグインを埋め込む際に一般的に生じることです。あるサイトをパソコンで見ると画像がきれいに収まっているのに、スマートフォンで見ると画像がはみ出していたりとか。
記事を書き終えてブログを確認したら、Microsoft Edge、Chromeではもちろん、iPadのSafariでも綺麗に出力されています。ところがiPhoneでPCサイトを見るとフォントが大きすぎて長い数式が本文エリアから飛び出しています。iPhoneはiPadより小さい画面にサイトを出力するため縮小とかやってるはずですが、その命令が別行立ての数式にだけ働いていないそんな感じです。iPadと同じSafariなのでSafari自体と相性が悪いのではなく、iPhoneの特殊事情が原因です。さらにiPhoneでスマホ対応ページに切り替えて閲覧すると数式は出力されていません。タイプしたままの出力になっています。もう少し原因を探ってみます。 

iPhoneで別行立ての数式が大きく出力されカラムからはみ出してしまう症状は、数式全体を<div>…</div>で囲むと改善されるかもしれません。以下のように書くとうまくいきました。

<div style="overflow-x:auto;">
\[
\left( \int_0^\infty \frac{\sin x}{\sqrt{x}} dx \right)^2 = \sum_{k=0}^\infty \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1} = \prod_{k=1}^\infty \frac{4k^2}{4k^2 - 1} = \frac{\pi}{2}
\]
</div>


PCやiPadの出力は元のままで大丈夫でした。「overflow-x:auto;」は横にはみ出すようならスクロールしてくれというタグです。



comment(0)  track back(0)

<< top



ログイン



Skin by SAYA Powered By FC2ブログ