Interestingly the overlap is addressed on https://it.wikipedia.org/wiki/Spagna?useskin=vector-2022 but it creates a new problem when paired with floated images. I will be curious to see how our work on responsive images improves this:

Regarding floats, I created https://it.wikipedia.org/wiki/Utente:Jdlrobson/tables to test how floated table elements behave now and https://en.wikipedia.org/w/index.php?title=User%3AJdlrobson%2Ftables# for how they used to behave

• For the most part they work, but in some resolutions it is possible for one word paragraphs:
  
  . We may want to consider adding a rule that checks for when both menus are open and disables floats. This already happened prior to this work,
• Table's floated via style attribute will now take up a full line. Personally I think this is acceptable, as ideally these should be using the floatright and floatleft classes and this would ''encourage better on-wiki markup''. We probably want to discuss and document that decision, however.

Today a problem with infoboxes appeared in de.Wikipedia under Vector2022. Example: https://de.wikipedia.org/wiki/Japan?useskin=vector-2022

Some points: infoboxes using "wikitable" are affected (article text starts below and not on the left side of the infobox). The problem disappears when JavaScript is deactivated (tested under Firefox with the javascript.enabled set to false). Is there a connection to this task here?

Link to the discussion in de.wikipedia: https://de.wikipedia.org/wiki/Wikipedia:WikiProjekt_Vorlagen/Werkstatt#Vorlage:Infobox_Pass

@Kallichore yes thanks for reaching out. It seems like German Wikipedia is using a custom class "float-right". Is there any reason that can't use the MediaWiki supported "floatright" class instead?

Hi @Kallichore I posted https://de.wikipedia.org/w/index.php?title=Vorlage%3AInfobox_Staat&diff=245697541&oldid=237793643 - could you get a page patroller to review this to address the issue? Thanks in advance!

@Jdlrobson : I am not an expert here . But many pages are affected by this. The search function gives over 30k results for "float-right" in de.Wikipedia:
https://de.wikipedia.org/w/index.php?search=insource%3A%2Ffloat%5C-right%2F&title=Spezial:Suche&profile=advanced&fulltext=1&ns0=1&ns10=1

In contrast, searching "floatright" gives just 173 results.

In T366314#9869560, @Kallichore wrote:

@Jdlrobson : I am not an expert here . But many pages are affected by this. The search function gives over 30k results for "float-right" in de.Wikipedia:
https://de.wikipedia.org/w/index.php?search=insource%3A%2Ffloat%5C-right%2F&title=Spezial:Suche&profile=advanced&fulltext=1&ns0=1&ns10=1

In contrast, searching "floatright" gives just 173 results.

Understood.

• The float-left and float-right classes are provided by a gadget: https://de.wikipedia.org/wiki/MediaWiki:Gadget-dewikiCommonLayout.css.
• On the other hand floatright and floatleft are classes provided by the MediaWiki software:

I would be interested to understand the rationale from German Wikipedia for why this new class was created before suggesting a solution. @hgzh do you have any context on this?

