MathJax v4: Line breaking does not work

[netw0rkf10w]

Issue Summary

When resizing the window to minimum width and refresh the page, line breaking does not work. For a demo, please visit this page: https://beta.diendantoanhoc.org/forum/250-b%C3%A2%CC%81t-%C4%91%C4%83%CC%89ng-th%C6%B0%CC%81c-va%CC%80-c%C6%B0%CC%A3c-tri%CC%A3/

Technical details:

• MathJax Version: 4.0
• Client OS: (e.g., Mac OS X 10.15)
• Browser: (e.g., Safari and Chrome)

I am using the following MathJax configuration:

MathJax = {
  options: {
    enableMenu: true,          // set to false to disable the menu
    menuOptions: {
      settings: {
        displayOverflow: 'linebreak'
        }
      }
   },
  loader: {
    load: ['[tex]/colorV2', '[custom]/xypic.js'],
    paths: {custom: 'https://cdn.jsdelivr.net/gh/sonoisa/XyJax-v3@3.0.1/build/'}
  },
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    tags: 'ams',
    packages: {'[+]': ['color', 'xypic']}
  },
  svg: {
    fontCache: 'global',
    displayOverflow: 'linebreak'
  },
  chtml: {
    displayOverflow: 'linebreak'
  },
  linebreaks: {                  // options for when overflow is linebreak
    inline: true,                   // true for browser-based breaking of inline equations
    width: '100%',                  // a fixed size or a percentage of the container width
    lineleading: .2,                // the default lineleading in em units
    LinebreakVisitor: null,         // The LinebreakVisitor to use
  },
  startup: {
    ready() {
      //  Create the usual MathJax objects
      //
      MathJax.startup.defaultReady();
      //
      //  Add a TeX jax pre-filter to add \displaystyle{...} around in-line material
      //
      MathJax.startup.document.inputJax[0].preFilters.add((data) => {
        if (!data.math.display) {
          data.math.math = '\\displaystyle{' + data.math.math + '}';
        }
      });
    }
  }
};

and loading MathJax via

<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4.0.0-alpha.1/es5/tex-chtml.js"></script>

[netw0rkf10w]

FYI the Scroll option doesn't seem to work either...

[dpvc]

The overflow/scroll/linebreak/scale/truncate/elide options apply only to displayed equations, not in-line equations. Your site appears to use primarily in-line expressions, so they don't affect those. The line-breaking for in-line expressions follows TeX's approach of breaking only at top-level binary operators and relations and at white-space. By "top-level" we meant that they are not enclosed in any other structures, and that includes braces. Because you are forcing \displaystyle{...} around every inline expression, the braces are preventing in-lien equations from breaking. You could just insert \displystyle at the front of the expression, which would allow in-line breaks, but if a user entered $a+b\over x+y$ the \displaystyle would apply only to the numerator, not the denominator.

[netw0rkf10w]

@dpvc Thanks for your reply. I have tried:

• Removing the automatic addition of \displaystyle{...}.
• Replacing linebreak in the above configuration with scroll (I believe that the latter gives aesthetically better results).

But there's no scrolling in the results: https://beta.diendantoanhoc.org/topic/192763-test-mathjax-wide-expressions/

I would have loved to have something similar to this one: https://codepen.io/pkra/pen/XXrQvG/

Please let me know what you think. Thanks a lot!

[dpvc]

there's no scrolling in the results

It looks like when there are equation numbers, the mjx-container element gets a min-width that is disrupting the scrolling. Try adding

mjx-container {
  min-width: initial !important;
}

to your site CSS and see if that helps.

[netw0rkf10w]

@dpvc You've probably had an auto-correction that converted mjx to mix :D
Works like a charm!!!!! Thank you so much!!

[netw0rkf10w]

@dpvc I would like to ask an additional question please. This scrolling feature is not available in MathJax v3, is that correct?
I upgraded to v4 only because of this feature. Unfortunately my website also uses the XY-pic extension, which requires MathJax v3. I wonder if there is a way to use v3 for all the \begin{xy}...\end{xy} instances while using v4 for the rest.
Thank you for your help!

[dpvc]

You've probably had an auto-correction that converted mjx to mix :D

Yes, it is quite annoying. I don't always catch it.

This scrolling feature is not available in MathJax v3, is that correct?

Not directly, but you can probably use

mjx-container {
  overflow-x: auto;
  min-width: initial !important;
}

to implement it in v3 (though it will not be under the control of the MathJax menu). That would be easier than trying to use two copies of MathJax on the same page.

[netw0rkf10w]

@dpvc Thanks, it works!!

For the line breaking, it doesn't seem to work all the time. For example, I create two test topics in this forum, but it only works for the second (bottom) one:

Any ideas please? Thank you again for your help

[dpvc]

I looked into this, and it is due to the semantic enrichment that is part of the accessibility feature that is on by default. It sometimes introduces groupings that are not in the original LaTeX, so that something like $a+b+c > x+y$ can become the equivalent of ${a+b+c} > {x+y}$. Because MathJax uses rules based on TeX's in-line breaking rules, which allow breaks only a top-level (not braced) binary operators and relations, these extra braces prevent breaking at those points. The top expression ends up having no valid breakpoints due to this.

I don't currently have a work-around for you for that, but we are looking into how best to resolve the issue in the next release.

[netw0rkf10w]

@dpvc Thank you so much for having spent your time on this issue! I really appreciate your help!
Looking forward to the future releases! Nowadays people are browsing the internet more on mobile devices than on desktop computers, so I think making MathJax fully responsive could be greatly beneficial to the world.