Last modified: 2014-10-18 12:57:09 UTC
Long formulas break the layout of articles and result in horizontal scrolling. For example, in [[Labelled enumeration theorem]], one of the equations in the lead makes the page width just slightly wider than the screen on my Nexus 5. The longer equation revealed when the "Proof of the theorem" section is opened makes it quite a bit wider. <math> sections should be handled the same way as other extra-wide elements like images and tables, with horizontal scrolling on only that element while the rest of the article remains in place. Note: This also affects the Android app. In the iOS app, by contrast, the width stays fixed and the rest of the formula is simply cut off.
Prioritization and scheduling of this bug is tracked on Trello card https://trello.com/c/ytpXSO74
Do you mean the images? Our css hacks do not seem to be targeting this but this looks like a bug in the Math extension - it should be wary that what it outputs effects small screens.
This is not an easy problem to solve as the math markup generates an image (which is an inline element) and the image can be contained in any sort of HTML block element. In other words, the math markup doesn't generate any block element of its own. For example, in the cited case, the math image is contained in a <dl> tag. If the <dl> tag were given the CSS "overflow-x: auto;" that would fix the problem. Unfortunately, CSS does not currently support parent selectors, so the only way to apply "overflow-x: auto;" to all <dl>s containing math images would be with jQuery, and even then it would only solve the issue for cases where the math is in a <dl>. It is also common for math images to live in div and paragraph tags. Once we can use CSS parent selectors (CSS4), we might be able to fix this, but I don't see any good solution in the meantime. One possible, though problematic solution would be to set the max-width for all math images to 100%. This would cause the math images to always scale down to fit on the screen. For extremely long equations, though, this would cause them to be rendered extremely small.
How about we use JS to wrap all <img> tags from math (hopefully there's a way to identify them?) in a div and set overflow on that?
(Talking about only on Mobile, although making that a general thing would be good too.
The bug isn't really in the Math extension either. The bug is that any HTML block element in an article can contain an arbitrarily wide element (such as an image), which causes the page to scroll horizontally. In theory, we could fix this by applying "overflow-x: auto;" to all common block elements: dl, p, div, etc. but I have no idea what other problems that might cause.
On bug 66680 I recommend the max-width: 100% solution; it's easy, but perhaps should be paired with restoring pinch-to-zoom...
Change 166075 had a related patch set uploaded by Bmansurov: Wrap math formulas in a scrollable div https://gerrit.wikimedia.org/r/166075
Change 166075 abandoned by Bmansurov: Wrap math formulas in a scrollable div Reason: https://bugzilla.wikimedia.org/show_bug.cgi?id=72165 https://gerrit.wikimedia.org/r/166075
Issue should be addressed in the math extension...
A solution would be change the default rendering mode to MathML. I'd be happy to work on the Math part, if one explicit person that has ever worked with mobile before, decides to help me with testing.
*** This bug has been marked as a duplicate of bug 72165 ***
