Webによる数式表示方法の検討

icon 項目のみ表示/展開表示の切り替え

数式の表示例

今までホームページの数式表示にCodeCogsを使用していました。
理由はLaTex形式で数式を記述できSVGで描画出力できるため高解像度環境及び印刷時に綺麗に表示されるからです。
しかしCodeCogsは不安定でついにローカル環境でしか表示されなくなりました。
具体的には数式の代わりに以下のような画像が表示されます。

この機会に各種のLaTex形式による数式表現を比較してみます。
ページ上に実際に表示して見栄えを比較します。
高解像度ディスプレイや印刷時等を考慮して数式を拡大して比較します。
なお、このページ以外はMathJaxに移行しました。

表示方法 Codecogs SVG Codecogs PNG Google Chart API JPG
100% ※1 x=\frac{-b \pm \sqrt{b^2-4ac}}{2a} x=\frac{-b \pm \sqrt{b^2-4ac}}{2a} x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}
150% ※2 x=\frac{-b \pm \sqrt{b^2-4ac}}{2a} x=\frac{-b \pm \sqrt{b^2-4ac}}{2a} x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}
150% ※3 x=\frac{-b \pm \sqrt{b^2-4ac}}{2a} x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}
150% ※4 x=\frac{-b \pm \sqrt{b^2-4ac}}{2a} x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}
MathJax 100% \displaystyle x=\frac{-b \pm \sqrt{b^2-4ac}}{2a} ※1 等倍表示(Webによる数式表示(等倍))
※2 width height 属性で画像サイズを150%に変更(Webによる数式表示1(150%)
※3 等倍表示の150%のピクセルサイズの画像を作成して表示(Webによる数式表示2(150%)
※4 等倍表示の150% ×ブラウザの表示倍率のピクセルサイズの画像を作成して150%のピクセルサイズになるようにwidth height属性で表示 ブラウザの表示倍率の変更に対応しています。(Webによる数式表示3(150%)

現在のブラウザの表示倍率 window.devicePixelRatio=

数式の表記の例

ギリシャ文字

小文字 LATEX 大文字 LATEX 読み方
α \alpha Α A アルファ
\beta Β B ベータ
γ \gamma Γ \Gamma ガンマ
δ \delta Δ \Delta デルタ
ε \epsilon Ε E イプシロン
ζ \zeta Ζ Z ゼータ
η \eta Η H イータ
θ \theta Θ \Theta シータ
ι \iota Ι I イオタ
κ \kappa Κ K カッパ
λ \lambda Λ \Lambda ラムダ
μ \mu Μ M ミュー
ν \nu Ν N ニュー
ξ \xi Ξ \Xi クシー
ο o Ο O オミクロン
π \pi Π \Pi パイ
ρ \rho Ρ P ロー
σ \sigma Σ \Sigma シグマ
τ \tau Τ T タウ
υ \upsilon Υ \Upsilon ユプシロン
φ \phi Φ \Phi ファイ
χ \chi Χ X カイ
ψ \psi Ψ \Psi プシー
ω \omega Ω \Omega オメガ