How to make formula with mathjax responsive

Question

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.

Answer 1

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.

Answer 2

I have visited user3700643's page and see that there are still problems--- this when I use Firefox's Responsive Design View at 320×487. My solution is doofus I know, as it requires some duplication, but I have used it with not only MathJax (just now) but in the past for tables and other things--- all in a Twitter Bootstrap grid environment, but I'm pretty sure that that doesn't matter.

I have been using the CSS3 @media Rule. Here is my particular version:

@media(max-width:768px){
  .wide {display:none;}
  .mobilefont {font-size:0.8em;}
}
@media(min-width:768px){
  .tight {display:none;}
}

I just threw the mobilefont bit in just to further inspire you. I do sometimes use it. So, what I do is wrap an equation--- I'm using Latex with MathJax--- with a div and give the div the class "wide" if the equation is formatted for a wide screen and "tight" if it's formatted for a small screen. You can see how the max-width/min-width values in the CSS3 effect the disappearance of divs that have those class names according to whether the screen width is greater than or less than 768px, which is the popular breakpoint (but others can be defined by you).

That is, I duplicate my big-screen \begin{align}\end{align} block. I paste the copy in right under the original and wrap each with divs and give the two divs those two class names. I then edit the one with the "tight" class name to make it work in the Responsive Design View with a small screen size.

I have also done this outside of the MathJax context, with plain tables. I have, for example, used <td class="wide"> in every <td> of a given column of a table to make that column disappear on small-screen devices.

On your page where you have "L'integrale di partenza sarà allora la somma degli integrali sui due domini", inside your "tight" div version you could, if you were using a \begin{align}\end{align} block (but I see you're actually using \begin{eqnarray*} which I haven't tested with this scheme), simply put an ampersand in front of that double integral on the left, and then new-line characters \\ after that integral to break to a new line. And put ampersands in front of each equal sign on every line. That way the lines that start with equals signs will be moved far to the left, aligned under the expression for the integral instead of to the right of it.

That would not be too confusing, I don't think. It's only slightly unorthodox. But see my comment to Peter Krautzberger's answer... I have found that his script doesn't work when I use the ampersand. But the point is that it isn't needed at all with my CSS3 approach since I simply specify all of the re-formatting myself.

Answer 3

You can achieve this with css as follows:

mjx-container mjx-math {
    white-space: normal;
}

Answer 4

All you need to do is make use of responsive tables. Customize your tables and problem solved. e.g., if you use Wordpress, then use the plugin "WP Responsive Table". If you code yourself your website, then use Bootstrap Responsive Table. Use transparent borders if needed and add your MathJax code inside the table.

Answer 5

Came here in 2022, but don't see an answer that works in my case with MathJax 3. I have my formulas as nested content of a flex item and are hit by what this answer describes in the 2nd sentence.

A flex item cannot be smaller than the size of its content along the main axis.

With complex formulas I see explicit min-width CSS properties directly on MathJax elements. To overwrite these I needed the

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

and in addition, in my containing flex item

.the-containing-flex-item {
  width: 0;
  flex-basis: 60%; /* or whatever you need */
}

I can only guess why the width:0 is necessary, but this seems to actually kill the min-width from the contained element, while the flex-basis then sets the actual width of the flex item.