数式に出現するスクロールバーの検証

$で囲んだインライン数式にスクロールバーが出現する条件を見る。ブラウザはEdgeとChromeで確認。

ソース	表示	スクロールバー
$a$	$a$	なし
$a^b$	$a^b$	なし
$a_b$	$a_b$	上下左右
$a_0$	$a_0$	左右のみ
$a^{b^c}$	$a^{b^c}$	なし
$a^{b_c}$	$a^{b_c}$	左右のみ
$a^{b^{c^{d^{e^f}}}}$	$a^{b^{c^{d^{e^f}}}}$	なし
$a_{b_{c_{d_{e_f}}}}$	$a_{b_{c_{d_{e_f}}}}$	上下左右
$a^{\frac{1}{2}}$	$a^{\frac{1}{2}}$	なし
$a_{\frac{1}{2}}$	$a_{\frac{1}{2}}$	上下左右
$a^{1+2+\cdots+n}$	$a^{1+2+\cdots+n}$	なし
$a^{1^2+2^2+\cdots+n^2}$	$a^{1^2+2^2+\cdots+n^2}$	なし
$\mathbb{R}$	$\mathbb{R}$	上下のみ

上添え字はスクロールバーが付かないが下添え字は付く。

roiban

数式が埋め込まれている箇所のソースを辿ると、

.znc embed-katex {
    display: inline-flex;
    overflow-x: auto;
    max-width: 100%;
}

DevToolsからこのスタイルのoverflow-xを切ってデフォルトのvisibleに切り替えると上下左右方向どちらもスクロールバーは消える。

roiban

なぜ overflow-x を切るだけで上下方向も消えるのだろう、と思ったら上のMDNのページのValuesの項に記載がある：

visible
Content is not clipped and may be rendered outside the padding box's left and right edges. If overflow-y is hidden, scroll or auto and this property is visible, it will implicitly compute to auto.

確かにoverflow-xを切るまではどちらもautoだが、切ると両方ともvisibleへ変化する。

roiban

しかし何故下添え字が既定の枠をはみ出していると処理される一方で、上添え字はそうはならないのだろう……

roiban

WindowsとMacでも見た目が異なっていた。ブラウザはEdgeに揃えてスクリーンショット。

Windows10

macOS Big Sur

Mac環境でもスクロールバーは出ているが、カーソルが外れている時は表示されない。

roiban

Zennエディターのソースは公開されている。

zenn-editor/packages/zenn-content-css/src/_embed.scss

// prevent katex overflow
// for inline $foo$
embed-katex {
  display: inline-flex; // Don't use inline-block here.
  overflow-x: auto;
  max-width: 100%;
}
// for block
// $$
// foo
// $$
embed-katex[display-mode='1'] {
  display: block;
  width: 100%;
}

インライン数式：

<embed-katex>

$a_i$

別行立て数式：

<embed-katex display-mode="1">

a_i

roiban

例：

素数全体を2つのグループに分け、 $p_1, \dots, p_k$ を「小さい」素数、 $p_{k+1}$ 以降を「大きい」素数と呼ぶことにする。 $N$ 以下の自然数で、「大きい」素数で割れる数と、「小さい」素数でしか割れない数に分け、前者の個数を $N_1$ 、後者の個数を $N_2$ とおく。当然 $N = N_1 + N_2$ である。

素数が無数に存在することの証明 - Wikipedia

roiban

Zenn公式にバグ報告としてIssueを立てたところ、1日足らずで修正のリリースまで行っていただいたのでクローズ。

ありがとうございました！

このスクラップは2021/09/28にクローズされました