Page MenuHomePhabricator

Font family variables: use consistent names
Open, Needs TriagePublic

Description

Purpose

This task defines a consistent pattern for font-family variable names in Less files that have been started with WikimediaUI Base.
Vector, Minerva skins use this naming convention already, with a few inconsistencies: codesearch.

Changes

Renamed variable:

  1. @font-family-heading-main -> @font-family-heading

The rename has no effect: this variable is redeclared by its sole user: codesearch.

Renamed system font stack definitions, following the pattern of @font-family-system-sans (line 201):

  1. @font-family-serif -> @font-family-system-serif
  2. @font-family-monospace -> @font-family-system-monospace

The renames have no effect: the variables with the old name are defined with (defaulted to) the renamed variables. Users of these variables: -serif, -monospace..

Skins, extensions using these definitions can redefine @font-family-serif, etc. by extending or replacing @font-family-system-serif, etc.
Previously only replacing @font-family-serif was possible, extending it was not.

Result, summary

@font-family-system-sans      // WikimediaUI Base sans-serif font stack
@font-family-system-serif     // WikimediaUI Base serif font stack
@font-family-system-monospace // WikimediaUI Base monospace font stack
// The 'system' part in these names signals these fonts are typically installed by the operating system.

@font-family-sans             // Skin's / extension's sans-serif font stack
@font-family-serif            // Skin's / extension's serif font stack
@font-family-monospace        // Skin's / extension's monospace font stack
// These variables can be redefined by skins and extensions, extending upon the system stack, or replacing it.
// The default values are the respective `-system-` font-stacks.

@font-family-sans--fallback: sans-serif;
@font-family-serif--fallback: serif;
@font-family-monospace--fallback: monospace, monospace;
// Monospace fix:  http://code.iamkate.com/html-and-css/fixing-browsers-broken-monospace-font-handling/

@font-family-base             // Font stack for content body
@font-family-heading          // Font stack for headings (h1-h6)

Documentation

The font stack definitions - each individual font - are commented with the system where it's expected to be available and the reason to include or exclude it.

Questions

  • Any comments about the renames?
  • Should the font stack definitions be moved into a separate file? What file name to choose?

Patches

  1. Implementing the renames: 573046
  2. Commenting the font stacks: 573609 Task: T244794
  3. Updating package metadata: 573433
  4. Documentation summarizing the research from 2014: 571944

Event Timeline

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptFeb 13 2020, 11:14 AM

Change 570638 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] Consistently follow WikimediaUI Base's CSS variable naming convention for font variable names. Document the fonts.

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

Change 570619 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/MonoBook@master] Consistently follow WikimediaUI Base's CSS variable naming convention for font variable names. Document the fonts.

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

Change 570757 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/MinervaNeue@master] Consistently follow WikimediaUI Base's CSS variable naming convention for font variable names. Document the fonts.

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

Change 570174 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/MonoBook@master] Css cleanup: merge font-size: 127%; with font-size: x-small; -> font-size: 0.79375em;

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

Change 570275 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Timeless@master] Follow consistently the CSS variable naming convention in font variable names. Document the fonts.

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

Demian moved this task from Backlog to Change CSS on the CSS board.

Change 573028 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] Intermediary solution for @import 'theme/wikimedia-ui-base';: duplicate/move the file to 'core/resources/src/mediawiki.less/theme' until a solution to import the original is implemented.

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

Change 573046 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[wikimedia-ui-base@master] Consistently follow the CSS variable naming convention with font variable names. Document the fonts.

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

Change 573062 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] Consistently follow the CSS variable naming convention with font variable names. Document the fonts.

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

Change 573065 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/MinervaNeue@master] Consistently follow WikimediaUI Base's CSS variable naming convention for font variable names. Document the fonts.

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

Change 573435 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] Consistently follow the CSS variable naming convention with font variable names. Document the fonts.

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

Added T246859: Follow WMUI's font-family variable names in Vector skin for discussing the patch related to the Vector skin.

Demian renamed this task from Consistently follow the CSS variable naming convention with font variable names to Font family variables: use consistent names.Mar 4 2020, 2:28 AM
Demian updated the task description. (Show Details)
Demian removed a subscriber: Jdforrester-WMF.
Demian updated the task description. (Show Details)Mar 4 2020, 2:38 AM
Demian updated the task description. (Show Details)

Change 577744 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] Add comments to the font-stacks, reference documentation

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

Change 577786 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[wikimedia-ui-base@master] Rename 'font-family-heading-main' to 'font-family-heading'

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

