调整大小时 Mathjax 自动换行答案

【问题标题】：Mathjax automatic line-breaking when resizing调整大小时 Mathjax 自动换行
【发布时间】：2019-05-13 14:33:13
【问题描述】：

我在 MathJax 文档中读到自动换行符

仅在公式最初排版时计算一次，并且如果用户更改窗口大小则不会更改

如何在每次改变窗口大小时动态计算它们？

例如我有以下代码：

<!DOCTYPE html>
<html>
<head>
<title>MathJax auto line-breaking</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  CommonHTML: { linebreaks: { automatic: true } },
  "HTML-CSS": { linebreaks: { automatic: true } },
         SVG: { linebreaks: { automatic: true } }
});
</script>
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
<style>
#site-content {
    width: 70%;
    margin: 0 auto;
    border: 1px solid black;
}
</style>
</head>
<body>
    <div id="site-content">
    <p>Some cool text about math</p>
    \begin{equation}
        f(u_1) = f(u_0) + hf'(u_0)+{h^2\over 2!}f''(u_0) + \cdots + {h^{n+1}\over (n+1)!}f^{(n+1)}(u_0) + o(h^{n+1})
    \end{equation}
    <p>More cool text</p>
    \begin{equation}
        f(u_1) = f(u_0) + hf'(u_0)+{h^2\over 2!}f''(u_0) + \cdots + {h^{n+1}\over (n+1)!}f^{(n+1)}(u_0) + o(h^{n+1})
    \end{equation}
    <p>More cool text</p>
    \begin{equation}
        f(u_1) = f(u_0) + hf'(u_0)+{h^2\over 2!}f''(u_0) + \cdots + {h^{n+1}\over (n+1)!}f^{(n+1)}(u_0) + o(h^{n+1})
    \end{equation}
    <p>...</p>
    </div>
</body>
</html>

如果我以全宽加载此页面然后调整窗口大小会发生什么：

如果可以的话，我想动态添加换行符：

【问题讨论】：

未来注意事项：cdn.mathjax.org 即将结束生命周期，请查看mathjax.org/cdn-shutting-down 了解迁移提示。

标签： html css resize mathjax

【解决方案1】：

基本上，您需要监听 resize 事件并在必要时调用 MathJax 以重新渲染。

蛮力示例可能类似于以下 sn-p（注意：这不适用于 SO 的 sn-p 渲染，请尝试 this codepen version）

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    "SVG": {linebreaks: { automatic: true }}
  });
window.addEventListener('resize', MJrerender);
function MJrerender(){
MathJax.Hub.Queue(["Rerender",MathJax.Hub])
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_SVG-full"></script>

<h1> Line-breaking should happen on window resize</h1>

$$a_1 + a_2 + a_3 + a_4 + a_5 + a_6 + a_7 + a_8 + a_9 + a_{10} + a_{11} + a_{12} + a_{13} + a_{14} + a_{15} + a_{16} + a_{17} + a_{18} + a_{19} + a_{20}$$

请注意，这是非常低效的——它会在每次调整大小事件时重新渲染所有内容。

一种更明智的方法会限制事件，并且只会重新渲染那些太大而无法放入其父级的元素。有关此示例，请参阅 this codepen。

【讨论】：

【解决方案2】：

Peter Krautzberger 的回答很好，但我想改进它。所以，请先阅读他的回答，然后再继续。

收听`resize`的问题

Peter 的回答中的问题是resize 将触发每次浏览器的窗口大小发生变化。所以，如果你开始改变窗口的大小，每一次改变，都会触发事件。最终结果是，当用户调整窗口大小时，您的重新渲染调用将多次出现问题，从而导致闪烁烦人的效果。

解决方案

您需要通过使用超时来避免这种副作用，并且仅在用户完成调整窗口大小时才执行操作，而不是在他处于窗口中间时：

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    "SVG": {linebreaks: { automatic: true }}
  });
window.addEventListener('resize', MJrerender);

let t = -1;
let delay = 1000;
function MJrerender() {
  if (t >= 0) {
    // If we are still waiting, then the user is still resizing =>
    // postpone the action further!
    window.clearTimeout(t);
  }
  t = window.setTimeout(function() {
    MathJax.Hub.Queue(["Rerender",MathJax.Hub]);
    t = -1; // Reset the handle
  }, delay);
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_SVG-full"></script>

<h1> Line-breaking should happen on window resize</h1>

$$a_1 + a_2 + a_3 + a_4 + a_5 + a_6 + a_7 + a_8 + a_9 + a_{10} + a_{11} + a_{12} + a_{13} + a_{14} + a_{15} + a_{16} + a_{17} + a_{18} + a_{19} + a_{20}$$

这样体验更流畅:)

【讨论】：

收听resize的问题

解决方案

收听`resize`的问题