How to make MathJax responsive and add line breaks automatically?

Question

I've read the MathJax documentation for adding line breaks automatically but it seems to have no effect.

I don't know how to make MathJax responsive. My website allows users to write in LaTeX especially for mathematical formulas. However, on mobile screen, sometimes the output is too wide and I need somehow to find a way to resize it.

I can't ask my users to use this functionality only for short formulas.

Exemple of incorrect output :

What I did based on the documentation (but does not work) :

MathJax.Hub.Config({
    tex2jax: {
         inlineMath: [['$','$'], ['\\(','\\)']]
    },
    "HTML-CSS": { 
         linebreaks: { automatic: true }
    },
    SVG: { 
         linebreaks: { automatic: true } 
    }
});

Full code on JS Fiddle : https://jsfiddle.net/ao8cnquw/

Answer 1

This is expected behavior for this specific example right now.

MathJax's line breaking does not work within MathML token elements right now (and this TeX example will internally be converted into a single mtext element). Support for this is planned but the docs are not too clear on either fact.

You would need to drop out of \text to get breaks (or have $...$ inside it for MathJax to drop out).[actually, see 2nd update below]

Note that line breaking has other, more general limitations, e.g., any table-like environment can only break within cells.

There is research into truly responsive equation rendering as well, see https://github.com/mathjax/MathJax-RespEq

---

Update. Something I forgot earlier. Your example is also inline math which MathJax only breaks if the equation is longer than the line. This is actually mentioned in the documentation. However, as I wrote, since it's internally just one token element, this does not happen in your example either.

---

Another update. There's one more content-specific problem, actually. The MathML line-breaking algorithm only allows breaks to happen at <mo> or <mspace> elements and MathJax follows this (since, as mentioned, it's a MathML renderer at heart). So even if your example is modified to something like \text{Avec $590$ €, puis-je acheter 2 billets à $240$ € et un troisième billet à $50$ % de réduction ?}, you still won't see line breaks. So for this kind of content, it's best not to push everything inside \text{} (which is best anyway, imho).