Rendering error in SVG inline of \frac

kno10 commented 11 months ago

<html>
<script src="https://cdn.jsdelivr.net/npm/mathjax@4.0.0-beta.4/tex-svg.js"></script>
\(\frac{1}{123456789}=\)
\[\frac{1}{123456789}=\]
</html>

It appears to work fine with CHTML output. With SVG output, the frac overlaps the equals sign. The display math below is fine.

It is supposed to look as with earlier MathJax: $\frac{1}{123456789}=$

Fiddle: https://jsfiddle.net/pgce2bj5/

dpvc commented 11 months ago

Thanks for this report. This seems to be connected to the in-line line breaking, so turning that off is a work-around for now. I'll look into it further and see what I can do.

kno10 commented 11 months ago

Thank you. My current workaround was manual, using \)\(.

MathJax = { output: { linebreaks: { inline: false } } }; makes this issue disappear.

dpvc commented 11 months ago

It turns out that MathJax was descending too far into the internal MathML tree when looking or the position of the potential inline breaks, and rather than stopping at the fraction, continued into the fraction and through the break was in the numerator. Because the scaling factor for the node where the break occurs in used to determine the size of the SVG used for the piece between line breaks, it was getting the wrong scaling factor (the scale of the numerator instead of the fractions as a whole) leading to the fraction no getting the proper width.

I have made a PR to resolve the problem. I the meantime, here is a configuration that you can use to patch the incorrect function:

MathJax = {
  startup: {
    ready() {
      const {CommonWrapper} = MathJax._.output.common.Wrapper;
      const getBreakNode = CommonWrapper.prototype.getBreakNode;
      CommonWrapper.prototype.getBreakNode = function (bbox) {
        if (!bbox.start) return [this, null];
        return getBreakNode.call(this, bbox);
      }
      MathJax.startup.defaultReady();
    }
  }
};

mathjax / MathJax

Rendering error in SVG inline of \frac #3135