让过长的 KaTeX 公式支持横向滚动

发表于 分类于 阅读次数： 本文字数： 845 阅读时长 ≈ 2 分钟
让 KaTeX 支持隐藏式滚动

在博客中，我一直使用 KaTeX 进行数学公式的渲染。但是有一个问题，当行间公式过长时，公式会超出边界，导致整个页面过宽。这点在电脑上没什么问题，但是在移动端就成了灾难，整个页面显示都有问题。

之前的解决方法是手动换行，但是不同的手机支持的最大宽度不同，而且有些公式实在是不方便换行（比如一个大长分式）。而且即使是能够换行，虽然在手机上没问题了，但是由于这些奇怪的换行，在电脑上看总觉得奇奇怪怪的。

找了一圈，最终的解决方法还是让 KaTeX 支持横向滚动，这样在公式过长的时候，会自动出现滚动条，这样就不会影响整个页面的宽度了。

官网给出了一个解决方法，即在 source/_data/styles.styl 中添加如下配置：

1
.katex-display { overflow: auto hidden }

但这带来了一个问题，就是在某些缩放比例下，生成的公式最上面和最底下有几个像素被吞掉。

例如，下面左侧是在 100% 缩放下的公式，右侧是在 110% 缩放下的公式。二者对比就可以明显发现，左侧最上面少了一些像素，其中字母 C 尤为明显。而两侧最下面都少了一些像素（还是字母 C 最为明显）。

100%缩放
110%缩放

问了一下 DeepSeek，给出的解决方法是给予额外的边距补偿：

1
2
3
4
.katex-display {
  overflow: auto hidden;
  padding: 1px 0;
}

这样显示的公式就是正常的了：

另外，在手机上显示滚动条还是比较丑的，我们可以把它隐藏掉：

1
2
3
4
5
6
7
8
@media (max-aspect-ratio: 2400/1850) {
  .katex-display {
    scrollbar-width: none; /* Firefox */
  }
  .katex-display::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }
}

这样就可以隐藏 KaTeX 公式的水平滚动条（但保持可滚动）。