在不同浏览器中使用 MathJax 进行的 MathML 渲染不一致

Question

我正在使用 better-react-mathjax ^2.0.2 （与 MathJax 3.2.2）在基于 React 的项目中渲染数学表达式。但是，我面临一个问题，某些表达式在不同浏览器（Chrome、Firefox、Safari）上呈现不同的效果。

PS：我们使用 MathML 进行渲染。我们设置dynamic=false，如here所述。

示例1：

MathML 代码

<math>
   <mrow>
      <mtable rowalign="center" columnalign="left" rowlines="dashed none" columnlines="solid">
         <mtr>
            <mtd>
               <mi>x</mi>
            </mtd>
            <mtd>
               <mi>y</mi>
            </mtd>
         </mtr>
         <mtr>
            <mtd>
               <mn>1</mn>
            </mtd>
            <mtd>
               <mn>2</mn>
            </mtd>
         </mtr>
         <mtr>
            <mtd>
               <mn>3</mn>
            </mtd>
            <mtd>
               <mn>4</mn>
            </mtd>
         </mtr>
         <mtr>
            <mtd>
               <mn>5</mn>
            </mtd>
            <mtd>
               <mn>6</mn>
            </mtd>
         </mtr>
      </mtable>
   </mrow>
</math>

Chrome 屏幕截图

火狐截图

Safari 截图 

示例2

MathML 代码

<math>
   <mrow>
      <msub>
         <mrow>
            <mi>
               <mi mathvariant="normal">l</mi>
               <mi mathvariant="normal">o</mi>
               <mi mathvariant="normal">g</mi>
            </mi>
         </mrow>
         <mrow>
            <mn>2</mn>
         </mrow>
      </msub>
      <mo>⁡</mo>
      <mi>x</mi>
   </mrow>
</math>

Chrome截图 

火狐截图 

Safari 截图 

我正在寻求有关如何确保不同浏览器中所有元素的一致渲染行为的建议。我应该在 better-react-mathjax 库中配置一些特定的东西来解决这个问题吗？

我尝试了https://docs.mathjax.org/en/latest/input/tex/extensions/setoptions.html#tex-setoptions-options上提到的各种配置，但没有一个效果很好。

Answer 1

在渲染 MathML（或者事实上，许多其他 Web 标准）时，您在不同浏览器中观察到的不一致是一个已知问题。虽然 MathJax 在为 LaTeX 提供一致的渲染方面做得值得称赞，但由于不同的浏览器本机处理 MathML 的方式不同，它对 MathML 的渲染仍然会有所不同。

以下是一些帮助您提高一致性的一般建议：

外部 CSS 样式：

有时，浏览器可能会对 MathML 元素应用不同的默认样式。为了解决这个问题，请使用全局 MathML 样式表来标准化跨浏览器的外观。当 Web 开发人员需要确保所有 Web 浏览器的外观和感觉一致时，这是一种常见策略。

JavaScript 后备：

如果某些 MathML 功能在浏览器之间呈现不一致，您可以考虑编写 JavaScript 来检测浏览器并进行调整。这是一种更先进的方法，对于较小的项目来说可能有点过分，但它可能是有效的。 将 MathML 转换为 LaTeX:

如果您可以控制 MathML 并可以将其转换为 LaTeX，则 MathJax 的 LaTeX 渲染器通常比其 MathML 渲染器在浏览器之间更加一致。转换为 LaTeX 并将其用作输入可能是一个更强大的解决方案。

更新库：

确保 better-react-mathjax 和 MathJax 均为最新版本。开发人员经常发布补丁来解决这些类型的跨浏览器不一致问题。 检查配置：

确保使用与浏览器无关的配置来初始化 MathJax。自定义配置可能会无意中导致浏览器之间呈现的差异。

给开发者的反馈：

考虑在 better-react-mathjax GitHub 存储库或 MathJax 主存储库上创建一个问题，详细说明您的发现，并附上屏幕截图和具体信息。开源社区可以帮助提供解决方案或解决方法。 替代库：

如果您面临太多问题，请考虑替代库或工具。例如，KaTeX 是 MathJax 的流行替代品，用于在网络上呈现数学。但请注意，它主要支持 LaTeX。 MathJax 配置：

虽然您提到尝试各种配置，但它可能仍然值得重新审视。在配置中，确保将首选渲染器设置为 SVG 以保持一致性：

MathJax = {
    loader: {load: ['input/mathml', 'output/svg']},
    startup: {
        pageReady() {
            const options = MathJax.getMetricsFor(document.body, {em: 16, ex: 8, containerWidth: 80*16});
            options.MathML = {
            scale: options.em/16
            };
            return MathJax.startup.defaultPageReady();
        }
    }
};

最后，请记住网络是一个不断发展的平台。浏览器更新会影响渲染。因此，请始终确保您在最新版本的浏览器上进行测试，并保持您的库更新。