Inconsistent MathML rendering with MathJax across different browsers

Question

I am using better-react-mathjax ^2.0.2 (with MathJax 3.2.2) to render math expressions in a React based project. However, I am facing an issue where some expressions render differently on different browsers(Chrome, Firefox, Safari).

PS: We are using MathML for rendering. We are setting dynamic=false as mentioned here.

Example 1:

MathML code

<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 screenshot table on chrome

Firefox screenshot table on firefox

Safari screenshot table on safari

Example 2

MathML code

<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
screenshot log on chrome

Firefox screenshot log on firefox

Safari screenshot log on safari

I'm seeking advice on how to ensure consistent rendering behavior for all elements across different browsers. Is there something specific I should configure in the better-react-mathjax library to address this issue?

I tried various configs mentioned on https://docs.mathjax.org/en/latest/input/tex/extensions/setoptions.html#tex-setoptions-options but none worked well.

Answer 1

The inconsistency you're observing across different browsers is a known issue when it comes to rendering MathML (or, in fact, many other web standards). While MathJax does a commendable job at providing consistent rendering for LaTeX, its rendering of MathML can still vary due to how different browsers handle MathML natively.

Here are some general suggestions to help you improve the consistency:

External CSS Styles:

Sometimes, browsers may apply different default styles to MathML elements. To counteract this, use a global MathML stylesheet to standardize the appearance across browsers. This is a common strategy when web developers need to ensure a consistent look and feel across all web browsers.

JavaScript Fallbacks:

If certain MathML features are rendered inconsistently across browsers, you might consider writing JavaScript to detect the browser and make adjustments. This is a more advanced approach and might be overkill for smaller projects, but it can be effective. Convert MathML to LaTeX:

If you are in control of the MathML and can convert it to LaTeX, MathJax's LaTeX renderer is often more consistent across browsers than its MathML renderer. Converting to LaTeX and using that as input might be a more robust solution.

Update Libraries:

Ensure that both better-react-mathjax and MathJax are at their latest versions. Developers often release patches to address these types of cross-browser inconsistencies. Check Configurations:

Ensure that MathJax is being initialized with configurations that are browser-agnostic. Custom configurations might inadvertently cause differences in rendering between browsers.

Feedback to Developers:

Consider creating an issue on the better-react-mathjax GitHub repository or the main MathJax repository detailing your findings, complete with screenshots and specifics. Open-source communities can be instrumental in providing solutions or workarounds.

Alternative Libraries:

If you're facing too many issues, consider alternative libraries or tools. For instance, KaTeX is a popular alternative to MathJax for rendering math on the web. However, note that it primarily supports LaTeX.

MathJax Configuration:

While you mentioned trying various configurations, it might still be worth revisiting. In the configuration, make sure to set the preferred renderer to SVG for consistency:

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();
        }
    }
};

Lastly, remember that the web is an ever-evolving platform. Browser updates can affect rendering. So, always ensure you are testing on the latest versions of browsers, and keep your libraries updated as well.

Answer 2

The images you provide show that the rendering is not being done by MathJax, but by the browsers' native MathML render. The font shown in the images appears to be the STIX2 fonts, but MathJax v3 doesn't use those fonts, it uses its own web fonts based on the Computer Modern fonts. The "x" in particular is quite different in those fonts. Also, if it were typeset by MathJax, then if you right-click (or command-click on a mac) the mathematics, the MathJax contextual menu would appear. That will not happen in your case, since MathJax hasn't typeset that math.

As Alexander Cheprasov mentions, native browser renderings of MathML will differ. But MathJax's rendering should be consistent across browsers, even for MathML input. MathJax v3 does not use MathML as part of its output.

Here is MathJax output for your first expression:

Firefox:

Chrome:

Safari:

So it looks like either the better-react-mathjax isn't working properly for you. You will need to look more carefully at its documentation and how it is integrated into your application. I don't know anything about react, but can tell you that MathJax is not being used to display the expressions you have shown.

As a side note, the second expression is not valid MathML, as you have an <mi> element that contains three other <mi> elements (for the "log"). As a token element, the children of <mi> can only be text or <mglyph> nodes. Your

            <mi>
               <mi mathvariant="normal">l</mi>
               <mi mathvariant="normal">o</mi>
               <mi mathvariant="normal">g</mi>
            </mi>

would be better as

            <mi>log</mi>

in any case.