MathJax - 数式を左寄せにする方法

MathJaxを使って、Web上に表示した数式を左寄せにする方法を紹介します。

デフォルトの設定では数式は真ん中に（センタリング）表示されます。サイトのデザインや利用しているブラウザーの解像度にもよりますが、Web上の数式は、少しインデントを入れて左寄せしたほうが見やすいと思います（たぶん）。

そこで、ここでは「CSSで数式を左寄せ」「x-mathjax-configで数式を左寄せ」する2つの方法を紹介します。

まずはCSSからみていきましょう。

CSSで数式を左寄せ

MathJaX のクラス名を指定し、強制的に（!important）数式を左寄せします。

.MathJax_Display {
  text-align: left !important;
  text-indent: 2em !important;
}

大体の場合はこの方法で問題ないですが、数式に式番号（\tag{*}）を入れるとその数式だけ左寄せされません。

こちらのサンプルページをご覧ください。

「CSSで数式を左寄せ」のサンプル

そんな場合は以下の方法を試してみましょう。

x-mathjax-configで数式を左寄せ

以下のページを参考にしました。

• https://groups.google.com/forum/#!msg/mathjax-users/yPRnSGxFIfI/WP19jjczB6QJ

以下のように「x-mathjax-config」を明示的に設定します。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  displayAlign: "left",
  displayIndent: "2em"
});
</script>

こちらのサンプルページをご覧ください。

「x-mathjax-configで数式を左寄せ」のサンプル

これで適切に数式が左寄せされましたね。

以上、「MathJax - 数式を左寄せにする方法」でした。