Issues with MathJax 4 in RTL settings: SVG had serious ordering issue, and CHTML is not rendering in an overall LTR manner as expected #3589

Issue Summary

When using MathJax v4 in Chrome/Ubuntu 22.04, math content rendered by MathJax in a HTML document in a RTL (right-to-left) direction is not rendering properly in a Hebrew paragraph, nor consistently in CHTML and SVG modes. I suspect the issue applies to other RTL languages. (Sample also shows it occurring for Persian.)

In CHTML mode, essentially the "pieces" of an expression are appearing from right-to-left, which is not the accepted practice for math in Hebrew text, where the "blocks" of math (each MathJax expression) would be expected to render LTR (unless there was some inline Hebrew, where it would be nice for the Hebrew words to render RTL).

In SVG mode - the situation is worse. An \( a \ne 0 \) rendered with both the a and the 0 on the same side of the equals sign.

It seems that MathJax v4 is trying to pick up the "correct" direction based on the surrounding text, as when the inline math inside an RTL document is inside an English paragraph - it does render as expected.

The issue can be overcome by enclosing the math expression inside an span setting dir="ltr".

Note: With v3, the CSS setting of direction: ltr on mjx-container was made in mathjax/MathJax-src#349 and had things working well for SVG mode. That CSS setting still exists, but does not seem to have an effect.

Steps to Reproduce:

1. Save the HTML file test03-svg.html attached below or copy the text at the very bottom to a local HTML file.
2. Render in a browser.
3. Pay attention to how the two inline math expressions appear in the 3 paragraphs in the top section (default MathJax in SVG mode).
4. Compare to how it is rendered in the bottom 2 paragraphs below the horizontal line.
5. Repeat for test03-chtml.html attached below, or change the 'srcline in the file to usetex-mml-chtml.js(and the headers to haveSVGinstead ofCHTML`) and examine the output.

The expected behavior would be for the inline equations to all render the same manner, as results when the explicit RTL span is added in the last 2 paragraphs.

Technical details:

• MathJax Version: 4.1.3
• Client OS: Ubuntu 22.04
• Browser: Firefox 152.0.4 (64-bit), and Chrome 150.0.7871.46 (Official Build) (64-bit)

The example loaded MathJax via

  <script id="MathJax-script" async
          src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-svg.js">
  </script>

and

  <script id="MathJax-script" async
          src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js">
  </script>

Supporting information:

HTML files:

• test03-svg.html
• test03-chtml.html
• test03-svg-v3.html

Note: The third and fifth example use some Persian word to trigger the same issue as in the Hebrew examples (first and fourth). I just copied that word from the example in #2204 to see the behavior in a different RTL language. That sentence tested is just gibberish to me.

Images of the rendered pages:

The HTML file for the SVG case is below:

<!DOCTYPE html>
<html lang="he_IL" dir="rtl">
<head>
  <meta charset="utf-8">
  <title>MathJax example</title>
  <script id="MathJax-script" async
          src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-svg.js">
  </script>
</head>
<body>
<h2 dir="ltr"><strong>Default MathJax v4 (SVG)</strong></h2>
<p>
  כאשר \(a \ne 0\), יש 2 פתרונות למשוואה \(ax^2 + bx + c = 0\) והם
  \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>
<p>
  When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
  \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>
<p>
  داریم \(a \ne 0\), داریم \(ax^2 + bx + c = 0\) داریم
  \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>
<hr>
<h2 dir="ltr"><strong>Explicit LTR spans added below (SVG)</strong></h2>
<p>
כאשר <span dir="ltr">\(a \ne 0\)</span>, יש 2 פתרונות למשוואה <span dir="ltr">\(ax^2 + bx + c = 0\)</span> והם
  \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>
<p>
  ﺩﺍﺮﯿﻣ <span dir="ltr">\(a \ne 0\)</span>,
  ﺩﺍﺮﯿﻣ <span dir="ltr">\(ax^2 + bx + c = 0\)</span>
  ﺩﺍﺮﯿﻣ
  \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>
</body>
</html>