Mathjax自動改行

のサイズを変更する際、私は式が最初にタイプセットされたときに一度だけ計算され、ユーザーがウィンドウサイズ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>

を：

ことが可能である場合には、私は動的に改行を追加したい：

出典

2016-11-16 CMTV

将来の注意：cdn.mathjax.orgの寿命が近づいているので、移行のヒントについてはhttps://www.mathjax.org/cdn-shutting-down/をチェックしてください。 –

本質的には、resizeのイベントを聞いて、必要なときに再描画するためにMathJaxを呼び出す必要があります。

ブルートフォース例は、以下のスニペット（注：これはthis codepen versionを試し、SOのスニペットのレンダリングでは動作しません）のようになります。これは恐ろしく非効率的であることを

<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を参照してください。

出典

2016-11-16 11:13:41

答えて

関連する問題