【Mathjax】数式をスクロール表示させる方法3選

こんにちはコーヤです。

このページでは、Mathjaxの数式が画面からはみ出ないようにスクロール表示させる方法を3つご紹介します。

ご紹介する方法3つとも追加CSSにコードをコピペするだけの簡単な方法です。

それぞれメリットデメリットがありますので、ご自身にあった方法をお選びください。

追加CSSの編集方法

最初に追加CSSの編集方法をご紹介します。

追加CSSの編集方法は以下の5ステップです。

以下でご紹介する方法は3つとも追加CSSへコードをコピペすればOKです。

方法1. 数式をスクロールさせる方法

方法1は数式そのものをスクロール表示させます。

方法1のメリット

方法1のメリットはリライトが必要ないことです。追加CSSにコードをコピペするだけでこれまでに書いた数式もスクロール表示されます。

下で紹介する方法2と方法3はリライト作業が面倒なため、これまで書いた数式が多い人ほど方法1がおすすめです。

方法1のデメリット

方法1のデメリットは2つあります。式番号が使えなくなることと、スクロール当たり判定が小さいことです。

デメリット1つ目の式番号が使えなくなるのは以下の画像のとおりです。

Mathjaxの式番号コード \tag{1} を使うと数式の右端に式番号がふられますが、スクロール表示ができなくなってしまいます。

デメリット2つ目の当たり判定が小さいことについて、数式そのものにスクロールの当たり判定がついています。

上の画像のように数式が1行で細い場合、スクロールの当たり判定が思ったより小さいです。PCではあまり気になりませんが、スマホの場合はスクロールしにくくてストレスを感じます。

方法1のコード

方法1のコードは以下のとおりです。

mjx-container {
	overflow-x: auto;
	overflow-y: hidden;
}

方法2. ボックスをスクロールさせる方法

方法2は数式を囲うボックスをスクロール表示させます。

白抜きボックスはスクロール設定なし、付箋風ボックスをスクロール設定ありで表示すると以下の画像のようになります。

方法2のメリット

方法2のメリットはスクロール当たり判定が大きいことです。上記の方法1のデメリットを解消しています。

数式を囲うボックス全体がスクロールの当たり判定になるため、PCでもスマホでもスクロールしやすいです。

方法2のデメリット

方法2のデメリットは2つあります。数式をボックスで囲まなければいけないことと、数式右端の余白が設定できないことです。

デメリット1つ目の数式をボックスで囲まなければいけないことについて、作業が面倒になります。これから書く数式もボックスで囲う手間が増えますし、これまで書いた数式が多い人ほどいちいちボックスで囲うようにリライトするのは面倒でしょう。

デメリット2つ目の数式右端の余白が設定できないことについて、以下の画像のように最終項$+z$の右端に全く余白がない状態で表示されます。

方法2のコード

方法2のコードは以下のとおりです。

.blank-box.sticky {
	overflow-x: auto;
	overflow-y: hidden;
}

方法3. ボックスをスクロールさせつつ数式右側に余白を作る方法

方法3は方法2の改良版です。

方法2のデメリットの数式右端の余白が設定できないことを解消するべく、数式右側に強制的に余白を作ります。

方法3のメリット

方法2では余白がありませんでしたが、方法3では以下の画像のとおり余白ができています。

方法3のデメリット

方法3のデメリットは文中に使う数式にも余白ができてしまうことです。

数式の右側に強制的に余白を作るため、以下のような文中で使う数式にも余白が適用されてしまいます。

方法3のコード

方法3のコードは以下のとおりです。

.blank-box.sticky {
	overflow-x: auto;
	overflow-y: hidden;
}
.MJX-TEX > [class*="mjx"]:last-child {
  margin-right: 20px;
}

メリットデメリットまとめ