Hi @Ftrebien, thanks for taking the time to report this! Am I right that there currently is not a default (means: MediaWiki's CSS definitions, or some MediaWiki skin's CSS definition) style defined for div-col? As div-col is a local per-wiki template, could you elaborate for which HTML element (or some class) to even define such CSS?

Hi @Aklapper . The div col (no hyphen) template exists in MediaWiki and in Wikipedia and in both cases it references the div-col (with hyphen) CSS class. On Wikipedia, the div col template has a template style that defines the div-col CSS class, but it does not have a template style on MediaWiki, so the div-col class is undefined on the default configuration. The div col template style in Wikipedia overrides the margin-top styling of the mw-content-ltr CSS class from MediaWiki for ul and ol elements inside divs with the div-col class, fixing the misalignment at the top across columns when the div col template template is called. The fix, however, only works when using the div col template. If one follows this MediaWiki guide and uses divs instead of calls to the div col template, the lists are misaligned.

I assume that all pages at https://www.mediawiki.org/ are rendered using MediaWiki's default configuration, so if there's any issue there, it would propagate to other wikis such as Wikipedia unless custom fixes are applied after deployment. If you just change column-count:2 to column-count:5 on this MediaWiki guide, the same layout issue is present.

If the div-col class is defined in MediaWiki in the same scope as mw-content-ltr, that is, as a main selector in MediaWiki, then it can be used as a class in the divs that wrap around lists. The MediaWiki guide then would need to be modified to add class="div-col" to those divs, just like the div col template does. An alternative would be to change mw-content-ltr to set margin-top:0, but this would affect spacing in all nested lists and may be undesirable.

The main reason to do all this is to allow using the visual editor to maintain such lists, as none of the other workarounds currently implemented as templates on Wikipedia work properly with the visual editor, only the recommendation in this guide does, but it has this alignment issue.

Hi,

In T277752#6927486, @Ftrebien wrote:

The div col (no hyphen) template exists in MediaWiki and in Wikipedia

Ah, we might talk about different things - that template does not exist in the MediaWiki codebase or a MediaWiki skin codebase. It seems to exists as created content on websites such as mediawiki.org and some Wikipedias.

In T277752#6927486, @Ftrebien wrote:

The div col template style in Wikipedia overrides the margin-top styling of the mw-content-ltr CSS class from MediaWiki for ul and ol elements inside divs with the div-col class, fixing the misalignment at the top across columns when the div col template template is called. The fix, however, only works when using the div col template. If one follows this MediaWiki guide and uses divs instead of calls to the div col template, the lists are misaligned.

I guess my question is if the problem can somehow be reproduced in a MediaWiki installation in a way that does not use custom, on-wiki templates (and template CSS) hosted on some website, as content on websites is up to be fixed on the websites themselves. Or in different words: Is there some CSS that should be fixed in the MediaWiki codebase itself, or is this about custom CSS to be fixed on a content wiki page on some websites?

I cannot find any div-col class in the MediaWiki codebase or in the codebase of MediaWiki skins, so this may have to be fixed by editing wiki pages on websites instead.

@Aklapper Whenever a list is rendered in both Wikipedia and the MediaWiki websites, mw-content-ltr is applied to the ul and ol elements. This class is defined as:

.mw-content-ltr ul{margin:0.3em 0 0 1.6em;padding:0}

It is margin:0.3em that causes the columns to be misaligned. This CSS definition is generated on the MediaWiki website by this call and on Wikipedia by this call, which can be trimmed down to the following calls:

https://www.mediawiki.org/w/load.php?lang=en&modules=skins.vector.styles.legacy&only=styles&skin=vector
https://en.wikipedia.org/w/load.php?lang=en&modules=skins.vector.styles.legacy&only=styles&skin=vector

This is apparently generated from resources/src/mediawiki.skinning/i18n-all-lists-margins.less, which is imported by resources/src/mediawiki.skinning/legacy.less and it was formerly in resources/src/mediawiki.legacy/shared.css where it was left unchanged since 2011.

I'm surprised to now learn that mw-content-ltr is so old, perhaps something changed in browser layout engines that didn't cause this layout problem previously. Wikipedia's div col template style was created very recently.

So, given all that, it seems that what I want to ask for is the inclusion of the following definition in resources/src/mediawiki.skinning/legacy.less:

.div-col {
  margin-top: 0.3em;
  column-width: 30em;
}

.div-col dl,
.div-col ol,
.div-col ul {
  margin-top: 0;
}

Then instead of writing <div style="column-count:2"> in MediaWiki and Wikipedia articles as suggested by this guide, it would normally suffice to write <div class="div-col">.

That makes sense, thanks a lot for explaining!

@Jdlrobson I know, however this guide recommends using a <div> with a style instead of the div col template, and using the div col template makes editing column lists in the visual editor almost impossible for editors that do not know raw wikitext because the visual editor displays template parameters as raw wikitext only. I can deal with templates in raw wikitext, but most people cannot.

I can assure you I'm not ignoring you. I'm trying to balance this request along the many others that I have. Will get to this when I can. Tagging VisualEditor in the meantime, since you've mentioned that several times and that tag is not present.

Does https://m.mediawiki.org/w/index.php?title=Special:MobileDiff/4476894&type=revision&diffmode=source address the problem?

In T277752#6936844, @Jdlrobson wrote:

Does https://m.mediawiki.org/w/index.php?title=Special:MobileDiff/4476894&type=revision&diffmode=source address the problem?

It works when using the div col template and editing plain wikitext directly, but it does not work in the following cases:

• When using the div col template and editing with the Visual Editor: the list, which is a parameter of the template, has to be edited in plain wikitext in the Visual Editor, which defeats the usability goal of the Visual Editor
• When using <div> styled as shown in the guide or with the div-col class, since no CSS definitions were changed for articles that do not use the div col template