Change 577787 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[wikimedia-ui-base@master] Rename 2 font-family-* variables to font-family-system-*

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

Change 577790 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] Rename 'font-family-heading-main' to 'font-family-heading'

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

Change 577791 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] Rename 2 font-family-* variables to font-family-system-*

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

Change 573046 abandoned by Aron Manning:
Consistently follow the CSS variable naming convention with font variable names.

Reason:
Split up: https://gerrit.wikimedia.org/r/c/wikimedia-ui-base/ /577786

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

Change 573046 restored by Aron Manning:
Consistently follow the CSS variable naming convention with font variable names.

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

Change 577844 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/MinervaNeue@master] Rename @fontFamily* variables to WMUI Base convention

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

Change 577845 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/MinervaNeue@master] Add semantic @font-family-* variables

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

Change 570638 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] Rename font-family variable names to follow WikimediaUI Base

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

@ovasileva @Quiddity @phuedx @nray @Niedzielski @Jdlrobson

Dear Readers Web Team!

The cleanup and refactoring patches are rolling in every day. These cleanup patches in Vector and the official skins fit well with those patches. After 1 month that this ticket and solution has been created, I'd like to ask your attention to it.

The patches are ready to merge and incorporate hours of intensive work together with JdlRobson and days on my part. Please make use of our effort, don't let this work be wasted:

Vector:
570638 Renaming 3 LESS variables for consistency. (T246859) Code-Health Technical-Debt
577744 Adding comments summarizing 2 weeks of research digging up the discussions and decisions behind the status quo. Documentation

Minerva Neue:
577844 Renaming 2 LESS variables
573065 Adding comments. Long discussion: intensive work with JdlRobson that formed these patches.
577845 Adding 2 meaningful LESS variables

MonoBook and Timeless patches linked in "Related gerrit patches".

The patches are made to be easy and quick to evaluate. There are no functional changes, these changes are intended to benefit the developers, volunteers and third-parties.
Please spend the necessary 10 minutes per person to review these patches, so a month's volunteer effort won't go to waste. Thank you in advance.

Change 577786 abandoned by Aron Manning:
Rename 'font-family-heading-main' to 'font-family-heading'

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

Jdlrobson moved this task from Needs triage to Technical on the Vector board.May 15 2020, 4:59 PM
Jdlrobson removed a project: MinervaNeue.

Change 577844 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Rename @fontFamily* variables to WikimediaUI Base naming convention

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

From the task description, there seems to be a misunderstanding in what *-system-sans refers to resulting in a misdirected request for consistency:

@font-family-serif -> @font-family-system-serif
@font-family-monospace -> @font-family-system-monospace

serif in font-family-serif refers to the generic font family, that is chosen by the web browser and writable by the user. Some browser rely on so called web fonts that are system-independent for historic reasons, like Arial or Times/Times New Roman.
*system-sans refers to specifically chosen font stack of Operating System sans serif fonts that are stacked up so a user in a browser on each of the major (more specifically mobile) operating systems should see the site first in its system sans serif font, not a generic one.
Therefore renaming @font-family-monospace to @font-family-system-monospace is misleading!

@Volker_E thank you for documenting this reasoning behind the font-family-system-* variables. That was my understanding as well.

The Minerva skin - where these variables are defined and used - has this exact comment (ref):
"System font stack for monospace fonts, see T221043." for the following definition:
@font-family-monospace: 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;

Quiddity removed a subscriber: Quiddity.Jun 26 2020, 5:59 PM
Demian moved this task from Incoming to Stalled on Review on the User-Demian board.

Change 577790 abandoned by VolkerE:
[mediawiki/core@master] Rename 'font-family-heading-main' to 'font-family-heading'

Reason:
font-family-heading-main got its name as variable that only applies to main headings

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

Change 577791 abandoned by VolkerE:
[mediawiki/core@master] Rename 2 font-family-* variables to font-family-system-*

Reason:
Not completely incorrect, but also not clearer. Just another complexity level. Until someone else flags this, we'll continue wiith the status quo.

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

Change 577787 abandoned by VolkerE:
[wikimedia-ui-base@master] Rename 2 font-family-* variables to font-family-system-*

Reason:
Not completely incorrect, but also not clearer. Just another complexity level. Until someone else flags this, we'll continue wiith the status quo.

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

Aklapper removed Demian as the assignee of this task.Sun, Nov 8, 10:22 AM
Aklapper added a subscriber: Aklapper.

[Resetting assignee due to inactive user account]