Logo address

Web ページへの数式の埋め込み

2016-07-02

TeX To SVG

Display 数式

最近はいろいろな方法があるようであるが...
ここでは簡単な方法を使う。ただし Mac が必要。iDraw.app (Graphics) を使う1。

iDraw は TeX で生成された PDF を文字単位の構成要素にまで細分化し、編集可能にする。従って、一部分だけを選択して SVG ファイルを作り出すことが可能である。これは他の方法に比べて、大量の数式を扱いたいときに有利に働く。

以下のサンプル(Plain TeX で書かれている)

$$a\int_0^{\pi\over 2} \sqrt{\cos^2 \theta + \lambda^2 \sin^2 \theta} \,  {\tt d} \theta$$

\medskip
where
$\lambda = b/a$
\end
から生成された PDF ファイルの一部を抜き取って作成された SVG による数式を次に示す。LaTeX の方が好みなら、もちろん LaTeX を使ってもよい。

注1: Inkscape との比較: 筆者の印象では iDraw の方が品質が高い。少なくとも Mac 版の Inkscape はこの目的には使えない。

本文中に TeX フォント

Italic を指定しても、数式に使われる変数のフォントにはならない: Italic (小文字 a に注目する)

残念ながら、本文中に TeX フォントを使うよい方法が存在しない。
いや、そうでもない。次のように TeX フォントが使える。(これは cmmi フォント)

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 .,:;!?&‘“’”
ただしヘッダ部に
  <style type="text/css">
  @font-face {
    font-family: 'cmmi10';
   src: url('texfonts/cmmi10.woff') format('woff');
    font-weight: normal;
    font-style: normal;   }
  </style>
が必要。

うーん、記号文字が化けている。もとのHTMLコードは

<div style="font-family:cmmi10; font-size:100%; line-height:120%">
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 .,:;!?&‘“’”
</div>
だったのよね。従って、λ=b/a は
<span style=font-family:cmmi10;">λ</span>=<span style=font-family:cmmi10;">b</span>/<span style=font-family:cmmi10;">a</span>
と書けば λ=b/a となるが、非常に面倒臭い。さらにギリシャ文字のラムダは(Safari 以外は)正確には cmmi フォントにはなっていない。文字化けしない、ちゃんとしたcmmiフォントはないのか?

そうは言っても、この問題は原理的な困難を伴う。そもそも cmmi には　'=' も ':' も '!' などは存在しないのである。cmmi の文字テーブル(0 ~ 127)は ASCII と全く異なる。例えばギリシャ文字を含む。ここで行われたことは、

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 .,:;!?&‘“’”
の ASCII コードを機械的に cmmi の文字テーブルに当てはめただけである。

それではギリシャ文字や特殊記号は文字コード "&#X;" で書いたらどうか?
残念ながら、それも上手くは行かない。"&#X;" で X ≦ 32 は捨てられてしまう。

注: ここで使われたフォントファイルは、Reference の disco.bu.edu から借用した。

文章中の数式

文章中に SVG の画像を文字のように取り込めないか? 例えば のように。すると確実に TeX フォントが使える。しかし幾つかの問題点を解決しなくてはならない。

上の SVG の取り込みは

<object type="image/svg+xml" data="a1.svg" height="16px"></object>
でやったのであるが、

こんなのはどうか?
これは style の position を使って、

<object type="image/svg+xml" data="a1.svg" height="16px" style="position:relative; top:5px"></object>
で書いている。

MathML

HTML5 math tag

2次方程式の例

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>a</mi> <msup><mi>x</mi><mn>2</mn></msup>
  <mo>+</mo>
  <mi>b</mi> <mi>x</mi>
  <mo>+</mo>
  <mi>c</mi>
  <mo>=</mo>
  <mn>0</mn>
  <mspace width="1em"/>
  <mtext>(</mtext>
  <mi>a</mi> <mo>&#8800;</mo>
  <mn>0</mn>
  <mtext>)</mtext>
</math>
Safari の結果を画像で示す

