Unexpected linebreak behaviour with array environments in v4

[dmca-glasgow]

Issue Summary

When displayOverflow: 'linebreak' is set on an SVG output, and for example containerWidth: 600 is set on doc.convert from the node methods, array environments are incorrectly rendered when triggered to "wrap", for example:

becomes:

When the containerWidth is less than the natural width of the SVG.

Steps to Reproduce:

The LaTeX code used in the above example, although I see this with all wide array environments:

\[
\begin{array}{r|ccccccc}
\text{cycle structure} & e & ({*}{*}) & ({*}{*}{*}) & ({*}{*}{*}{*}) & ({*}{*}{*}{*}{*}) & ({*}{*})({*}{*}) & ({*}{*}{*})({*}{*})  \\
\hline\text{\# of elements} & 1 & 10 & 20 & 30 & 24 & 15 & 20
\end{array}
\]

This can be replicated using the node demo tex2svg like so:

./tex2svg --overflow linebreak --width 600 '\begin{array}{r|ccccccc}
\text{cycle structure} & e & ({*}{*}) & ({*}{*}{*}) & ({*}{*}{*}{*}) & ({*}{*}{*}{*}{*}) & ({*}{*})({*}{*}) & ({*}{*}{*})({*}{*})  \\
\hline\text{\# of elements} & 1 & 10 & 20 & 30 & 24 & 15 & 20
\end{array}'

Technical details:

• MathJax Version: 4.0

[dmca-glasgow]

Another example:

./tex2svg --overflow linebreak --width 530 '\begin{array}{rrr}
e=\begin{pmatrix}1 & 2 & 3\\ 1 & 2 &3\end{pmatrix} & (1\;2\;3)=\begin{pmatrix}1 & 2 & 3\\ 2 & 3 & 1\end{pmatrix} & (1\;3\;2)=\begin{pmatrix}1 & 2 & 3\\ 3 & 1 & 2\end{pmatrix} \\[18pt]
(1\;2) = \begin{pmatrix}1 & 2 & 3\\ 2 & 1 & 3\end{pmatrix} & (1\;3) = \begin{pmatrix}1 & 2 & 3\\ 3 & 2 & 1\end{pmatrix} & (2\;3)=\begin{pmatrix}1 & 2 & 3\\ 1 & 3 & 2\end{pmatrix}
\end{array}'

[dpvc]

There were a number of issues with line breaking in the v4.0.0 release. I have resolved several in mathjax/MathJax-src#1338, and it turns out that those fixes take care of this situation, as well. There isn't an easy way to make a patch for it, but you could clone the MathJax-src repository, check out the issue1338 branch, and pnpm install it, then pnpm -s build to build the code for that branch, and link that repository as node_modules/@mathjax/src in your copy of the node demos repository. It sounds harder than it actually is. You can get away with just pnpm -s compile if you don't use the --dist option on the node commands.

I also notices that there was a bug in the mjs/util/Svg.js file where the styles inserted into the SVG output were not being enclosed in a <style> tag. I have pushed a fix to the node demos repository, so you should pull a new version of that as well.

[dmca-glasgow]

That's great you already have a fix! I can wait for its release, I have a quick workaround for now:

const node = doc.convert(mml, {
  // https://github.com/mathjax/MathJax/issues/3434
  containerWidth: mml.includes('\\begin{array}')
    ? undefined
    : layoutOptions.containerWidth,
});

In my case, this results in max-width: 100% scaling the SVG down, which is how it was before anyway.

I also notices that there was a bug in the mjs/util/Svg.js file where the styles inserted into the SVG output were not being enclosed in a <style> tag.

Yes, I noticed this too but I assumed it was somehow valid as it wasn't causing problems!

Thanks for the massive effort you're putting into version 4 @dpvc, line breaking works amazingly well in most cases. It provides a much better maths reading experience on small screens, and in sidenotes.

[dpvc]

Thanks for the massive effort you're putting into version 4

You are most welcome. We are very proud of our work on v4.

line breaking works amazingly well in most cases.

That is good to hear. Although we do a lot of testing, something as complicated as line breaking doesn't really get tested until it is used in the wild. It is gratifying to hear that it is working well for you.

If you have situations where the results are not so good, please send them along so that we can look into improving the algorithm in use.

I'm pretty sure you will not like the results of line-breaking your example above, since the breaking must be done between the asterisks in the top row. it works, but it is not pretty.

[dmca-glasgow]

It's never going to be perfect, it's a compromise... it's a great option to have and better IMO in the majority of cases to scaling or scrolling. Then again I don't actually read the maths, I just make sure it renders well, maybe some mathematicians will be horrified! I can easily add an option to disable the feature if need be.

[dpvc]

Users can also use things like \mbox{} or \hbox{} to prevent line breaks, and even just using braces will make line breaks within them less likely. So there certainly are ways to deal with bad breaks. But most people won't be aware of the issues, let alone the solutions.