Page MenuHomePhabricator

<math display=block> does not interact well with floating images
Open, MediumPublicBUG REPORT

Assigned To
None
Authored By
Jacobolus
Jun 21 2023, 12:47 AM
Referenced Files
F41570747: Screenshot 2023-12-07 at 8.23.08 AM.png
Dec 7 2023, 4:26 PM
Restricted File
Dec 5 2023, 7:01 PM
F41563286: Screen Shot 2023-12-05 at 10.50.53 AM.png
Dec 5 2023, 6:51 PM
Unknown Object (File)
Dec 5 2023, 6:49 PM
F41563266: Screen Shot 2023-12-05 at 10.44.32 AM.png
Dec 5 2023, 6:49 PM

Description

Traditionally Wikipedia articles have used :<math>...</math> for indentation, which creates a definition list (a "description" with no corresponding "term"). Because this supposedly causes issues for some screen readers, several years ago a "block" mode was added to the math plugin, invoked via the wiki markup <math display=block> ... </math>.

When colon-indented :<math> is used, the result is a block element which takes up as much width as the content rendered by the LaTeX inside. When it would collide with a floating image on the right, the math will be pushed down the page until it can fit entirely. Sometimes this results in some extra whitespace but at least the formula is always legible.

When such formulas are replaced with <math display=block>, they are no longer correctly pushed below floating images they would collide with. Instead the CSS is set up so that the math box will take only as much horizontal space as is available and then display a scrollbar for a reader to view the rest of the content of the math box by scrolling to the right.

This causes a severe problem on displays of moderate width (e.g. a laptop trying to show two Wikipedia windows side by side or a narrow tablet), because floating images will sometimes take up most of the width of the content view, leaving only a skinny part for paragraphs of text or math (etc.) on the left. For text this is moderately annoying but mostly okay, because the text will reflow, so sometimes only a few words will render per line, but all the text will still be visible, just with more line breaks than ideal. For <math display=block> the result is at best ugly and at worst completely crippling. Sometimes barely any of the formula will show, forcing the reader to scroll a skinny sliver of "content box" past a very wide formula.

The only workaround is to never put formulas near to floating images. This is a very annoying burden to place on wiki authors, because the problematic collisions only occur with some (but not the most common) display widths, so in general they don't notice the problem. Then readers with an unlucky display width just find the formula unhappily unreadable. Figuring out how to rearrange formulas and images to avoid the issue is error prone and fiddly, and sometimes impossible without resorting to massive amounts of unnecessary whitespace.

Ideally these math boxes would push down the page until they can fit. The side scrolling can be reserved for cases when the math content still doesn't fit within the width of the window even when there are no floating images.

Event Timeline

Physikerwelt added subscribers: Jdlrobson, Physikerwelt.

@Jdlrobson Maybe the web-team can suggest what should be done here?

ovasileva triaged this task as Medium priority.

@Jacobolus or @Physikerwelt I can see how math is parsed and viewed on the wiki pages, still to correctly identify the issue can you send a wiki page example and a screen width that the behaviour appears on.
Also if you can provide a couple of screenshots of the issue, we can check if it is a markup or css issue more precisely.

Not enough information available atm. Please reopen if screenshots are available.

Here's a screenshot from English Wikipedia "Ellipse":

Screen Shot 2023-12-05 at 10.44.32 AM.png (1×1 px, 249 KB)

You can see how in a relatively narrow viewport the two math formulas at the left have gotten scrunched into a very narrow column by the image, and therefore display with scrollbars.

If using a colon for indentation instead of math display=block, they would be pushed below the floating image and would be fully legible, albeit with some extra blank space in between.

Screen Shot 2023-12-05 at 10.50.53 AM.png (1×1 px, 271 KB)

When the viewport is wider both versions look more or less the same. Something like:

{F41563293}

@Jacobolus two of your images are private so I'm not able to follow your example, could you fix this? In the sidebar you should be able to change the permissions if you click the link and edit the file:

Screenshot 2023-12-07 at 8.23.08 AM.png (262×286 px, 30 KB)

Are those all visible now?

For anyone curious, the required method is apparently to click the image in the sidebar, then click 'edit file', then change 'visible to' to some wide category of viewers. It seems a bit unhelpful for the default for uploaded images to only be visible to the uploader. Also, weirdly, the sidebar currently says "File Not Attached" about https://phabricator.wikimedia.org/F41563293 which from what I can tell is included in my comment.

On the mobile site the image would take up the full width of the article. The desktop site should behave the same but doesn't. In short I think the image is the issue not the math equation.

@Jdlrobson The issue is the interaction between floating images and the CSS for display=block math formulas, as viewed in the desktop site. However semantically invalid it may be, the previous colon indentation method renders correctly (or at least correctly enough to be usable), whereas the display=block method renders (in my opinion) severely incorrectly.

It's hard to predict precisely when this issue will occur without testing every possible width of viewport. Working around the conflict is extremely cumbersome, requiring moving formulas and images around in ways that harm the narrative flow of articles.

As a result, it's generally safer to just never use display=block and stick to colon indentation. But I assume this is not what developers would prefer authors decide to do.