Page MenuHomePhabricator

Vector 2022: consider displaying References in two columns on narrow screens
Open, MediumPublic1 Estimated Story PointsBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • using your laptop, open this page on enwiki (the Tool menu has to be closed and the table of contents open browser should be 1000px)
  • look at the References section
  • now, open the same page with the same configuration, but with Vector Legacy (direct link)
  • look at the References section

What happens?:

  • using Vector Legacy references are splitted in two columns by default; whereas using Vector 2022 references are shown in a single wide column by default

More details regarding mw-references-wrap mw-references-columns :

  • Vector 2022: the "References" content-width is 680px by default; I can force the switching from 1 to 2 columns using column-width: 26em
  • Vector Legacy: the "References" content-width is 775px by default; the switching from 1 to 2 columns is happening at column-width: 30em

What should have happened instead?:
Consider displaying references splitted in two columns on narrow screen by default, both in Vector and Vector 2022, when the configuration is the same.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

reported here on the MediaWiki talk page; other discussions have been made about this issue previously, I have to search them and I will add links later

I can reproduce it using the Firefox development tools (setting iPad, iPadOS 14.7.1, Safari 14.1, screen resolution 810x1080)

Vector (by default)Vector 2022 (by default)
Don Bradman - Wikipedia — Mozilla Firefox 18_04_2023 13_01_51.png (1×2 px, 294 KB)
Don Bradman - Wikipedia — Mozilla Firefox 18_04_2023 13_02_28.png (1×2 px, 287 KB)

Proposal

Reduce the column width of references from 30em to 25em;

Event Timeline

Some personal considerations for more context:
Selecting the same content width (for exemple 680em) the behaviour of References (<references/> or {{Reflist}}) is exactly the same in both skins.
However, users are still adapting to the new width, someone don't appreciate the single wide column, the content widths of Vector and Vector 2022 on narrow screens seem similars and some users are expecting a two columns section as default.
The impression of a similar experience could be possible on Vector 2022 giving the content width by default splitted in two column (perhaps modifying the threshold for the switching?)
The impression of similarity between the two skins is greater with two columns, rather than strictly respecting and duplicate the width threshold.

This is expected behavior for the current state of Vector 2022 and not a bug related to references. The developers of Vector 2022 have chosen to narrow the column containing content and add a lot of horizontal padding the the left and right of page sidebars, so any settings that are related to the width of that content column will be affected.

A workaround is to adjust your common.css with something like this, which works well for me:

.mw-parser-output .reflist-columns-2 {
    column-width: 23em !important;
}
Jdlrobson subscribed.

Content is out of scope for this project. These styles are provided by the Cite extension (https://gerrit.wikimedia.org/g/mediawiki/extensions/Cite/+/5affadae9d0b5c5b2b1953fee2a81de56b2536e0/modules/ext.cite.styles.css)

I think ideally these rules should be updated to use feature queries rather than media queries.

Paragraphs backwards to make clear:

I think ideally these rules should be updated to use feature queries rather than media queries.

Columns in the context of references use CSS columns, not queries. This comment isn't relevant.

Content is out of scope for this project. These styles are provided by the Cite extension (https://gerrit.wikimedia.org/g/mediawiki/extensions/Cite/+/5affadae9d0b5c5b2b1953fee2a81de56b2536e0/modules/ext.cite.styles.css)

I think the request is to use skinStyles to customize what width Vector22 sets .mw-references-columns to such that the default (let's say in full-width not-wide mode) nicely fits 2 columns (or perhaps in some regime between mobile width and full-width not-wide mode i.e. setting the width to 23em because that guarantees 2 minimum two columns on tablet widths), which is indeed a Desktop Improvements (Vector 2022) issue, unless you want to make a change for all Cite users (which will be noticed by many more, but may/n't be warranted). (Onwiki reflist is currently set to 30em as a default and a lot of users have set 30em in hardcoded styles to boot, so then there would be a mismatch there.)

Since Vector22 intends to increase font size at some point, that further implicates skinStyles, not Cite.

NB I am only attempting to reflect their request here and do not know if I generally support it.

This is expected behavior for the current state of Vector 2022 and not a bug related to references. The developers of Vector 2022 have chosen to narrow the column containing content and add a lot of horizontal padding the the left and right of page sidebars, so any settings that are related to the width of that content column will be affected.

Yes, this is of marginal interest, but not the whole story.

A workaround is to adjust your common.css with something like this, which works well for me:

.mw-parser-output .reflist-columns-2 {
    column-width: 23em !important;
}

The more-correct workaround would be something closer to

/* in User/vector-2022.css */
.mw-references-columns {
	column-width: 25em;
}

Which will hit more references than targeting {{reflist}}-specific classes.

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

[mediawiki/skins/Vector@master] Display references in 2 columns on Vector skin

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

I think the request is to use skinStyles to customize what width Vector22 sets .mw-references-columns to such that the default (let's say in full-width not-wide mode) nicely fits 2 columns (or perhaps in some regime between mobile width and full-width not-wide mode i.e. setting the width to 23em because that guarantees 2 minimum two columns on tablet widths)

Agreed.

If the 25em set in the above patch is not narrow enough, addressing one or more of the following might help:

  • T333180, which is about the proposed Zebra variant of the Vector 2022 skin, which narrows the content column even further
  • T321860, which shows that there is excessive padding to the left and/or right of sidebar menu boxes; reallocating some of this redundant padding to the content column could allow more space for references to form columns

If those are not addressed, narrowing the column width to 23em might be necessary to provide at least two columns to some readers.

ovasileva set the point value for this task to 1.Oct 12 2023, 5:52 PM

@JScherer-WMF this needs design review from you following our estimation.

The proposal is to change this to this:

currentcurrent with 16px font sizeproposed with 14px font sizeproposed with 16px font size
Screenshot 2023-10-27 at 3.12.35 PM.png (629×1 px, 227 KB)
Screenshot 2023-10-27 at 3.14.57 PM.png (764×1 px, 251 KB)
Screenshot 2023-10-27 at 3.13.41 PM.png (629×1 px, 256 KB)
Screenshot 2023-10-27 at 3.14.11 PM.png (752×1 px, 277 KB)

Note: we are bumping the font size in future, so it's possible the behaviour here might be different for different font sizes.

Please note that the above screen shots do not show the right-side toolbar.

Change 961473 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Display references in 2 columns on Vector skin

Reason:

Given the future changes to font size we're not sure about this change so abandoning this for now.

16px full-width looks good. And 14px with the two columns looks good. But 16px with 2 columns feels like we're getting into the territory where there aren't enough words on a line to maintain readability.

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

Another flexible solution could be to use the CSS clamp() function, which would act kind of like minmax() does for grid. Browser support seems pretty decent.
I think a value of clamp(20em, 25em, 30em) could work here.

@Jdrewniak that looks like a fine use of clamp.

@Jdlrobson confused about your 'abandoned' comment: this is defined in ems, how does default font-size matter?

@Sj the concern as I understand it was currently if we change the column width, it looks bad on the larger font sizes that we are introducing so we're trying to work out exactly how that works first. My understanding from Justin is that one proposal on the table is to fix the font size of references first to always be 14px (regardless of whether the user has increased their font size).

We'll mock this up and make sure it makes sense and then hopefully this will be less confusing. Thanks for your patience!