数式に出現するスクロールバーの検証
roiban$で囲んだインライン数式にスクロールバーが出現する条件を見る。ブラウザはEdgeとChromeで確認。
| ソース | 表示 | スクロールバー |
|---|---|---|
$a$ |
なし | |
$a^b$ |
なし | |
$a_b$ |
上下左右 | |
$a_0$ |
左右のみ | |
$a^{b^c}$ |
なし | |
$a^{b_c}$ |
左右のみ | |
$a^{b^{c^{d^{e^f}}}}$ |
なし | |
$a_{b_{c_{d_{e_f}}}}$ |
上下左右 | |
$a^{\frac{1}{2}}$ |
なし | |
$a_{\frac{1}{2}}$ |
上下左右 | |
$a^{1+2+\cdots+n}$ |
なし | |
$a^{1^2+2^2+\cdots+n^2}$ |
なし | |
$\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. Ifoverflow-yishidden,scrollorautoand this property isvisible, it will implicitly compute toauto.
確かにoverflow-xを切るまではどちらもautoだが、切ると両方ともvisibleへ変化する。
roibanしかし何故下添え字が既定の枠をはみ出していると処理される一方で、上添え字はそうはならないのだろう……
roibanWindowsとMacでも見た目が異なっていた。ブラウザはEdgeに揃えてスクリーンショット。
Windows10
macOS Big Sur
Mac環境でもスクロールバーは出ているが、カーソルが外れている時は表示されない。
roibanZennエディターのソースは公開されている。
// 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>
別行立て数式：
<embed-katex display-mode="1">
例：
素数全体を2つのグループに分け、
roibanZenn公式にバグ報告としてIssueを立てたところ、1日足らずで修正のリリースまで行っていただいたのでクローズ。
ありがとうございました！