调整大小时Mathjax自动换行 [英] Mathjax automatic line-breaking when resizing
问题描述
我在MathJax文档中读到了自动换行符
I read in MathJax docs that automatic line-breaks
仅在最初排版等式时才计算一次，并且如果用户更改窗口大小则不会更改
are only computed once when the equation is initially typeset, and do not change if the user changes the window size
如何在每次更改窗口大小时动态地计算它们?
例如，我有以下代码:
<!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>
如果我以全角加载此页面然后调整窗口大小，会发生什么情况?
What is happening if I load this page at full width and then resize window:
如果可能，我想动态添加换行符:
If it is possible, I would like to dynamically add line breaks:
推荐答案
本质上，您需要收听resize事件，并在必要时调用MathJax重新呈现.
Essentially, you need to listen to resize events and call on MathJax to re-render when neccessary.
蛮力示例可能类似于以下代码段(请注意:这不适用于SO的代码段渲染，请尝试此Codepen版本)
A brute force example might look like the following snippet (note: this doesn't work on SO's snippet rendering, try 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}$$
请注意，这效率极低-在每次调整大小事件时，它都会重新渲染所有内容.
Note that this is horribly inefficient -- it re-renders everything at every resize event.
更明智的方法是限制事件，并且只会重新渲染太大而无法容纳其父元素的元素.有关此示例，请参见此codepen .
A more sensible approach would throttle the events and would only re-render those elements that are too large to fit into their parent. See this codepen for a an example of this.
这篇关于调整大小时Mathjax自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
