I have a big problem with displaying math expressions in my responsive website. In particular, if you visit this page with a smartphone, you can see that most of the math expressions are cut off due to responsive design. I'm using Joomla and the Jextbox Equation plugin for displaying them.
I want formulas on my page to behave like this one on Wikipedia. If you open this page in your smartphone you can see that, where formulas are too long, they are not cut off. They are displayed if you scroll from left to right. I would like to do the same in my page.
From the documentation on activating MathJax's line-breaking:
The HTML-CSS and SVG output processors implement (most of) the MathML3 >automatic line-breaking specification. (The NativeMML output processor relies on the browser’s native MathML support to handle line breaking when it is used.) Since line-breaking takes extra processing and so can slow down the mathematical output, it is off by default, but you can enable it by adding
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": { linebreaks: { automatic: true } },
SVG: { linebreaks: { automatic: true } }
});
</script>
to your page just before the tag that loads MathJax.js itself.
However, in your example, there's a lot of tabular mathematics, i.e., layout using <mtables> (though people using TeX as input are often not aware, MathJax converts all inputs to MathML internally).
The problem is: mtables can't really be line-broken, much like html tables can't be line-broken -- responsive tables need some JS help and, more importantly, additional semantic markup.
PS: For what it's worth, we're actually working on semantic heuristics for mathematics to do something better than linebreaking but that's ongoing R&D with no ETA.