LaTeX markup stretching off edge of screen

ksdhart2

Senior Member
Joined
Mar 25, 2016
Messages
1,297
Hi all,

I'm having an issue with the forum's \(\LaTeX\) parser. Sometimes a particular line gets rendered as too long and "spills" off the edge of the page, thus introducing an ugly horizontal scroll bar. But, here's the real problem - when I post on my desktop computer at home, everything appears fine because my resolution is wide enough for it all to fit on one line. I only noticed this issue today when I happened to view the forum on my phone.

Is there a known fix for this issue? I thought about trying to manually insert line breaks as needed, but I'd have no idea where to place them, as the error appears to be one caused by having a smaller screen resolution.
 

MarkFL

Super Moderator
Staff member
Joined
Nov 24, 2012
Messages
2,951
We've already configured the LaTeX parser to break when content reaches 90% of the container width, but that doesn't seem to work correctly with XenForo, even though it does work correctly with vBulletin. I have no idea what about XenForo is causing that to fail.
 

mmm4444bot

Super Moderator
Staff member
Joined
Oct 6, 2005
Messages
10,505
We experienced that issue with vBulletin, too. I couldn't find a workaround, then. I just did a cursory keyword search at the MathJax and Xenforo support forums, but nobody seems to have posted about a general issue with LaTeX wrapping. (One discussion concerned a similar issue when using block-style, and a workaround was mentioned for the Firefox and IE browsers, but nothing in general.)

Can you post a link to one of the problematic posts?

😎
 

mmm4444bot

Super Moderator
Staff member
Joined
Oct 6, 2005
Messages
10,505
On my smartphone, I don't see a scroll bar, but swiping horizontally does show everything posted in red. Annoying, nonetheless. I will make a greater effort to revisit this issue.

In the meantime, everybody probably ought to avoid "long" strings of LaTeX. Perhaps, reformatting is the easiest workaround, for now.

\(\displaystyle 3(0) + 2 \equiv 2 \: (\text{mod} \: 6) \\
3(1) + 2 \equiv 5 \: (\text{mod} \: 6) \\
3(2) + 2 \equiv 2 \: (\text{mod} \: 6)\)3(2) + 2 = 8, but 8 is not an element of the ring, so we "reduce" it to one that is

\(\displaystyle 3(3) + 2 \equiv 5 \: (\text{mod} \: 6)
\)
3(3) + 2 = 11, but 11 is not an element of the ring, so we "reduce" it to one that is

\(\displaystyle 3(4) + 2 \equiv 2 \: (\text{mod} \: 6) \\
3(5) + 2 \equiv 5 \: (\text{mod} \: 6)
\)

If the above looks good to you, I'll edit into your post.

😎
 

ksdhart2

Senior Member
Joined
Mar 25, 2016
Messages
1,297
Yes, I think that's a perfectly acceptable workaround for the time being. Thank you.
 

MarkFL

Super Moderator
Staff member
Joined
Nov 24, 2012
Messages
2,951
I've found a workaround for the issue by including a CSS class selector to override the faulty MathJax CSS. Here's how it behaves on my XF dev site:

fmh_latex_0001.png

I've emailed the updated addon to Ted, so as soon as he updates it here, long expressions will wrap instead of overflowing the post container. :)
 

mmm4444bot

Super Moderator
Staff member
Joined
Oct 6, 2005
Messages
10,505
Yes … acceptable workaround for the time being …
Thanks. I'm going to wait to edit the post, so we have a post to confirm the fix.

😎
 

MarkFL

Super Moderator
Staff member
Joined
Nov 24, 2012
Messages
2,951
Ted has applied my update, and as you can see long expressions now wrap:

\(\displaystyle 1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1\)
 

mmm4444bot

Super Moderator
Staff member
Joined
Oct 6, 2005
Messages
10,505
It's not working for me in that thread referenced by ksdhart2 (post #4). I tried Firefox on a laptop and Chrome on a smartphone.

\(\;\)
 

MarkFL

Super Moderator
Staff member
Joined
Nov 24, 2012
Messages
2,951
It's not working for me in that thread referenced by ksdhart2 (post #4). I tried Firefox on a laptop and Chrome on a smartphone.
The long expression I posted above wraps for me even when I resize the browser window. However, it seems to be thrown off when line breaks are introduced. The easy fix for that is to simply post lines separately rather than trying to post a bunch of lines within the same tags.
 

ksdhart2

Senior Member
Joined
Mar 25, 2016
Messages
1,297
I'm having the same problem. This post wraps fine, but mine in the other thread still doesn't when I view it on my phone. Even more curious, if you look at the very top post in this thread, the LaTeX "wraps" onto a new line, even though there seems to be no reason for it to do so. This is what it looks like on my end:

12737
 

mmm4444bot

Super Moderator
Staff member
Joined
Oct 6, 2005
Messages
10,505
… it seems to be thrown off when line breaks are introduced. The easy fix for that is to simply post lines separately rather than trying to post a bunch of lines within the same tags.
I have edited that post so that each line of LaTeX is enclosed in tags. It's still not working.

\(\;\)
 

MarkFL

Super Moderator
Staff member
Joined
Nov 24, 2012
Messages
2,951
I'll look into it more when I have time. It could be a while as I have family coming in tomorrow for a week, and to be honest, these are all issues MathJax should be addressing, not me. :)
 

MarkFL

Super Moderator
Staff member
Joined
Nov 24, 2012
Messages
2,951
This is how I would get lines like that to work:

\(3(2)+2\equiv2\mod6\)\(\quad3(2)+2=8\), but \(8\) is not an element of the ring, so we "reduce" it to one that is.
 

ksdhart2

Senior Member
Joined
Mar 25, 2016
Messages
1,297
That seems like the most sensible approach. I'm not really sure why I felt the red text needed to be part of the LaTeX. It's just as easy, if not easier, to do red text outside of the markup.
 

MarkFL

Super Moderator
Staff member
Joined
Nov 24, 2012
Messages
2,951
That seems like the most sensible approach. I'm not really sure why I felt the red text needed to be part of the LaTeX. It's just as easy, if not easier, to do red text outside of the markup.
Ideally, the HTML/CSS served up by MathJax would wrap correctly under all circumstances, but as we've found here unfortunately it doesn't.
 

mmm4444bot

Super Moderator
Staff member
Joined
Oct 6, 2005
Messages
10,505
Top