Page MenuHomePhabricator

Column layout for references doesn't play well with float elements
Closed, DeclinedPublic

Description

On certain wikipedia's like zhwp, some users would put images or portal links, floating to the right side, in the References section with the single-column-by-default <references />. This becomes a concern when migration to responsive layout (T33597) is put on the table, as CSS multi-column layout tend to limit the whole div block inside a strict, rectangular box. As a result, an unfilled area appears below the flowed elements.

An obvious page-level fix is to move these things to a gallery or "see also" section, but it makes the config change objection-worthy. An alternative workaround on the CSS level would be doing clear: both to transfer the blame away from reference wrappers.

Event Timeline

An alternative fix on the CSS level would be doing clear: both to transfer the blame away from reference wrappers.

I don't see how that fixes the possible objection--it just moves the whitespace to above the div from beside the div.

An alternative fix on the CSS level would be doing clear: both to transfer the blame away from reference wrappers.

I don't see how that fixes the possible objection

A CSS-level workaround would only require a single point of change to achieve generally acceptable (I guess) layout. Many objections on zhwp are, in fact, objection to "breaking" pages with possibly intentional single-column references and requiring a large volume and edits to fix.

it just moves the whitespace to above the div from beside the div.

Since most of these floats are portal/Commons/Wikisources links (none of which appear particularly tall), doing such a move should make the big wasted space smaller, and this problem will appear more tolerable. To quote a Chinese proverb, this quick workaround is essentially taking bricks from the wall on the east to fix the one on the west

An alternative fix on the CSS level would be doing clear: both to transfer the blame away from reference wrappers.

Oppose to use such clear:both method because it would make the layout more strange in those cases, refer to this testing.

Why <references /> instead of just <references>? Isn't it now broken following RemexHtml?

Why <references /> instead of just <references>? Isn't it now broken following RemexHtml?

<references/> is not an HTML tag. Even if it were, only certain HTML tags cannot be self-closed. Regardless, your question is irrelevant to this task.

I'm going to decline this task. If any particular wiki wants to fix this globally with CSS rather than with moving the boxes in question, that's their prerogative (and they should take heed of the negatives, one of which is already listed in this task). The change requested has probably about 0% chance of being implemented into the core software.