いろいろなブラウザで試してみよう。

このブラウザの結果: a x2 + b x + c = 0 ( a ≠ 0 )

結果の評価

name 評価
Safari 満点
Firefox ほぼ良好 (Tex の Math Font になっていない1。x を見よ)
Opera フォントがダメ
Chrome フォントがダメ、肩付がダメ
なお MathML で肩付を
<mi>x</mi><msup><mn>2</mn></msup>
ではなく
<msup><mi>x</mi><mn>2</mn></msup>
で表していることに注意。考え方: msup は x と 2 にオペレートしているのである。

さて MathML を使ってλ=b/aを書くとλ=b/aとなる。
この HTML コードは

<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>λ</mi><mo>=</mo><mi>b</mi><mo>/</mo><mi>a</mi>
</math>
である。もちろん、Safari 以外では正しいフォントにはならない。Safari においてもラムダは cmmi から少しだけ外れている。

総評: まだ青い果実。青いまま枯れるかも...(次の MathJax を見よ)

注1: MathML Font アドオンを入れてもダメ

MathJax

MathJax が手軽で完成度も高い。 Chrome, Safari, Firefox, Opera で使える1。 --- 素晴らしい!
単に
<head> ~~~~ </head>
の中に
<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>
と書けばよい。また数式ラベルを扱いたい場合には
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: { equationNumbers: { autoNumber: "AMS" } }
});
</script>
の追加が必要である。

inline 数式は

\( .... \)
display 数式は
\[ .... \]
と書く。ここに .... の部分に TeX 形式の数式を書く。

以下はサンプルである。

\( ax^2 + bx + c \ \) (\(a \neq 0\))

\(\lambda = a/b \)

\( a\int_0^{\pi\over 2} \sqrt{\cos^2 \theta + \lambda^2 \sin^2 \theta} \, {\tt d} \theta \)

\[ a\int_0^{\pi\over 2} \sqrt{\cos^2 \theta + \lambda^2 \sin^2 \theta} \, {\tt d} \theta \]

\begin{equation} x^2 - 6x + 1 = 0 \label{eq:foo} \end{equation} \begin{eqnarray*} 2x_1 + x_2 & = & 5 \\ 2x_2 & = & 2 \end{eqnarray*}

これらは次の HTML コードで

<p>
\( ax^2 + bx + c \ \) (\(a \neq 0\))
<p>
\(\lambda = a/b \)
<p>
\( a\int_0^{\pi\over 2} \sqrt{\cos^2 \theta + \lambda^2 \sin^2 \theta} \,  {\tt d} \theta \)
<p>
\[ a\int_0^{\pi\over 2} \sqrt{\cos^2 \theta + \lambda^2 \sin^2 \theta} \,  {\tt d} \theta \]
<p>
\begin{equation}
  x^2 - 6x + 1 = 0　\label{eq:foo}
\end{equation}

\begin{eqnarray*}
  2x_1 + x_2 & = & 5 \\
  2x_2 & = & 2
\end{eqnarray*}
で生成されている。 TeX でおなじみの数式表現である。
数式番号も表示されている。
　\label{eq:foo}
とした式は
\ref{eq:foo}
で参照される。

TeX のルール通り、
inline 数式を

$ .... $
display 数式を
$$ .... $$
と書くことも可能になるらしいが、筆者の好みではない。なぜなら筆者は "$" を他の意味で使うことがあるから。

注1: Opera はルート記号の描写にバグがある。

Appendix

Plain TeX で定義されているフォント

Computer Modern Font

Text Font

type face control font name abbreviation
Roman \rm Computer Modern Roman cmr
Slanted \sl Computer Modern Slanted Italic cmsl
Italic \it Computer Modern Text Italic cmti
Typewriter \tt Computer Modern Typewriter Type cmtt
Bold \bf Computer Modern Bold Extended cmbx
Math Font
font name abbreviation
Computer Modern Math Italic cmmi
Computer Modern Math Symbol cmsy
Computer Modern Math Extension cmex
サイズの標準: 10pt

References