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

こんにちはコーヤです。

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

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

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

追加CSSの編集方法

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

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

Method1. Mathjaxをスクロールさせる方法

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

Method1のメリットはリライトが必要ないことです。追加CSSにコードをコピペするだけでこれまでに書いた数式もスクロール表示されます。下で紹介するMethod2とMethod3はリライト作業が面倒なため、これまで書いた数式が多い人ほどMethod1がおすすめです。

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

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

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

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

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

Method1のコードは以下のとおりです。

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

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

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

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

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

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

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

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

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

Method2のコードは以下のとおりです。

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

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

Method3はMethod2の改良版です。

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

以下の画像のとおり、余白ができています。

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

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

Method3のコードは以下のとおりです。

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

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