数式の入力

囲碁の数理の連載で数式を書くことがしばしばあります。簡単な式はブログでも書けるのですが、ちょっと複雑になると書けません。これまでは主にExcelシート上に式をレイアウトして、[Print Screen]キーで画像をペイントに取り込んでトリミングし、ブログにイメージとして貼る。という作業を行っていました。
HTML5にはMathML(マスエムエル)という言語が直接書き込めるとのことだったので、試してみました。ただし、IEやChromeは未サポートとのことで、AppleのブラウザSafariをインストールしました。
MathML
上図のソースは以下のとおりです。なぜか文字がギリシャ文字に、反転を表す上線が矢印に化けてしまっています。

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>MathMLサンプル</title>
</head>
<body>
<math>
 <mi mathvariant=”bold-italic”>x</mi>
 <mo>=</mo>
 <mover>
  <mi mathvariant=”bold-italic”>l</mi>
  <mo accent=”false”>¯<!– ¯ –></mo>
 </mover>
 <mo>−<!– − –></mo>
 <mi mathvariant=”bold-italic”>v</mi>
</math>
</body>
</html>

そこで、IEやChromeでも動作するMathJax(マスジャックス)というJavascriptで書かれた数式整形スクリプトを試してみました。
MathJax+MathML
今度のソースはさきほどと前半がちょっと違っているだけですが、うまく表示できました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MathJaxおよびMathMLサンプル</title>
<script type="text/x-mathjax-config">
 MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
 src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
 <mi mathvariant="bold-italic">x</mi>
 <mo>=</mo>
 <mover>
  <mi mathvariant="bold-italic">l</mi>
  <mo accent="false">¯<!-- ¯ --></mo>
 </mover>
 <mo>−<!-- − --></mo>
 <mi mathvariant="bold-italic">v</mi>
</math>
</body>
</html>

MathJaxはMathMLだけでなくTeX(テフ)という組版ソフトの書式もサポートしています。論文を書く場合などにはかなりTeXは活用されていると思います。MathJaxで数式を書いておくと、MathMLにもTeXにも簡単に変換できます。ということで、MathJaxとTeXでさきほどの式を書いてみます。今度はIE9で表示してみました。
MathJax+TeX
こちらのソースは以下のようになります。数式の部分は実質1行で、内容もわかりやすいですね。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MathJaxおよびTeXサンプル</title>
<script type="text/x-mathjax-config">
 MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
 src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
$$
\boldsymbol{x} =\overline{ \boldsymbol{l}}- \boldsymbol{v}
$$
</body>
</html>

さらに、Google Chrome Web StoreにDaum Equation Editorというフリーソフトがあり簡単にTeXのコードを作ることができます。
Daum Equation Editor
このほかにも数式エディタは多数あると思います。
HTML5のMathMLがまだサポートされていない現状では、MathJaxとTeXで数式を書いておけば、式も簡単だし、将来MathMLにも変換できるので、今はMathJaxとTeXの組合せが一番いいように思いました。
囲碁の数理でたくさんの数式を使っていますので、MathJaxとTeXを使って一度まとめておきたいと思います。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。