SVG renderer forces inline breaks when MathML is wrapped in semantics

[xworld21]

Issue Summary

The combination of MathJax 4, inline breaks, SVG renderer, and MathML content that is wrapped in <semantics> seems to generate forced line breaks where optional breaks should be.

Steps to Reproduce:

Simple example tested on mathjax.org/#demo:

<math display="inline"><semantics><mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow></semantics></math>

in SVG becomes

The browser inspector shows the following elements:

<mjx-break prebreak="true" aria-hidden="true"> </mjx-break>
<mjx-break newline="true" aria-hidden="true"> </mjx-break>

Removing the <semantics> wrapper, or using the CHTML renderer, works around the issue.

Technical details:

• MathJax Version: 4.0.0
• Client OS: Windows 11
• Browser: Chrome 139.0.7258.157

I am reproducing this on https://www.mathjax.org/#demo

[dpvc]

Thanks for the report. I will look into it. The in-line breaking uses what are supposed to be temporary line breaks to break up the svg element into several smaller ones so the browser can move some to the next line, but those are supposed to be removed for the actual output. Looks like the semantics tag is interfering with that removal.

[dpvc]

I have found where the breaking is going wrong and will make a PR to fix it. In the meantime, you can incorporate the configuration

window.MathJax = {
  startup: {
    ready() {
      const {SvgSemantics} = MathJax._.output.svg.Wrappers.semantics;
      SvgSemantics.prototype.getBreakNode = function (bbox) {
        if (!bbox.start) return [this, null];
        const [i, j] = bbox.start;
        const childNodes = this.childNodes[0].childNodes;
        if (!childNodes[i]) return [this, null];
        return childNodes[i].getBreakNode(childNodes[i].getLineBBox(j));
      }
      MathJax.startup.defaultReady();
    }
  }
};

into your existing MathJax configuration to work around the problem until then.

[xworld21]

you can incorporate the configuration

Thanks, that's very helpful! I'll guard that behind MathJax.version == "4.0.0".

[xworld21]

In case anybody is reading this thread, patching SvgSemantics is better done in MathJax.loader rather than startup, so it works even if you do not load the SVG rendered by default.

loader: {
  'output/svg': {
    ready() {
      if (MathJax.version === '4.0.0') {
        const { SvgSemantics } = MathJax._.output.svg.Wrappers.semantics;
        SvgSemantics.prototype.getBreakNode = function (bbox) {
          if (!bbox.start) return [this, null];
          const [i, j] = bbox.start;
          const childNodes = this.childNodes[0].childNodes;
          if (!childNodes[i]) return [this, null];
          return childNodes[i].getBreakNode(childNodes[i].getLineBBox(j));
        }
      }
    }
  }
}

[dpvc]

Thanks for the updated configuration. I use startup.ready() so often that I didn't thing of using the output/svg specific ready() function. Kudos for pointing that out!