调整大小时Mathjax自动换行

时间：2016-11-16 09:14:15

标签： html css resize mathjax

我在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>

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

enter image description here

如果有可能，我想动态添加换行符：

enter image description here

2 个答案:

答案 0 :(得分：1)

基本上，您需要收听resize个事件，并在必要时调用MathJax重新呈现。

暴力示例可能看起来像以下代码段（请注意：这不适用于SO＆＃39的代码段渲染，请尝试this codepen version）

＆＃13;
＆＃13; 
<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}$$
＆＃13;
＆＃13;
＆＃13;

请注意，这非常低效 - 它会在每次调整大小事件时重新呈现所有内容。

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

答案 1 :(得分：0)

彼得·克劳茨贝格（Peter Krautzberger）的回答很好，但我想改进它。因此，请先阅读他的答案，然后继续。

听resize

的问题

彼得回答中的问题是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}$$

这样，体验会更流畅：）

相关问题
最新问题