Mathjax automatic line-breaking when resizing

问题

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

How to compute them dynamically every time window size is changed?

For example I have the following code:

<!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:

回答1:

Essentially, you need to listen to resize events and call on MathJax to re-render when neccessary.

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.

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.

回答2:

The answer from Peter Krautzberger is good, but I would like to improve it. So, please read his answer first, and then continue.

The problem with listening to `resize`

The issue in Peter's answer is that resize will trigger every time the browser's window changes in size. So, if you start changing the size of the window, every change, will trigger the event. The final result is that your rerender call will be issues many times as the user resizes the window, leading to flickering annoying effect.

Solution

You need to avoid that side effect by using a timeout and performing the action only when the user has finished resizing the window, not while he is in the middle of it:

<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}$$

This way the experience is smoother :)

来源：https://stackoverflow.com/questions/40628064/mathjax-automatic-line-breaking-when-resizing

标签

html