数学の用語をウェブ検索するとpdfのページの方が多くなった印象をうける。昔はウェブブラウザに付加ソフトを追加したり、ダウンロードしてから別のソフトで表示するなど面倒だったり、表示が重かったりしたが、最近はストレスなく軽快に見られることが多い。表示幅が固定なのはhtmlの思想に反するが、数式には好都合である。
しかし、y=a_0+a_1x+a_2x^2 と書くと $y=a_0+a_1x+a_2x^2$ と表示されるよとか、\sqrt{b^2-4ac} と書くと $\sqrt{b^2-4ac}$と表示されるよとかは、ウェブページに直接両方を書いて比較したい。
そこで、TeXの数式記述方法をほとんどそのままhtmlに持ってくることができるMathJaxも試してみる。
若干の違いもあるらしいので、それも含めてまとめていく。
MathJaxを使うにはhead部に次の設定を書きます。
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"> </script>
このURLはver.3になった最近のものです。本文中に \\( と \\) でくくられた部分があると、数式として処理してくれます。
TeXでは \$ \$ でくくられる部分が数式として処理されます。MathJaxでも同様にすることができます。共通にすると文章をそのまま使うことができるので便利です。
そのためには、先程のURLの前に次のように加えます。\\(も\$も両方使えるようにする設定です。
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'],['\\(', '\\)']]
}
};
</script>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>
URL末尾のtex-chtml.jsはいくつかバリエーションがあります。
| tex-???.js | 記述 | 出力 | 説明 |
|---|---|---|---|
| tex-chtml.js | TeX | html | 普通はこれ |
| tex-mml-chtml.js | TeXまたはMathML | html | 記述に数式タグを混在可とする |
| tex-svg.js | TeX | svg | 出力を画像(svg)にする |
MathMLは数式用のタブを使って記述する方式です。MathMLで書くのは面倒なので、mmlのついたものを使う必要はあまりないでしょう。ソフトウェアでMathML出力されたものにTeXで書き足すような場合のために用意されているのかもしれません。
chtmlはhtml出力ですが、マニュアルではcommomHTMLと書いてあります。これはhtml+cssでの表現です。svgは画像として表現すると書きましたがpngのような画像ではありません。ページ上での文字列の選択結果は異なりますが、見た目はあまり変わらないようです。不都合がない限りchtmlを採用しようと考えています。
生成されるページの記述がどう違うか次に試してみます。
次のxxからyyまでを選択してfirefoxの「選択した部分のソースを表示」で内容を確認するとchtmlとsvgの違いが見えます。xx,yyは文字列を選択しやすくするために付けています。a2の部分だけがMathJaxです。
xx$a^2$yy
xx<mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" style="font-size: 127.3%; position: relative;" role="presentation" tabindex="0" ctxtmenu_counter="2"><mjx-math class="MJX-TEX" aria-hidden="true"><mjx-msup><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D44E TEX-I"></mjx-c></mjx-mi><mjx-script style="vertical-align: 0.363em;"><mjx-mn class="mjx-n" size="s"><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-script></mjx-msup></mjx-math><mjx-assistive-mml role="presentation" unselectable="on" display="inline"><math xmlns="http://www.w3.org/1998/Math/MathML"><msup><mi>a</mi><mn>2</mn></msup></math></mjx-assistive-mml></mjx-container>yy
xx<mjx-container class="MathJax CtxtMenu_Attached_0" jax="SVG" role="presentation" style="position: relative;" tabindex="0" ctxtmenu_counter="2"><svg style="vertical-align: -0.023ex;" xmlns="http://www.w3.org/2000/svg" width="2.11ex" height="1.909ex" role="img" focusable="false" viewBox="0 -833.9 932.6 843.9" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"><defs><path id="MJX-3-TEX-I-1D44E" d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z"></path><path id="MJX-3-TEX-N-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g data-mml-node="math"><g data-mml-node="msup"><g data-mml-node="mi"><use xlink:href="#MJX-3-TEX-I-1D44E"></use></g><g data-mml-node="mn" transform="translate(529, 363) scale(0.707)"><use xlink:href="#MJX-3-TEX-N-32"></use></g></g></g></g></svg><mjx-assistive-mml role="presentation" unselectable="on" display="inline"><math xmlns="http://www.w3.org/1998/Math/MathML"><msup><mi>a</mi><mn>2</mn></msup></math></mjx-assistive-mml></mjx-container>yy
繰り返しになりますが、普通の文章の中に\$ \$ または\\( \\)で囲んだ部分を置くと内部が数式として処理されます。添字や累乗といったものがなくても、数式で使うアルファベットの書体が書籍で見慣れたものになることが嬉しいところです。
たとえばろ\$xy\$は$xy$になり、\$abgl\$は$abgl$になります。
高さが必要なものは多少はみ出して、多少詰めてくれます(変更も可能です)。
たとえば、\$\sum_{i=1}^na_ix^i\$, \$\int_0^\pi\sin x\$, \$\frac{1-x}{x}\$ などと書けば、
$\sum_{i=1}^na_ix^i$, $\int_0^\pi\sin x$, $\frac{1-x}{x}$ などとなります。
\$ \$で囲んだ部分はhtml内で普通の文字の扱いなので、<p>などブロックを作るタグ内に入れて使うのが良いでしょう。
もう一つ、\$\$ \$\$ または\\[ \\]で囲んだ部分は数式だけを独立した行に書いてセンタリングします。
たとえば\$$\y=a_0+a_1x+a_2x^2+a_3x^3\$\$ と書けば、
$$y=a_0+a_1x+a_2x^2+a_3x^3$$のような感じになります。
独立しているので、高さが必要なものは本来のレイアウトになります。
たとえば\$\$\sum_{i=1}^na_ix^i\$\$ \$\$\int_0^\pi\sin x\$\$ \$\$\frac{1-x}{x} \$\$と書けば、
$$\sum_{i=1}^na_ix^i$$ $$\int_0^\pi\sin x$$ $$\frac{1-x}{x}$$となります。
\$\$ \$\$ で囲まれた部分はブロックとなりますので、<p>タグで囲むのは意味がありません。余白を作ったり、罫線で囲むには<div>タグで囲んでcssを使うのがいいでしょう。
| TeX記述 | TeX表示 | 解説 |
| \$abcdefghijklmnopqrstuvwxyz\$ | $abcdefghijklmnopqrstuvwxyz$ | 数式中の英字はイタリック |
| \$ABCDEFGHIJKLMNOPQRSTUVWXYZ\$ | $ABCDEFGHIJKLMNOPQRSTUVWXYZ$ | 大文字も |
| \$1234567890\$ | $1234567890$ | 数字はローマン体 |
| \$あいうえおアイ亜以\$ | $あいうえおアイ亜以$ | 数式の中に和文の文字を入れると... |
| \$\mathrm{abcimxyzAIM}\$ | $\mathrm{abcimxyzAIM}$ | \\mathrm は Math Roman |
| sin, cos, log などの関数は以下のようにします | ||
| \$\\sin x\$ | $\sin x$ | sinとxの間のスペースはsinxという関数でないことを示します |
| \$sin x, \mathrm{sin} x\$ | $sin x, \mathrm{sin} x$ | これはお勧めしません |
| \$\mathbf{abcimxyzAIM}\$ | $\mathbf{abcimxyzAIM}$ | \mathbf は Math Romanなボールド |
| \$\boldsymbol{abcimxyzAIM}\$ | $\boldsymbol{abcimxyzAIM}$ | \boldsymbol は イタリックなボールド TeXでは無効かもしれません |
| \$\bm{abcimxyzAIM}\$ | $\bm{abcimxyzAIM}$ | \bm は イタリックなボールド MathJaxでは無効かもしれません |
イタリックなボールドはベクトルとして使いたいのですが、TeXとMathJaxのデフォルトの状態で異なるのは困るので、確認のためにあえて書いています。\bmなどと色付きになっていたらMathJaxでは無効だということです。回避策はあります。
| TeX記述 | TeX表示 | 解説 |
| \$\newcommand{\bm}[1]{\boldsymbol{#1}}\$ \$\bm{abcimxyzAIM}\$ |
$\newcommand{\bm}[1]{\boldsymbol{#1}}\bm{abcimxyzAIM}$ | これは\bmが使えない環境で、 代わりに\boldsymbolを使うというもの。 |
| \$\vec{x}\$ | $ \vec{x}$ | \vec は上に矢印をつけるベクトル表記 |
| \$\newcommand{\vec}[1]{\boldsymbol{#1}}\$ \$\vec{x}\$ |
$\newcommand{\vec}[1]{\boldsymbol{#1}}\vec{x}$ | \vec の代わりに\boldsymbolを使うというもの。 |
TeXが生まれたのはUnicodeができる前、すくなくとも普及する前ですのでギリシャ文字は直接入れずに、\alpha, \beta などで入力します。今は大勢がUnicode対応になりましたから直接入れることができますが、数式としてのバランスや入力のしやすさが同じであることを考えると、\alphaで入れるほうが得策です。
| TeX記述 | TeX表示 | 直接 | \$直接\$ | Unicode |
| \$\alpha\$ | $\alpha$ | α | $α$ | U+03B1 |
| \$\beta\$ | $\beta$ | β | $β$ | U+03B2 |
| \$\sigma\$ | $\sigma$ | σ | $σ$ | U+03C3 |
| \$\phi\$ | $\phi$ | ϕ | $ϕ$ | U+03D5 |
| \$\varphi\$ | $\varphi$ | φ | $φ$ | U+03C6 |
| \$\psi\$ | $\psi$ | ψ | $ψ$ | U+03C8 |
\phiなど別の書体がある文字は、varをつけて、\varphiで出すことができます。texは$\phi$が標準で$\varphi$が別書体ですが、Unicodeの標準は$\varphi$の方が標準と扱われていることが値からわかります。
\phiなどの先頭文字を大文字にして\Phiとすると、大文字にできます。ただし、アルファなど大文字がラテン文字と同じ場合はこの方法は使えません。しかし、Unicodeでは別のコードポイントが割り当てられていますので、直接文字を入れることができます。
| TeX記述 | TeX表示 | 直接 | \$直接\$ | Unicode |
| \$\Alpha\$ | 不可 | Α | $Α$ | U+0391 |
| \$\Sigma\$ | $\Sigma$ | Σ | $Σ$ | U+03A3 |
| \$\Phi\$ | $\Phi$ | Φ | $Φ$ | U+03A6 |
| \$\varPhi\$ | $\varPhi$ | - | - | - |
| \$\Psi\$ | $\Psi$ | Ψ | $Ψ$ | U+03A8 |
| \$\varPsi\$ | $\varPsi$ | - | - | - |
| \$\mathit{\Psi}\$ | $\mathit{\Psi}$ | - | - | - |
大文字は数式の習慣に従って立体(非斜体)ですが、varをつけると斜体にできます。イタリックを意味する\mathitを使って斜体にすることもできます。
直接Unicode文字を入力すると、はじめから斜体になります。
これもギリシャ文字と同様な事情があります。日本語には×,÷などの文字がありますが、ASCIIに代表されるUnicode以前の英字にはないので、/times, /divなどで入力します。
| TeX記述 | TeX表示 | 直接 | \$直接\$ | Unicode |
| \$-$ | $-$ | - | $-$ | U+002D |
| \$+\$ | $+$ | + | $+$ | U+002B |
| \$\times\$ | $\times$ | × | $×$ | U+00D7 |
| \$\div\$ | $\div$ | ÷ | $÷$ | U+00F7 |
| \$=\$ | $=$ | = | $=$ | U+003D |
| \$\neq\$ | $\neq$ | ≠ | $≠$ | U+2260 |
| \$\le\$ | $\le$ | ≤ | $≤$ | U+2264 |
| \$\sum\$ | $\sum$ | ∑ | $∑$ | U+2211 |
すでに存在する文字も数式用に調整されるようです。連続した和を表す∑はギリシャ文字のσの大文字ですが、\Sigmaではなく、\sumで出します。Unicodeでも役割の違うものは別のコードを当てる方針のようで、シグマの大文字は U+03A3 であり、N-ARY SUMMATION は U+2211 です。
| TeX記述 | TeX表示 | 説明 |
| \$x^{-i}y^{34}\$ | $x^{-i}y^{34}$ | ^に続く{ }内が上付き |
| \$x^2y^a\$ | $x^2y^a$ | 一文字なら{ }は省略可 |
| \$x_{ab}y_{34}\$ | $x_{ab}y_{34}$ | _に続く{ }内が下付き |
| \$x_2y_a\$ | $x_2y_a$ | 一文字なら{ }は省略可 |
| \$X^a_bY_b^a\$ | $X^a_bY_b^a$ | どちらが先でも殆ど変わりない |
| \$X^{a^2}\$ | $X^{a^2}$ | 多重にできる |
| \$\sin^2\theta+\cos^2\theta=1\$ | $\sin^2\theta+\cos^2\theta=1$ | 文字間は自動で調整される |
| \$\sin^2 \theta + \cos^2 \theta = 1 \$ | $\sin^2 \theta + \cos^2 \theta = 1 $ | 見やすいようにスペースを入れても表示は同じ |
| TeX記述 | TeX表示 | 説明 |
| \$y=\frac{x^2+3x-4}{t+1}\$ | $y=\frac{x^2+3x-4}{t+1}$ | \frac{分子}{分母} |
| \$y=\frac{(x-2)(x-5)}{x^2}e^{2x}\$ | $y=\frac{(x-2)(x-5)}{x^2}e^{2x}$ | ( )はそのまま使える |
| \$[2(x-y)+3]z^2\$ | $[2(x-y)+3]z^2$ | [ ]もそのままでよい |
| \$\{2(x-y)+3\}z^2\$ | $\{2(x-y)+3\}z^2$ | { }は\{ \}とする |
| \$\frac{d}{dz}\left[(1-z^2)\frac{dP_l(z)}{dz}\right] = -\Lambda P_l(z)\$ | $\frac{d}{dz}\left[(1-z^2)\frac{dP_l(z)}{dz}\right] = -\Lambda P_l(z)$ | 括弧を内部の式に合わせて大きくしたいときは\left, \rightを前置する |
最後の例は、\$ \$ ではなく \$\$ \$\$ で使うと本来の形になる