Mathjax: `<mspace linebreak="newline" />` not working with explorer accessibility.

Created on 11 Aug 2020 · 6Comments · Source: mathjax/MathJax

Issue Summary

When the accessibility explorer is activated, MathML line break, <mspace linebreak="newline" />, won't work.

Steps to Reproduce:

Open https://jsbin.com/sajujukiwe/1/edit?html,js,output
Check how math expression is displayed by making accessibility explorer property to false and true.

When explorer is set to false there will be a line break which is what I want but I also want the accessibility feature.

Technical details:

MathJax Version: 2.7.7
Client OS: Mac OS X 10.14.6
Browser: Chrome Version 84.0.4147.105 (Official Build) (64-bit)

Supporting information:

https://jsbin.com/sajujukiwe/1/edit?html,js,output

Accepted Test Needed v2 v2.7

Source

henok-tesfaye

Most helpful comment

The issue turns out to be in the a11y extension that handles the collapsible elements in the math. When the collapsing is in the content for the top-level <math> element, the MathML tree is not rebuilt quite right, and that disables the line-breaking. I have made a fix in the a11y repository, and it will be included in the next release of v2. In the meantime, you can use

  <script type="text/x-mathjax-config">
  (function () {
    var V = MathJax.version.split(/\./);
    if (V[0] === "2" && (parseInt(V[1]) < 7 || (V[1] === "7" && parseInt(V[2]) <= 8))) {
      MathJax.Hub.Register.StartupHook("Collapsible Ready", function () {
        var Collapsible = MathJax.Extension.collapsible;
        Collapsible._MakeAction = Collapsible.MakeAction;
        Collapsible.MakeAction = function (collapse, mml) {
          if (mml.type !== 'math') return this._MakeAction(collapse, mml);
          var mrow = mml.data[0]; mml.data = mrow.data; mrow.data = [];
          var maction = this._MakeAction(collapse, mml);
          mrow.data = mml.data; mml.data = [mrow];
          return maction;
        };
      });
    }
  })();
  </script>

just before the script that loads MathJax.js itself in order to fix the issue until the new version is available. This checks the version number, so the patch will only affect version 2.7.8 and below.

dpvc on 18 Aug 2020

👍2 🚀1

All 6 comments

I checked https://github.com/mathjax/MathJax/issues/2073 but this issue is not about an automatic line break instead <mspace linebreak="newline" />. Thanks!

henok-tesfaye on 11 Aug 2020

I am suffering from this issue, too...

(Though my my issue may differ from your problem a bit, but...)
When I run my Github Pages blog locally by bundle exec jekyll serve, Mathjax works well. However, when I run my server on chrome browser, Mathjax is not rendering.

I suppose that my issue is about <mspace linebreak="newline" /> as well...

sirzzang on 13 Aug 2020

Though the issue is a real bug, I found a workaround for this, we can wrap the expression we want to render in a new line with MathML expression, <math xmlns="http://www.w3.org/1998/Math/MathML">.

I just changed <mspace linebreak="newline" /> to </math><math xmlns="http://www.w3.org/1998/Math/MathML">.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>MathJax MathML Linebreaks</title>
    <script>
      MathJax = {
        jax: ["input/TeX", "input/MathML", "input/AsciiMath", "output/SVG"],
        menuSettings: {
          explorer: true
        },
        explorer: {
          speech: true,
          background: "yellow",
          foreground: "white"
        },
        showMathMenu: false,
        styles: {
          "#MathJax_Message": {
            display: "none"
          }
        }
      };
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_SVG"></script>
  </head>
  <body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mi>H</mi>
      <mi>o</mi>
      <mi>r</mi>
      <mi>i</mi>
      <mi>z</mi>
      <mi>o</mi>
      <mi>n</mi>
      <mi>t</mi>
      <mi>a</mi>
      <mi>l</mi>
      <mo></mo>
      <mi>a</mi>
      <mi>s</mi>
      <mi>y</mi>
      <mi>m</mi>
      <mi>p</mi>
      <mi>t</mi>
      <mi>o</mi>
      <mi>t</mi>
      <mi>e</mi>
      <mfenced>
        <mi>s</mi>
      </mfenced>
      <mo>=</mo>
      <mrow>
        <mrow>
          <mfenced close="}" open="{">
            <mrow>
              <mi>y</mi>
              <mo>=</mo>
              <mn>0</mn>
              <mo>.</mo>
              <mn>125</mn>
            </mrow>
          </mfenced>
        </mrow>
      </mrow>
    </math>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mi>V</mi>
      <mi>e</mi>
      <mi>r</mi>
      <mi>t</mi>
      <mi>i</mi>
      <mi>c</mi>
      <mi>a</mi>
      <mi>l</mi>
      <mo></mo>
      <mi>a</mi>
      <mi>s</mi>
      <mi>y</mi>
      <mi>m</mi>
      <mi>p</mi>
      <mi>t</mi>
      <mi>o</mi>
      <mi>t</mi>
      <mi>e</mi>
      <mfenced>
        <mi>s</mi>
      </mfenced>
      <mo>=</mo>
      <mrow>
        <mrow>
          <mfenced close="}" open="{">
            <mrow>
              <mi>x</mi>
              <mo>=</mo>
              <mo>-</mo>
              <mn>2</mn>
              <mo>.</mo>
              <mn>250</mn>
              <mo>,</mo>
              <mi>x</mi>
              <mo>=</mo>
              <mn>1</mn>
              <mo>.</mo>
              <mn>000</mn>
            </mrow>
          </mfenced>
        </mrow>
      </mrow>
    </math>
  </body>
</html>

henok-tesfaye on 16 Aug 2020

👍1

  <script type="text/x-mathjax-config">
  (function () {
    var V = MathJax.version.split(/\./);
    if (V[0] === "2" && (parseInt(V[1]) < 7 || (V[1] === "7" && parseInt(V[2]) <= 8))) {
      MathJax.Hub.Register.StartupHook("Collapsible Ready", function () {
        var Collapsible = MathJax.Extension.collapsible;
        Collapsible._MakeAction = Collapsible.MakeAction;
        Collapsible.MakeAction = function (collapse, mml) {
          if (mml.type !== 'math') return this._MakeAction(collapse, mml);
          var mrow = mml.data[0]; mml.data = mrow.data; mrow.data = [];
          var maction = this._MakeAction(collapse, mml);
          mrow.data = mml.data; mml.data = [mrow];
          return maction;
        };
      });
    }
  })();
  </script>

dpvc on 18 Aug 2020

👍2 🚀1

@dpvc THX!!! :)

sirzzang on 19 Aug 2020

This is fixed in the 2.7.9 release that was made this morning.

dpvc on 25 Aug 2020

Was this page helpful?

0 / 5 - 0 ratings