【MathJax】長い数式をスマホで横スクロール可能にする方法【はみ出し防止】

MathJaxの数式が長くなると、スマートフォンで見たときに横にはみ出してしまいますよね。

こんな感じで、本来ならコンテンツが入るべきでない右横のスペースに数式が突き出してしまいます。

いや、このレベルの長さだと、もはやPCでもはみ出してしまいます。

読者が見やすくするためには、数式が横方向にスクロールできたらいいですよね。

ということで実際に横スクロールできるようにしたのが、こちらです。

\[x^{11}+x^{10}+x^9+x^8+x^7+x^6+x^5+x^4+x^3+x^2+x+1=\left(x+1\right)\left(x^2+1\right)\left(x^2+x+1\right)\left(x^2-x+1\right)\left(x^2+\sqrt{3}x+1\right)\left(x^2-\sqrt{3}+1\right)\]

このページでは、MathJaxの長い数式をスクロール可能にする方法をご紹介します。

手順① CSSを編集する
手順② 数式コードを書くときにHTMLを編集する
スクロールできることを明示すべきかも
まとめ

手順① CSSを編集する

まず、CSSに以下のようなコードを追加します。

CSS

.math-scroll {	overflow-x: auto;
}

.math-scrollのmath-scrollの部分は、すきな文字列でOKです。CSSの他の要素と名前が被らない範囲で、それっぽい名前にしましょう。

上のコードをマルっとコピーして貼り付ければ準備完了です！

ここで一応、コードの内容についても少し触れておきます。

プロパティoverflow-xを使うと、横方向にコンテンツがはみ出したときの処理を指定できます。指定できる内容は次のとおりです。

overflow-x: visible;※初期値
はみ出したらはみ出したままにする
overflow-x: hidden;
はみ出した部分が隠れる
overflow-x: scroll;
コンテンツがはみ出したらスクロールできるようにする
overflow-x: auto;
はみ出た部分の扱いをブラウザに任せる（スクロール）

ここで、

「overflow-x: scroll;でもいいのでは？」「むしろそっちの方がソレっぽいのでは？」

というツッコミを入れたくなるかもしれません。

ではなぜoverflow-x: scroll;を使わないのかというと、スクロールする必要のない時でもスクロールバーが表示されてしまい、かっこ悪いからです（PC表示の場合）。

余談が長くなりましたが、とにかくCSSコードをコピペして追加すればOKです！

手順② 数式コードを書くときにHTMLを編集する

「HTMLを編集する」というのは少し大げさで、ただ単に<div class="math-scroll">と</div>でMathJaxの数式を囲むだけです。

冒頭の \(x^{11}+x^{10}+\) …の因数分解の等式のコードなら、次のようにHTMLを書きます。

HTML

<div class="math-scroll">
\[x^{11}+x^{10}+x^9+x^8+x^7+x^6+x^5+x^4+x^3+x^2+x+1=\left(x+1\right)\left(x^2+1\right)\left(x^2+x+1\right)\left(x^2-x+1\right)\left(x^2+\sqrt{3}x+1\right)\left(x^2-\sqrt{3}+1\right)\]
</div>

▼実際の表示▼

\[x^{11}+x^{10}+x^9+x^8+x^7+x^6+x^5+x^4+x^3+x^2+x+1=\left(x+1\right)\left(x^2+1\right)\left(x^2+x+1\right)\left(x^2-x+1\right)\left(x^2+\sqrt{3}x+1\right)\left(x^2-\sqrt{3}+1\right)\]