Solution for overflow Math expressions

[Karna]

Hi Team,

We have tagged the display equations using MathML, but while magnifying them (more than 200% zoom size) it overflows.

 Please find the attached screenshot for your reference.

 Just checking, is there any option to make the math equations responsive (i.e. to fit the math equation to the screen width)?  Or please suggest how to handle these types of Math expressions.

 Awaiting your response.

Regards,

Karnan

 

[Murray]

Karnan

The MathJax default is to have overflow hidden, as you've discovered.

To solve this, you need to wrap your wide math expressions in an element with style  overflow-x: auto;

That way, the whole equation will be available, and users can scroll horizontally to see the whole thing. See:

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

In the above page, the horizontal scroll bar is obvious when viewing on a desktop, but on most phones, the scroll bar is invisible until the scrollable element is dragged. This means some (most?) users will miss it.

For that reason, I usually like to add a scroll bar which is visible all the time, like the elements with class .overflowXauto in this example page (view on a phone): 

https://bourne2learn.com/math/svg-math/svg-math-demo.php

Hope it helps

Regards

Murray

[William F Hammond]

On Sun, Jul 10, 2022 at 4:25 PM Murray <murray...@gmail.com> wrote:

The MathJax default is to have overflow hidden, as you've discovered.

To solve this, you need to wrap your wide math expressions in an element with style  overflow-x: auto;

That way, the whole equation will be available, and users can scroll horizontally to see the whole thing. See:

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

In the above page, the horizontal scroll bar is obvious when viewing on a desktop, but on most phones, the scroll bar is invisible until the scrollable element is dragged. This means some (most?) users will miss it.

For that reason, I usually like to add a scroll bar which is visible all the time, like the elements with class .overflowXauto in this example page (view on a phone): 

https://bourne2learn.com/math/svg-math/svg-math-demo.php

I guess that I haven't been paying attention.

Is there ever a sensible reason to hide math overflow by default?  If so, what?

Best,

        -- Bill

William F Hammond
Email: gel...@gmail.com
https://www.facebook.com/william.f.hammond
http://www.albany.edu/~hammond/

𝑺𝒖𝒑𝒑𝒐𝒓𝒕𝒊𝒏𝒈 𝒂𝒇𝒇𝒊𝒓𝒎𝒂𝒕𝒊𝒗𝒆 𝒂𝒄𝒕𝒊𝒐𝒏 𝒇𝒐𝒓 𝒕𝒉𝒆 𝒇𝒊𝒏𝒊𝒕𝒆 𝒑𝒍𝒂𝒄𝒆𝒔

[Davide Cervone]

The MathJax default is to have overflow hidden, as you've discovered.

This is, in fact, incorrect.  MathJax simply produces the expression at the width that is required by it, even if that exceeds the width of tis container.  How over-wide expressions are handled is up to the page's CSS, and MathJax doesn't set that.  It is the container element's CSS that controls how the overflow is handled, so if it is set to have a maximum width, for example with overflow hidden, the right-hand side of the expression may not be visible.  This is up tot he page author.

I guess that I haven't been paying attention.

Is there ever a sensible reason to hide math overflow by default?  If so, what?

As mentioned above, how wide math is handled is up to the surrounding page, and MathJax doesn't control that.

Davide

[Murray]

Davide

My apologies - I agree my statement was not accurate. I should have said "effectively MathJax's overflow is hidden, unless you do something about it yourself via the CSS on your page." I expect a lot of authors won't know how to set this up - most just want to enter their LaTeX and have it appear properly, for the widest range of devices possible. I expect many (at least some) are not aware the math on their pages does not show in full when users are on a phone.

I can imagine why you took the approach you did, since my advice to "wrap your wide math in an element with style overflow-x:auto" falls over if the HTML is something like the following:

<p>

  Some text then some $inline$ math and then some block level (display) math: 

  $$ a very wide equation here $$

</p>

If the <p> tag has overflow-x:auto, then the whole <p> can be scrolled left-right, which may not be desirable.

However, I've always put display math in its own separate <div> tag, so it was easy to style it separately and thus scroll just the math as needed.

Could I make a suggestion for MathJax, though, which I don't think would be too hard to implement.

It would be great to have an option ("overflowAuto", say) where the following would happen (for the HTML example above):

1. Close the <p> tag after the colon in the first line.
2. Open a new <p> tag for the display math
3. Style that <p> tag with overflow-x:auto

So the final markup after processing would be something like:

<p>

  Some text then some <mjx-container> ... </mjx-container> math and then some block level (display) math: 

</p>

<p style="overflow-x:auto">

  <mjx-container display="true" ...> 

    ... 

  </mjx-container>

</p>

Regards

Murray