In the mean time, I recommend adding the floatleft and floatright` classes alongside the existing ones in German Wikipedia.

This back and forth wouldn't be necessary if my suggestion from T330527#9849072 were implemented. :)

The float-left and float-right classes are quite old, introduced in January 2007 (https://de.wikipedia.org/w/index.php?title=MediaWiki%3ACommon.css&diff=25858783&oldid=25637989) when sortable tables were new and it became clear that the now-deleted Template:Prettytable that was used for common template styling was too unflexible as it didn't support adding new classes for tables (Template:Prettytable had siblings Template:Prettytable-L and Template:Prettytable-R that did the floating stuff).

floatleft and floatright already existed back then (https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/2daff0bbf05895a8d4f1000aaaacbb99475dcc2f/skins/monobook/main.css) but were explicitly defined for images and had special styling in place, which I think may have had unwanted effects on tables and infoboxes. That happened all quite some time before I became involved in technical details of Wikipedia, but from my beginning times I still remember that the common point of view in dewiki was that the global classes have bad effects in some cases (I don't have to time to do further investigation). In fact, some of the special styling such as position:relative was in place for longer and got removed only "recently" - and the styles still live in a thumbnail file. dewiki just never considered usage, floatright is used just 170 times in main and template namespace, while float-right has 30000 usages.

Considering the number of usage I wouldn't like to change 30000 pages and common dewiki practice (I think also the dewiki-influenced projects in dialects are affected). Also, there are wikitables that have floating defined by inline styles (https://de.wikipedia.org/w/index.php?search=insource%3Awikitable+insource%3A%2Ffloat%3A+*right%2F&title=Spezial%3ASuche&profile=advanced&fulltext=1&ns0=1&ns10=1) which are also broken. getComputedStyle sounds like a good solution for both problems.

Change #1040209 had a related patch set uploaded (by Jdlrobson; author: Bernard Wang):

[mediawiki/skins/Vector@master] Avoid wrapping floated tables using computed styles

https://gerrit.wikimedia.org/r/1040209

Okay we've been convinced that @Izno's solution makes sense! I'll review that today in time for next week.

With one caveat: We do intend the JavaScript to be a stopgap solution - and in future we will likely flag developer warnings where floatleft and floatright classes are not being used, and remove it entirely, so it would be a good idea to start discussions around switching over to floatleft and floatright in future on German Wikipedia and if there are any issues with the default styles we can amend them to make that a smoother transition.

Change #1040209 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Avoid wrapping floated tables using computed styles

https://gerrit.wikimedia.org/r/1040209

In T366314#9871566, @Jdlrobson wrote:

With one caveat: We do intend the JavaScript to be a stopgap solution - and in future we will likely flag developer warnings where floatleft and floatright classes are not being used, and remove it entirely, so it would be a good idea to start discussions around switching over to floatleft and floatright in future on German Wikipedia and if there are any issues with the default styles we can amend them to make that a smoother transition.

I've filed T366968: floatleft/right classes not documented great about the suggestion to use float(left|right) since there's some documentation and not-documentation that could probably use fixing.

Thanks Izno for filing the documentation task, I was about to suggest something similar if the floatleft/right classes will become mandatory for positioning. I guess the non-javascript version will be to directly output the wrapper div from parser?

Another problem popped up in combination with sticky table headers. Because of the overflow, position:sticky calculates from the wrapper div which makes the sticky header unusable. See https://de.wikipedia.org/wiki/Liste_der_Kulturg%C3%BCter_in_Aarberg?useskin=vector-2022 as an example. I don't think this is fixable in pure css.

The reason why float-(left|right) are preferred in German Wikipedia is that they provide a small margin-top. Therefore they can be stacked.

Fursthermore, borh MW float(left|right) trigger italic under certain conditions. This is absolutely inacceptable for general purpose.

• Unix philosophy: Do one thing, and do it well.
• Do float the block, but do not modify appearance of text or anything else.
• The mixture of both effects in one class is a very stupid idea.
• MW float(left|right) would turn text into italic with no reason, and this will not be accepted.

You might note that there are large amounts of inline style="float: in many Wikis.

The italics rule is not present anymore in the current stylesheet.

In T366314#9873117, @hgzh wrote:

The italics rule is not present anymore in the current stylesheet.

But it has been for almost two decades, and therefore the MW CSS has been inacceptable for a long long time.

• It has been removed very recently, but the .css and .less resources were merged and moved and deleted so often that I cannot blame in the history any longer.

Regarding inline style, style="float: is not the full picture, but also float="right".

• Please see enWP (210 occurrences).

In T366314#9873118, @PerfektesChaos wrote:

Regarding inline style, style="float: is not the full picture, but also float="right".

• Please see enWP (210 occurrences).

float is not a valid HTML attribute nor has it ever been so far as I can tell. Even if it were, browsers transform attributes into the equivalent CSS (saving that the invalid attributes now deprecated/removed have 0 specificity).

You may be thinking of align, but align functions quite a bit differently, setting text alignment of itself and the margins of its children (at least according to the WHATWG specification, section 15, which is non-normative text).

Still, the overall point of "we have lots of inline styles" is valid, but I'm sure it is a common refrain for the WMF web team ;).

HTML 4.0 – While clear= has been adopted, float= was implmented in all major browsers. Since it worked, it was used. Apparently still today. I am living in the wwwworld since 1995. Nevertheless, all these HTML attributes were deprecated in 1998 in favour of CSS. Wikis were founded in 2001, none might have occurred ever in any Wiki, but you may scan English Wikipedia for quite common usage of align=.

No MediaWiki change is permitted to cause disruptive changes in appearance of wiki pages, nor would it be legal to enforce all 950 Wikis to change some 100,000 pages to maintain apppearance of the last two decades.

• If you feel a need to support Vector2022, it is WMF business to implement methods which render all existing valid Wikisyntax and valid CSS correctly.
• You are not permitted to abolish any local class nor valid local usage of CSS.
• It is your job to render valid CSS in valid HTML correctly, within security considerations of HTML blacklist.
• Not the valid pages are to be changed for appropriate rendering, but good and smart programming in skins and mobile if necessary.
• If you are not able to implement that just leave it.

The use case as introducing T361737 has been known before Vector2022.

• If somebody decides to put the navigation sidebar on the right side rather than on the left side (as for more than two decades) or on top (as on mobile) it is their responsibility to make this design work.
• If you come to the conclusion that it is a stupid idea to use the right column in LTR scripting rather than the left one before text lines start then discontinue this approach. While the left margin is constant in LTR scripting, right margin depends on content.
• If you want to keep the right end based design, the navigation elements need to roll out interactively by JavaScript.
• If anonymous is using the standard design (Vector2022 is heading for that) with no JavaScript enabled WMF made a mess of it.
• It has a certain reason why all web design for LTR scripting is using top, left, bottom but never ever right hand side for navigation.

In T366314#9873690, @PerfektesChaos wrote:

HTML 4.0 – While clear= has been adopted, float= was implmented in all major browsers.

There is only clear by your link. I googled, and I indeed haven't found any mentions of an attribute float. But this doesn't matter: MediaWiki parser doesn't recognize this attribute and doesn't include it in the HTML output, so it can be removed with no effect.

In T366314#9876423, @Jack_who_built_the_house wrote:

so it can be removed with no effect.

It must not be removed, but replaced by a valid method, if obviously desired, and deleted if no effect is intended.

BTW: I did mention that around 2000 major browsers did support float= since implemented before HTML standardization started. It worked at least for a while, and for many years MW parsing forwarded any attribute as-is.

In T366314#9873690, @PerfektesChaos wrote:

No MediaWiki change is permitted to cause disruptive changes in appearance of wiki pages, nor would it be legal to enforce all 950 Wikis to change some 100,000 pages to maintain apppearance of the last two decades.

• If you feel a need to support Vector2022, it is WMF business to implement methods which render all existing valid Wikisyntax and valid CSS correctly.
• You are not permitted to abolish any local class nor valid local usage of CSS.
• It is your job to render valid CSS in valid HTML correctly, within security considerations of HTML blacklist.
• Not the valid pages are to be changed for appropriate rendering, but good and smart programming in skins and mobile if necessary.
• If you are not able to implement that just leave it.

I generally agree with this. Having one particular CSS property not work as expected due to ad hoc considerations evokes the principle of least astonishment and Zen of Python's "Special cases aren't special enough to break the rules" both of which it violates. And the best practice to write CSS is {| class="infobox", not {| class="infobox floatright". Making rendering dependent on HTML instead of CSS (which is the one intended for this) sounds dubious.

The use case as introducing T361737 has been known before Vector2022.

• If somebody decides to put the navigation sidebar on the right side rather than on the left side (as for more than two decades) or on top (as on mobile) it is their responsibility to make this design work.
• If you come to the conclusion that it is a stupid idea to use the right column in LTR scripting rather than the left one before text lines start then discontinue this approach. While the left margin is constant in LTR scripting, right margin depends on content.
• If you want to keep the right end based design, the navigation elements need to roll out interactively by JavaScript.
• If anonymous is using the standard design (Vector2022 is heading for that) with no JavaScript enabled WMF made a mess of it.
• It has a certain reason why all web design for LTR scripting is using top, left, bottom but never ever right hand side for navigation.

With this I disagree. Tables leaking out of the layout is a problem that may happen on any width, with any placement of sidebars. Tables should be scrollable horizontally and neither stretch the page nor overlap with sidebars, regardless of the skin.

Thanks Edward. @ovasileva and @JScherer-WMF were gong to take a look. This can move to sign off when done, as the goal is to uncover issues, not fix them right away.

I did some exploratory QA and came up with the following list of problem URLs:

• https://ru.wikipedia.org/wiki/%D0%A7%D0%B5%D0%BC%D0%BF%D0%B8%D0%BE%D0%BD%D0%B0%D1%82_%D0%A3%D0%BA%D1%80%D0%B0%D0%B8%D0%BD%D1%8B_%D0%BF%D0%BE_%D1%84%D1%83%D1%82%D0%B1%D0%BE%D0%BB%D1%83_%D1%81%D1%80%D0%B5%D0%B4%D0%B8_%D0%B6%D0%B5%D0%BD%D1%89%D0%B8%D0%BD
• https://ru.wikipedia.org/wiki/%D0%9A%D0%BE%D0%B3%D0%BE%D0%BB%D1%8C%D0%BE%D1%81-%D0%92%D0%B5%D0%B3%D0%B0
• https://ru.wikipedia.org/wiki/%D0%9D%D0%BE%D0%B2%D0%BE%D0%B0%D1%83%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B9_%D1%81%D0%B5%D0%BB%D1%8C%D1%81%D0%BE%D0%B2%D0%B5%D1%82
• https://ru.wikipedia.org/wiki/%D0%9A%D1%83%D0%B1%D0%BE%D0%BA_%D0%BC%D0%B8%D1%80%D0%B0_%D0%BF%D0%BE_%D0%B1%D0%B8%D0%B0%D1%82%D0%BB%D0%BE%D0%BD%D1%83_2007/2008._%D0%93%D0%BE%D0%BD%D0%BA%D0%B8_%D0%BF%D1%80%D0%B5%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F
• https://ru.wikipedia.org/wiki/%D0%94%D1%80%D0%B5%D0%BC%D0%BB%D0%B8%D0%BA_%D0%BC%D0%B5%D0%BB%D0%BA%D0%BE%D0%BB%D0%B8%D1%81%D1%82%D0%BD%D1%8B%D0%B9
• https://ru.wikipedia.org/wiki/%C5%A0koda_Superb
• https://ru.wikipedia.org/wiki/%D0%9A%D0%B2%D0%B0%D0%BB%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%86%D0%B8%D1%8F_%D1%87%D0%B5%D0%BC%D0%BF%D0%B8%D0%BE%D0%BD%D0%B0%D1%82%D0%B0_%D0%BC%D0%B8%D1%80%D0%B0_%D0%BF%D0%BE_%D1%85%D0%BE%D0%BA%D0%BA%D0%B5%D1%8E_%D1%81_%D1%88%D0%B0%D0%B9%D0%B1%D0%BE%D0%B9_%D1%81%D1%80%D0%B5%D0%B4%D0%B8_%D1%8E%D0%BD%D0%B8%D0%BE%D1%80%D1%81%D0%BA%D0%B8%D1%85_%D0%BA%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4_2007_(%D0%B6%D0%B5%D0%BD%D1%89%D0%B8%D0%BD%D1%8B)

Some screenshots:

Change #1041311 had a related patch set uploaded (by Jdlrobson; author: Bernard Wang):

[mediawiki/skins/Vector@wmf/1.43.0-wmf.8] Avoid wrapping floated tables using computed styles

https://gerrit.wikimedia.org/r/1041311

As expected, lots of broken stuff reported in ruwiki due to class="noresize":
https://ru.wikipedia.org/wiki/Life_Is_Strange_(серия_игр)#Игры

https://ru.wikipedia.org/wiki/Indika

Change #1031459 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[operations/mediawiki-config@master] Drop unused config, enable responsive tables on group 0

https://gerrit.wikimedia.org/r/1031459

Change #1031459 merged by jenkins-bot:

[operations/mediawiki-config@master] Drop unused config, enable responsive tables on group 0

https://gerrit.wikimedia.org/r/1031459

Mentioned in SAL (#wikimedia-operations) [2024-06-11T20:31:38Z] <ladsgroup@deploy1002> Started scap: Backport for [[gerrit:1031459|Drop unused config, enable responsive tables on group 0 (T301212 T366314)]]

Mentioned in SAL (#wikimedia-operations) [2024-06-11T20:34:14Z] <ladsgroup@deploy1002> ladsgroup, jdlrobson: Backport for [[gerrit:1031459|Drop unused config, enable responsive tables on group 0 (T301212 T366314)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Change #1041311 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.43.0-wmf.8] Avoid wrapping floated tables using computed styles

https://gerrit.wikimedia.org/r/1041311

Mentioned in SAL (#wikimedia-operations) [2024-06-11T20:45:56Z] <ladsgroup@deploy1002> Finished scap: Backport for [[gerrit:1031459|Drop unused config, enable responsive tables on group 0 (T301212 T366314)]] (duration: 14m 18s)

Mentioned in SAL (#wikimedia-operations) [2024-06-11T20:46:45Z] <ladsgroup@deploy1002> Started scap: Backport for [[gerrit:1041311|Avoid wrapping floated tables using computed styles (T366314)]]

Mentioned in SAL (#wikimedia-operations) [2024-06-11T20:49:22Z] <ladsgroup@deploy1002> jdlrobson, ladsgroup: Backport for [[gerrit:1041311|Avoid wrapping floated tables using computed styles (T366314)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-06-11T21:01:13Z] <ladsgroup@deploy1002> Finished scap: Backport for [[gerrit:1041311|Avoid wrapping floated tables using computed styles (T366314)]] (duration: 14m 28s)

The following issues where fixed by the backport T366314#9882188

• https://ru.wikipedia.org/wiki/%C5%A0koda_Superb?useskin=vector-2022
• https://ru.wikipedia.org/wiki/Indika?useskin=vector-2022
• https://ru.wikipedia.org/wiki/Life_Is_Strange_(%D1%81%D0%B5%D1%80%D0%B8%D1%8F_%D0%B8%D0%B3%D1%80)?useskin=vector-2022#%D0%98%D0%B3%D1%80%D1%8B

I also made the following template edits (which need approval to kick in):

• https://ru.wikipedia.org/w/index.php?title=%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%3A%D0%A2%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D0%B0122222&diff=138327499&oldid=80265673

I've summarized the conversations all other conversations into the following bugs:

• T367246
• T366968
• T367247
• T367248
• T367249
• T367250
• T367251

Let me know if I've missed anything, otherwise I'll close this out so we can work on the follow ups.

Maybe the sticky header issue (T366314#9873064) could be another task.