Inline Maths and Horizontal Overflow

[Mr. Kenny]

Version: 3.2.2

Hi,

I appreciate the help in advance!

I'm using the CSS code shown here to add horizontal scrollbars to long (inline) expressions.

mjx-container:not([display]) {
  display: inline-grid;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

This code works perfectly on long inline expressions. For example, it correctly changes this inline expression

into this

However, this code also seems to be introducing horizontal scrollbars to short inline expressions.

As you can see, the resulting scrollbars are also of varying width so I can't simply add left and right padding to the code above to fix the issue as it would create large gaps in certain places (I also tried adding padding as percentages which didn't work either).

I assume that I should be using something other than display:inline-grid but I can't figure out what. (I've also tried inline-flex with no joy.)

Can anyone a bit more knowledge offer some advice?

Thank you for your help! :)

[Murray]

Hi Mr. Kenny

It's always best to provide a minimal complete example so we can see what, if any, other CSS may be affecting your output.

I played around with it a bit and will give you some pointers.

(1) First suggestion is to remove all your page's CSS and leave only the mjx-container directive. 

If everything looks good, then add your other CSS directives one at a time until it breaks.

(2) I tried to recreate your issue and did so (kind of) by using the same style as yours for the mjx-container, and then styling the ancestor of the mjx-container (that is, mjx-math) like this (I'm using TEX-CHTML):

mjx-container:not([display]) mjx-math {
  width: 110%;
}

I'm using a percentage since it appears the scrollbars in your screen shot require more scroll the wider the math is. 

This is the HTML:

  <p>A short bit of inline math: $x+y+z$ followed by blah.</p>
  <p>A longer bit of inline math: $x+y+z+4+5+6+7+8+9$ followed by blah.</p>

The outcome is like this, which is similar to yours:

So to fix your situation, you might wish to do the reverse of what I did - that is, try playing with the width of the mjx-math element, using something like width: 90%.

It will probably end up meaning some of the math gets cut off, but at least you might get some insight into why it's happening.

Regards

Murray

[Mr. Kenny]

Hi Murray,

Thank you for your detailed reply, greatly appreciated.

I've provided a minimal example below as requested.

https://jsfiddle.net/okhe7a28/

As you can see, it's not just the fact that horizontal scrollbars appear that's confusing me but it's also when they appear.

For example, on the final sentence, there is nothing being cut off for "a", there is a small bit cut off for "a+b", there is a slighter bigger cut off for "a+b", but then there is nothing cut off again for the 4th, longest expression?

This is why I don't think that adding padding or changing widths (using either pixels or percentages) fixes the issue as it it would introduce large gaps for certain expressions and not for the others.

Also, when I add your CSS code above, it only seems to make a difference if I use a width greater than 100%? Perhaps I am missing something about how to implement it?

More importantly, I would have assumed that many MathJax users would also have a need for long inline expressions to not be cut off on smaller screens, and yet the Stack Overflow link that I included in my first post was the only discussion that I could find about it. Is there some more obvious way to deal with this than what I'm doing? I know that v4 alpha has line breaks (and I know that you have your own system as well) but I'd rather stay on MathJax v3. Is there some easier way to deal with this that I'm just not seeing?

Thank you again for your help, it really is appreciated! :)

[Mr. Kenny]

Additional note on my new comment above:

If I change all of the characters to "i"s at the end of each expression, the scrollbars disappear.

https://jsfiddle.net/okhe7a28/2/

Therefore, it appears that the scrollbars will only appear if certain characters are at the end (and possibly at the beginning) of the expressions.

I'd be a bit lost as to how to deal with that. I don't believe that I can introduce something that you suggested as I assume that it would cause unnecessary gaps for certain expressions and not for others, but I also don't know which characters are and are not the troublesome characters.

Does anything come to your mind?

Thank you again! :)

[Murray]

Hi again

When I first tried your example on my local PC it looked fine. That's why I tried to recreate your problem.

But I can see in your first fiddle that indeed there's a problem.

I couldn't test my suggested solution because the default worked fine for me :-(

But here's a fork of your first fiddle with no scrollbars:

https://jsfiddle.net/mbourne/b5jvpawf/

(1) We need a small bit of padding for the sides:

mjx-container:not([display]){
  display: inline-grid;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;

  padding: 0 2px;
}

This is simplest and appears to work fine.

(2) Just for completeness, my earlier solution needed position:relative AND a border, (which is all rather strange to me).

mjx-container:not([display]) mjx-math {

  width: 80%;
  position: relative;
  border: 1px solid #fff;
} 

But since the padding in Solution (1) does the trick, that's best.

Regards

Murray

[Mr. Kenny]

Hi Murray,

Thank you again for the detailed reply, it truly is appreciated.

Unfortunately, your solution does not fix the issue. I've included different expressions in the below fiddle that should better highlight this.

https://jsfiddle.net/75cvL8fj/1/

Without the CSS, the two bottom expressions are of similar length.

