打破大型数学内容以适应容器宽度答案

【问题标题】：Break large mathml content to fit in container width打破大型数学内容以适应容器宽度
【发布时间】：2017-09-19 13:03:58
【问题描述】：

我正在使用 MathJax 将 mathml 转换为 svg。某些设备使用的 SVG 渲染它。

html内容

<!doctype html>
<html>
<head>
  <meta charset='UTF-8'>
  <style>
    body {
      font-size: 2em;
    }
  </style>
<script type="text/javascript"
          src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
  </script>

</head>
<body>
 <math  xmlns='http://www.w3.org/1998/Math/MathML'>
  <mrow>
    <mfrac><mn>1</mn><mn>2</mn></mfrac>
    <msub><mi>m</mi><mn>1</mn></msub>
    <msubsup>
      <mi>u</mi>
      <mn>1</mn>
      <mn>2</mn>
    </msubsup>
  </mrow>
  <mo>+</mo>
  <mrow>
    <mfrac><mn>1</mn><mn>2</mn></mfrac>
    <msub><mi>m</mi><mn>2</mn></msub>
    <msubsup>
      <mi>u</mi>
      <mn>2</mn>
      <mn>2</mn>
    </msubsup>
  </mrow>
  <mrow>
  <mtext>
  Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf 
  Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf  Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf Aasdf 
  </metxt>
  </mrow>
</math>
<div>
</body>
</html>

由于 MathJax 仅在单行中呈现单个 mathml，因此在浏览器中我们可以使用滚动条来查看完整的 mathml。在我的情况下，设备无法显示滚动条，因此它会减小字体大小以显示在单行中。

我知道 mathjax 有一些我们可以控制它的配置。

  MathJax.Hub.Config({
                              CommonHTML: { linebreaks: { automatic: true } },
                              "HTML-CSS": { linebreaks: { automatic: true } },
                                     SVG: { linebreaks: { automatic: true } }
                            });

这对我不起作用。我们如何让 Mathml 响应式？

谁能建议我如何打破长 mathml 以适应容器宽度。

谢谢

【问题讨论】：

标签： html css svg mathjax mathml

【解决方案1】：

MathJax 的换行算法是用于中断数学，而不是文本。所以它不会在<mtext> 元素中换行。（MathJax 不会破坏任何标记元素；它只会破坏 <mo> 元素的数学，如果可以的话。）

从您的示例中不清楚如何使用 <mtext> 中的长文本（因为它只是假文本），但看起来文本可能是周围句子的一部分，而不是数学本身。如果是这样，您不应该将其作为数学的一部分，而应作为没有周围 HTML 的文本。

【讨论】：

MathJax 总是将高度和宽度信息添加到生成的 svg 元素中，高度值太小而无法容纳单行的内容。它实际上是如何计算高度的。顺便说一句，高度和宽度单位总是在 ex 中，mathjax 是否有任何选项来配置生成的单位。
我对您的评论感到困惑。增加高度会使线更宽，所以我看不出它太小了。计算高度和宽度以匹配数学中“x”的高度与周围文本中的“x”高度。这就是它以“ex”为单位给出的原因之一。没有机制可以将其更改为其他单位。