mml3 still not work in MathJax3.2

[weihaopeng]

Issue Summary

Follow the experimental mml3 extension, I add the loader in my MathJax configuration. Then in page, the mml3.js is loaded, but the mathml using mlongdiv is not rendered correctly.

Steps to Reproduce:

• The code example.
• This is what I expect and what it is.
• 
• And the request of mml3.js file is successful.
• 

Technical details:

• MathJax Version: 3.2
• Client OS: Windows10
• Browser: Chrome 91.0.4472.101

Supporting information:

• Script tag:

•  <script>
     window.MathJax = {
           options: {
             renderActions: {
               addMenu: [0, '', '']
             }
           },
           chtml: {
             matchFontHeight: false,
             adaptiveCSS: false
           },
           loader: {load: ['input/asciimath', 'output/chtml', '[mml]/mml3']}
         };
   </script>
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"></script>
  

[dpvc]

Try adding

mml: {
  forceReparse: true
},

to your configuration.

[weihaopeng]

Like this?

window.MathJax = {
  options: {
    renderActions: {
      addMenu: [0, '', '']
    }
  },
  chtml: {
    matchFontHeight: false,
    adaptiveCSS: false
  },
  loader: {
    load: ['input/asciimath', 'output/chtml', '[mml]/mml3']
  },
  mml: {
    forceReparse: true
  }
 };

It doesn't work either. Even mathml that doesn't have mlongdiv throws error "MathML must consist of a single element".

I've updated the code example

[weihaopeng]

I saw the code mathml compile function, debugged my code example. Here is why the error was thrown.

The code here want to check if there is only a single <math> in body, but the childnodes certainly have a textnode, too.

[weihaopeng]

Then, where is the textnode from?

[weihaopeng]

BTW, a spelling mistake here: ts/core/OutputJax.ts#L223

[weihaopeng]

Something wrong here. During executeFilters, the \n was added. Maybe the output was beautified?

[weihaopeng]

The origin problem is transformToDocument function of XSLTProcessor.

[dpvc]

Thanks for trying to diagnose the problem. It turns out that your example page works in Firefox, where I was doing my testing, but not in Chrome or Safari, so it seems that WebKit (and Blink) treat the transform differently, and extra line breaks seem to be inserted, as you point out.

For now, you can add an additional preFilter that removes those line breaks before the MathML is parsed. Add

    startup: {
      ready() {
        MathJax.startup.defaultReady();
        MathJax.startup.document.inputJax[0].preFilters.add(function (data) {
          data.data = data.data.replace(/[\s\n]+<math/, '<math')
                               .replace(/math>[\n\s]+/, 'math>');
        }, 10);
      }
    }

to make it

window.MathJax = {
  startup: {
    ready() {
      MathJax.startup.defaultReady();
      MathJax.startup.document.inputJax[0].preFilters.add(function (data) {
        data.data = data.data.replace(/[\s\n]+<math/, '<math')
                             .replace(/math>[\n\s]+/, 'math>');
      }, 10);
    }
  },
  options: {
    renderActions: {
      addMenu: [0, '', '']
    }
  },
  chtml: {
    matchFontHeight: false,
    adaptiveCSS: false
  },
  loader: {
    load: ['input/asciimath', '[mml]/mml3']
  },
  mml: {
    forceReparse: true
  }
 };

to your configuration and that should resolve the issue.

Note, however, that the XSLT is not set up to deal with your msgroup inside the division symbol. You may want to change it to

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mlongdiv charalign="center" charspacing="0px" stackalign="left">
    <mn>48</mn>
    <mrow/>
    <mn>&#x25A1;52</mn>
  </mlongdiv>
</math>

for better results.

[weihaopeng]

It works, though there are still some problems with rendering.

---

BTW, without msgroup, it won't parse in mathtype editor.

[weihaopeng]

Depending on the business scenario, I'll see if it's necessary to pre parse before calling mathjax, or use mathjax2. Thank you for your reply. I hope mathjax will be better and better.