Microsoft Wordで作成した数式をWebで表示する

別記事を書く際に、Microsoft Wordの数式エディタで作成した数式などをWebで表示する方法について調べた。備忘録として残しておく。

数式エディタと記法

Wordなどの数式エディタで LaTexなどの記法で入力する方法については、「Word で UnicodeMath および LaTeX を使用して行形式の数式を入力する」(Linear format equations using UnicodeMath and LaTeX in Word)に説明がある。

同様に、数式エディタのGUIで2次元形式で作成した数式をLaTeXなどの形式にして取り出すことも可能である。数式タブの変換で「{}LaTeX」を選択しておくことで、コピー・ペーストした際に、LaTexの式の表現に変換されるようになる。

UnicodeMathについては、「UnicodeMath:A Nearly Plain-Text Encoding of Mathematics
Version 3.1」に説明がある。

Webでの数式表示

MathML

Webでの数式記述としては、MathML がある。FireFox や Safariではサポートされているようだが、Chrome や Edge ではサポートされておらず、そのままでは表示できない。このため、別の方法をとることにした。

MathJax

数式をJavaScriptが利用できるブラウザで描画できるものとして MathJax がある。ブラウザを選ばず表示でき、LaTeXの表記の多くも使える。

使い方

スクリプト

次のスクリプトを数式を含むページに書いておくことで、MathJaxが使えるようになる。

行内数式

行内に数式を埋め込むためには \\( と \\) で数式表記を括れば良い。

たとえば、次の記述があると

次のように表示される。

円の面積\(A\)は、\( A=\pi r^2 \)と表すことができる。ここで\(r\)は、半径である。

独立した数式

独立した数式の場合には \\[ と \\] で数式表記を括れば良い。

次の記述があると

次のように表示される。

\[ f\left(x\right)=a_0+\sum_{n=1}^{\infty}\left(a_n\cos{\frac{n\pi x}{L}}+b_n\sin{\frac{n\pi x}{L}}\right) \]

数式の改行

MathJax 3 では、自動改行がサポートされていないようである。

また、\\\\だけではうまく改行ができない。\\displaylines を使う必要があるようだ。

次の記述で

次のように表示される。

\[ \displaylines{ \left(x+y\right)^2 &=\left(x+y\right)\left(x+y\right) \\ &=x^2+2xy+y^2 } \]

MathJaxのコマンド

MathJaxによる数式表示MathJax で利用可能なTeXコマンド(非公式)が参考になる。

WebでのWordやExcelの表の利用

WordやExcelの表は、エクセルからテーブル(html)作成ツール を利用することで基本的な部分を HTML に変換することができる。

表と数式を組み合わせた例を次に示す。

  \[L_1\] \[L_2\]   \[L_j\]   \[L_N\]
\[L_1\] \[c_{11}\] \[c_{12}\] \[\cdots\] \[c_{1j}\] \[\cdots\] \[c_{1N}\]
\[L_2\] \[c_{21}\] \[c_{22}\]       \[c_{2N}\]
  \[\vdots\]   \[\ddots\]     \[\vdots\]
\[L_i\] \[c_{i1}\]     \[c_{ij}\]   \[c_{iN}\]
  \[\vdots\]       \[\ddots\] \[\vdots\]
\[L_N\] \[c_{N1}\] \[c_{N2}\] \[\cdots\] \[c_{Nj}\] \[\cdots\] \[c_{NN}\]