Page MenuHomePhabricator

Use opinionated `rem` setting across Wikimedia Foundation deployed skins
Open, Needs TriagePublic

Description

With ... pending, we should consider to apply opinionated rule to set a standard for MediaWiki skins deployed by Wikimedia Foundation and possibly core too.

Vast majority (I'm not aware of any exception myself) of rendering engines default to 16px as standard text size for HTML content.
By setting

html {
  font-size: 62.5%;
}

the calculation based for rem values in any child element is the equivalent of 1rem = 10px.

So setting for example

.mw-body h1, 
.mw-body-content h1 {
    font-size: 2.88rem;
}

would apply the same rendering as current font-size: 1.8em; or 28.8px in Vector. See https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/622742/1/resources/skins.vector.styles/skin.less for an example.
Additionally we are able to set per-skin base font sizes.
In Vector (legacy & modern), MinervaNeue, Timeless,

body {
  font-size: 1.6em;
}
// Note, the 14px setting in Vector happens on `.mw-body-content` with `font-size: 0.875em` currently.

rule leaves existing em based products, gadgets and user styles rendered unchanged.
Monobook is not render-affected at all, as it uses keywords for its font size.

Benefits

For new products in MW 1.36+, implementors have the ability to rely on a clear approach to implement designs without worrying about confusing inheritance/calculation or risking accessibility impacts
Alongside the variables implementation brought forward in Icf86c930a3b5524254bb549624737d3b9dccb032 the long-term goal should be to provide sizing variables for all different font size based skins.

  • Persist / possibly improve user experience by enabling skin interfaces a full use of rem units, making them fully text zoomable by users with accessibility needs and do away with pixel based text and image sizing
  • Simplify design–development handover by replacing close to imcomprehensible em based sizing,

Risk

With an extension only written in rem based sizes, it might not scale with the surrounding skin. It needs to be specifically optimized for each skin.
One way out is the variables approach described above. Another one would be to increase Vector base size to 16px, which has been discussed initially as part of Desktop Improvements project, but is no priority right now. Timeless would remain acceptable with it's 15px size, MinervaNeue works and Monobook would be the only skin to care about.

We're might set a slight design expectation, if devs are not given easy ways to overwrite the size values for a 16px base.

Acceptance

Browsers, which don't support rem would fall back to browser default, so content and interaction would remain acceptable.

Former work

Wikimedia-Portals has taken exact same approach a few years ago and not received reports of rendering issues AFAIAO

Event Timeline

Volker_E updated the task description. (Show Details)

The :root { font-size: 62.5% } technique is an outdated, 16+ years old trick that we have stopped using due to its long-term complications: web sites are returning to`:root { font-size: 100% }`. The issues it creates:

  • will break all user styles adjusting the overall font-size of Vector: the font will be 60% larger than expected,
  • will break gadgets already using rem, expecting it to be the equivalent of 16px,
  • will complicate adjusting the font-size by user styles, thus negatively affecting accessibility,
  • has only one benefit: easier calculation from px to rem for developers in the short term
  • comprehending font-sizes in relation to the base font-size will be more complicated, for ex. 75% (0.75rem) will become 1.2rem, which does not suggest it is 3/4 of the base font-size.

For these reasons using this old technique is inadvisable, just using rem with 16px equivalent root font-size in skins as initiated in T261334: Use `rem` in modern Vector gives all the benefits.

The :root { font-size: 62.5% } technique is an outdated, 16+ years old trick that we have stopped using due to its long-term complications: web sites are returning to`:root { font-size: 100% }`. The issues it creates:

  • will break all user styles adjusting the overall font-size of Vector: the font will be 60% larger than expected,
  • will break gadgets already using rem, expecting it to be the equivalent of 16px,
  • will complicate adjusting the font-size by user styles, thus negatively affecting accessibility,
  • has only one benefit: easier calculation from px to rem for developers in the short term
  • comprehending font-sizes in relation to the base font-size will be more complicated, for ex. 75% (0.75rem) will become 1.2rem, which does not suggest it is 3/4 of the base font-size.

For these reasons using this old technique is inadvisable, just using rem with 16px equivalent root font-size in skins as initiated in T261334: Use `rem` in modern Vector gives all the benefits.

Who's 'we' in 'we have stopped using'. Which 'web sites' are you referring to?

The idea, already fully outlined in the task description, is to set

html  {
    font-size: 62.5%
}

/* …and then apply backwards-compatible `em` on `body`. For Vector… */
body { 
     font-size: 1.6em;
}

/* …as Vector's 14px equivalent is set in `.mw-body-content`. */
  • gadgets that are already using rems are in a poor position no matter of this change. With three skins (Modern, Vector and MinervaNeue) relying on different base font-size
  • how does this complicate adjusting font-size in user styles?!