Issues with MathJax 4 in RTL settings: SVG had serio... | mathjax/MathJax

Nobody has claimed this yet.

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 https://github.com/mathjax/MathJax-src/pull/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:

Save the HTML file test03-svg.html attached below or copy the text at the very bottom to a local HTML file.
Render in a browser.
Pay attention to how the two inline math expressions appear in the 3 paragraphs in the top section (default MathJax in SVG mode).
Compare to how it is rendered in the bottom 2 paragraphs below the horizontal line.
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:

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 https://github.com/mathjax/MathJax/issues/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>

Start by opening the attached test03-svg.html and test03-chtml.html files and comparing the default rendering with the explicit dir="ltr" spans. Check the MathJax v4 tex-mml-svg.js and tex-mml-chtml.js entry points along with the existing direction: ltr rule on mjx-container. Done means inline and display equations render consistently left-to-right in RTL paragraphs in both SVG and CHTML modes without wrapper spans.

Written by the indexing model from the issue text.

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

Description

Issue Summary

Steps to Reproduce:

Technical details:

Supporting information:

Contributor guide

First steps

Research direction

Assessment

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

Description

Issue Summary

Steps to Reproduce:

Technical details:

Supporting information:

Contributor guide

First steps

Research direction

Assessment

Get new issues in your inbox