-------------------------------------------------------

-------------------------------------------------------

With the CSS turned on, the bottom expression still has no scrollbar whereas the other expression has a very large one.

-------------------------------------------------------

-------------------------------------------------------

Any attempt to remove the scrollbar using the methods that you've described results in large gaps in both expressions.

-------------------------------------------------------

-------------------------------------------------------

The issue is obviously the whitespace created by the CSS below (highlighted in yellow), but I have no idea 1) why it exists and 2) why it's created for the first expression and not the second.

-------------------------------------------------------

-------------------------------------------------------

I feel like there is likely a simple solution to this, e.g. that I should be using something other than display: inline-grid, but I haven't been able to figure out that solution.

Also, as mentioned previously, I'm still quite confused as to why I can't find any other threads about dealing with long inline expressions anywhere? I feel like I'm missing something obvious!

Any thoughts?

Thank you again for your help! :)

[Davide Cervone]

The issue is actually with the hidden MathML that is inserted to help screen readers and other assistive technology be able to read the math.  Sometimes that MathML is a different size from the MathJax output, and that is what is causing the size of the contents to sometimes be wider than the container.  You can overcome this by adding the css:

mjx-assistive-mml {

  bottom: 0px;

  right: 0px;

}

I think you will find that does the trick.  See

https://github.com/mathjax/MathJax/issues/2936

for the discussion where this first came up.

Davide

On May 26, 2023, at 5:15 PM, Mr. Kenny <ciaran...@gmail.com> wrote:

Hi Murray,

Thank you again for the detailed reply, it truly is appreciated.

Unfortunately, your solution does not fix the issue. I've included different expressions in the below fiddle that should better highlight this.

https://jsfiddle.net/75cvL8fj/1/

Without the CSS, the two bottom expressions are of similar length.

-------------------------------------------------------

<screen 1.png>

-------------------------------------------------------

With the CSS turned on, the bottom expression still has no scrollbar whereas the other expression has a very large one.

-------------------------------------------------------

<screen 2.png>

-------------------------------------------------------

Any attempt to remove the scrollbar using the methods that you've described results in large gaps in both expressions.

-------------------------------------------------------

<screen 3.png>

-------------------------------------------------------

The issue is obviously the whitespace created by the CSS below (highlighted in yellow), but I have no idea 1) why it exists and 2) why it's created for the first expression and not the second.

-------------------------------------------------------

-- 
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-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/630175c4-7ac8-44b4-8110-506370b7e4ben%40googlegroups.com.
<screen 2.png><screen 3.png><screen 1.png><screen 4.png>

[Mr. Kenny]

Hi,

Perfect, that has indeed done the trick! Thank you Davide for the explanation and the code,  it's very helpful. :)

And thank you again Murray for taking the time to respond in so much detail over the past few days, it truly is appreciated!

A good day to you both!

[Mr. Kenny]

Hi,

Actually, perhaps I spoke too soon.

Although your suggestion has fixed the example that I gave, I can still find many examples in which the scrollbars still appear, some of which are shown at the bottom of the following fiddle.

https://jsfiddle.net/nfo74b2h/3/

Again, this appears to be a bit random as the smallest scrollbar appears for the shortest expression of the three whereas the longest expression has no scrollbar at all.

Any thoughts?

Thank you again for your help! :)

[Davide Cervone]

That is due to your mjx-container:not([display]) rule.  You need remove the display and max-width properties.  Make it:

mjx-container:not([display]){

  overflow-x: auto;

  overflow-y: hidden;

}

and that should take care of it.

Davide

On May 27, 2023, at 6:46 AM, Mr. Kenny <ciaran...@gmail.com> wrote:

Hi,

Actually, perhaps I spoke too soon.

Although your suggestion has fixed the example that I gave, I can still find many examples in which the scrollbars still appear, some of which are shown at the bottom of the following fiddle.

https://jsfiddle.net/nfo74b2h/3/

Again, this appears to be a bit random as the smallest scrollbar appears for the shortest expression of the three whereas the longest expression has no scrollbar at all.

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/7a449bdc-5aca-4d77-8b1b-4ba112ff5146n%40googlegroups.com.
<sc new 2.png>

[Mr. Kenny]

Hi,

Unfortunately, that would then defeat the purpose of the code, as I would like a horizontal scrollbar to appear for any inline expression that does not fit onto the screen, but not for ones that do fit on the screen, as described in the first sentence of the fiddle above.

https://jsfiddle.net/nfo74b2h/3/

Removing the lines that you suggest would instead remove scrollbars entirely.

Is there a way to achieve this that you know of?

Thank you again for your help!

[Davide Cervone]

Sorry, wasn't thinking.  Try adding:

mjx-container:not([display]) > mjx-math {

  margin-right: .3px;

}

and see if that helps.

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/55b7a8fa-a797-4b8b-ba82-5408e4d74ea1n%40googlegroups.com.

[Mr. Kenny]

That seems to have done the trick, thank you again! :)