horizontal scrollbar on small screens

[Raphaël XY74]

Hi everybody, this is my first post in the group.

I have two questions.

I needed horizontal scroll for displayed formulas on mobile. I found this solution with CSS :

.MathJax_Display {
    display:flex;
    padding:0.5em;
    overflow-x:auto;
    box-sizing:border-box;
}
.MathJax_Display .MathJax {
    display:inline-block;
    width:100%;
}

I works very well in firefox and chrome (see the image attached), not tested yet in IE.


My question are :

1. is this the best solution ? Is there a configuration option ?
2. how can I do the same with inline formulas ? Is there a way for an inline formula to become displayed on small screen ?
   

Thanks

Raphaël D.

[Peter Krautzberger]

Hi Raphaël,

Since MathJax has several different renderers (with different class names), my personal preference is to add a wrapping span with a custom class name.

E.g.,

.math {

  overflow-x: auto;

  overflow-y: hidden;

}

.math--inline{

  display: inline-block;

  /*NOTE leave space for trailing punctuation*/

  max-width: 99%;

}

.math--block{

  display: block

}

Alternatively, you can use the same for the top-level classes of whichever output you want to support.

It might be worth pointing out that MathJax can perform automated line-breaking, cf. http://docs.mathjax.org/en/latest/output.html#automatic-line-breaking.

In addition, the accessibility extensions (http://docs.mathjax.org/en/latest/options/a11y-extensions.html) offer an advanced responsive rendering mode. For an example, see https://codepen.io/pkra/pen/XXrQvG

Regards,

Peter.

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-users+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Raphaël XY74]

Hi Peter

Thanks for answering.

Is there a way to add the span (or anything else) on the fly with mathjax  ? I would prefer a solution that is easy to make evolving without changin multiple articles.

Hi Raphaël,

To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.

[Peter Krautzberger]

Hi Raphaël,

Yes, but it's faster to modify the three relevant classes in your MathJax configuration, cf. http://docs.mathjax.org/en/latest/reference/CSS-styles.html

The relevant classes are .MathJax, .MathJax_SVG, and .mjx-chtml .MathJax_CHTML.

Regards,

Peter.

To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-users+unsubscribe@googlegroups.com.