Page MenuHomePhabricator

CSS help needed: unbreak multicolumn references (set style in a template that varies w/ the active skin)
Closed, DuplicatePublicBUG REPORT

Description

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

  • In a normal browser window, make sure you are logged out.
  • Set your window width to 1300px.
  • Pin the tools menu on the right hand side.
  • Visit a page with many refs and click on a reference.

Alternately:

  • Set your zoom level to 125%
  • Set your window width to 1680px (or full-screen for many laptops)
  • Visit the same references-list

What happens?:

  • You should see the default skin
  • On clicking on a ref you should be taken to a References or External Links section, showing a single-column list of references.
    • (The default column width for both {{reflist}} and <references/> is set to 30em, and the body in default Vector at this window width is just under 60em.)
  • This is harder to read and on average 10-15% more scrolling than a two column reflist

What should have happened instead?:

  • Two-column refs with a width of 25em is preferable to single column.
  • However a column width of 30em has been found preferable to 25em on en:wp.
  • The default CSS for <references/> should set column width to 25em for Vector 2022, but 30em for Vector 2010.
  • {{Reflist}} is used on 6 million pages, <references/> is directly used on more.

Related discussion on en:wp highlights why it's not enough for en:wp template editors to change the defaults for the reflist template used by all. What is a clean way to address this?

I'd rather see us fix Vector 2022 locally with CSS than change the reflist default that has worked well for many years. I can easily get two reflist columns on my 13-inch laptop screen in Vector 2022 with CSS that fixes the [excess] whitespace, leaving me with 69em of space for content (it is 94em in Vector 2010 on the same screen)

as somebody who doesn't use V22, I don't want to see changes to the template which will affect what I see to accomodate V22.

we would presumably also want [this css change] implemented in <references /> since there are plenty of articles with <references /> instead of {{reflist}} as the default widths are the same at the moment

the default column width seems to actually be pulled from the Cite extension: ext.cite.styles.css.

Event Timeline

Sj updated the task description. (Show Details)
Sj updated the task description. (Show Details)

Possibly related:

  • T334941, which is also about the references list not rendering multiple columns in Vector 2022
  • 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

@Sj could you please provide a screenshot? At 1300px, I'm still seeing the References section with two columns in Vector 2022. For me, it collapses to one column at about 1103px wide.

Screenshot 2023-09-22 at 12.38.31 PM.png (1×1 px, 602 KB)

Yes, that matches what I'm seeing:

  • main/toc open, tools hidden: 1100 | 1210 | 1310 | 1420 px at 100|110|120|133% zoom
  • main/toc and tools open: 1350 | 1500 | 1620 | >1680 px at 100|110|120|133% zoom

I updated the request to be clearer. Right now the following reader use cases see single-column references: 1080px windows, or 1350px @ 120% (main menu open), and 1350px windows, or 1680px windows @ 125% (both menus open). This falls within a sweet spot of common use cases that affects both editors and readers, and is a width range within which two columns @ 25em still seems preferable to single column @ 50-60em for viewing references.

Jdlrobson subscribed.

I left you a reply. Hopefully this is just a case of template editors not understanding technical capabilities. Templates can target different CSS rules at different skins.

I am pretty sure this task is a duplicate of already-linked T334941: Vector 2022: consider displaying References in two columns on narrow screens. I can follow-up on anything specific to the template.

Cool, thank you. I didn't realize a template could target a specific skin, though it makes sense that it's an environment variable.