如何使用 mathjax 使公式响应

Question

我在响应式网站中显示数学表达式时遇到了很大的问题。特别是，如果您访问 this page with a smartphone, you can see that most of the math expressions are cut off due to responsive design. I'm using Joomla and the Jextbox Equation plugin 以显示它们。

我希望我页面上的公式表现得像 this one on Wikipedia。如果您在智能手机中打开此页面，您会发现公式太长的地方没有被截断。如果您从左向右滚动，它们就会显示出来。我想在我的页面上做同样的事情。

Answer 1

来自 the documentation 关于激活 MathJax 的换行符：

The HTML-CSS and SVG output processors implement (most of) the MathML3 >automatic line-breaking specification. (The NativeMML output processor relies on the browser’s native MathML support to handle line breaking when it is used.) Since line-breaking takes extra processing and so can slow down the mathematical output, it is off by default, but you can enable it by adding

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
 "HTML-CSS": { linebreaks: { automatic: true } },
         SVG: { linebreaks: { automatic: true } }
});
</script>

to your page just before the tag that loads MathJax.js itself.

但是，在您的示例中，有很多表格数学，即使用 <mtables> 的布局（尽管使用 TeX 作为输入的人通常不知道，MathJax 在内部将所有输入转换为 MathML）。

问题是：mtables 真的不能断行，就像 html 表不能断行一样——响应式表需要一些 JS 帮助，更重要的是，额外的语义标记.

PS：就其价值而言，我们实际上正在研究数学的语义启发式方法，以做比换行更好的事情，但这是正在进行的研发，没有预计到达时间。

Answer 2

我访问了 user3700643 的 page 发现仍然存在问题---当我在 320×487 下使用 Firefox 的响应式设计视图时。我知道我的解决方案是愚蠢的，因为它需要一些重复，但我不仅将它与 MathJax（刚刚）一起使用，而且在过去用于 tables 和其他东西---全部在 Twitter Bootstrap 网格环境，但我很确定这无关紧要。

我一直在用CSS3 @media Rule。这是我的特定版本：

@media(max-width:768px){
  .wide {display:none;}
  .mobilefont {font-size:0.8em;}
}
@media(min-width:768px){
  .tight {display:none;}
}

我只是加入了 mobilefont 位，以进一步激发您的灵感。我有时会用它。所以，我所做的是包装一个等式---我将 Latex 与 MathJax 一起使用---带有 div 并给 div class "wide" 如果等式针对宽屏幕进行格式化，"tight" 如果针对小屏幕进行格式化。您可以看到 CSS3 中的 max-width/min-width 值如何根据屏幕宽度大于或小于 768px 影响具有那些 class 名称的 div 的消失，这是流行的断点（但其他断点可以由您定义）。

也就是说，我复制了我的大屏幕 \begin{align}\end{align} 块。我将副本粘贴在原件的正下方，并用 div 包裹每个，并为两个 div 赋予这两个 class 名称。然后，我编辑名称为 "tight" class 的那个，使其在响应式设计视图中以小屏幕尺寸工作。

我也在 MathJax 上下文之外使用普通 tables 完成了此操作。例如，我在 table 给定列的每个中使用使该列在小屏幕设备上消失。

在您有 "L'integrale di partenza sarà allora la somma degli integrali sui due domini" 的页面上，在您的 "tight" div 版本中，如果您使用的是 \begin{align}\end{align} 块（但我看到你实际上正在使用 \begin{eqnarray*} ，我没有用这个方案测试过），只需在左边的双积分前面放一个＆符号，然后在那个积分之后换行符 \\换行。并在每行的每个等号前加上 & 符号。这样，以等号开头的行将向左移动很远，在积分表达式下方而不是右侧对齐。

我认为这不会太混乱。这只是有点不正统。但是请参阅我对 Peter Krautzberger 的回答的评论......我发现当我使用＆符号时他的脚本不起作用。但关键是我的 CSS3 方法根本不需要它，因为我只是自己指定了所有重新格式化。

Answer 3

您可以使用 css 实现此目的，如下所示：

mjx-container mjx-math {
    white-space: normal;
}

Answer 4

您需要做的就是利用响应式 table。自定义您的 table 并解决问题。例如，如果您使用 Wordpress，则使用插件“WP Responsive Table”。如果您自己编写网站代码，请使用 Bootstrap 响应式 Table。如果需要使用透明边框并在 table.

中添加 MathJax 代码

如何使用 mathjax 使公式响应

How to make formula with mathjax responsive

joomla

mathjax

responsive-design