Page MenuHomePhabricator

Unify CSS font stack of monospace-styled elements across products
Closed, ResolvedPublic

Description

Our CSS font stack of monospace styled elements varies across web products without reason.
We should unify rules to one approach, best probably [[ https://github.com/necolas/normalize.css/blob/73b6b0c7e8690ab5005bca9d7e13d3fb319c98ac/normalize.css#L145 | font-family: monospace, monospace as used in normalize.css ]].

Background of this CSS value is to tackle different cross-browser monospace font sizing quirks, see detailed explanation.

Original comparison by @matmarex in T175709#3630249

These two versions are exactly equivalent, I don't think we've been using any of the possible variants of this hack consistently. I grepped core and extensions and found the following number of usages:

RuleUsages
font-family: monospace, 'Courier';18
font-family: monospace, monospace;8
font-family: monospace, fixed;2
font-family: monospace, 'Courer New';1

Also, @Edokter has introduced a MW core comparison at T35496: Misleading comment regarding preformatted font in commonElements.css

Details

Related Gerrit Patches:
mediawiki/core : masterStandardize editfont size across browsers/OSes
mediawiki/core : masterUnify monospace font family stack
mediawiki/extensions/VisualEditor : masterUpdate VE core submodule to master (84ec68dfb)
mediawiki/extensions/CentralNotice : masterUnify monospace font family stack
wikimedia-ui-base : masterAdd `font-family-monospace` variable
mediawiki/extensions/VisualEditor : masterUnify monospace font family stack
VisualEditor/VisualEditor : masterUnify monospace font family stack
mediawiki/skins/MinervaNeue : masterUnify monospace font family stack
mediawiki/core : masterUnify monospace font family stack

Event Timeline

Volker_E created this task.Sep 25 2017, 2:06 PM
Restricted Application added a project: UI-Standardization. · View Herald TranscriptSep 25 2017, 2:06 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change 380518 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[wikimedia-ui-base@master] Add font-family-monospace variable

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

Volker_E updated the task description. (Show Details)Sep 25 2017, 2:32 PM
Volker_E added a subscriber: Edokter.

Change 380522 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Unify monospace font family stack

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

Change 380523 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/CentralNotice@master] Unify monospace font family stack

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

Change 380526 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Unify monospace font family stack

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

Change 380526 merged by jenkins-bot:
[mediawiki/core@master] Unify monospace font family stack

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

Change 380522 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Unify monospace font family stack

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

Change 381138 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[VisualEditor/VisualEditor@master] Unify monospace font family stack

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

Change 381142 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/VisualEditor@master] Unify monospace font family stack

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

Change 381138 merged by jenkins-bot:
[VisualEditor/VisualEditor@master] Unify monospace font family stack

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

Change 381145 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Unify monospace font family stack

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

Change 381142 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Unify monospace font family stack

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

Change 380518 merged by jenkins-bot:
[wikimedia-ui-base@master] Add font-family-monospace variable

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

From the description :

Background of this CSS value is to tackle different cross-browser monospace font sizing quirks, see detailed explanation.

A quick summary (incase github goes away):

Major web browsers reduce the text size of elements whose font-family property is explicitly set to monospace to account for the greater width of many monospace typefaces in comparison to other fonts at the same text height - http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/
Since they are checking explicitly for a computed value of monospace, other fixes may be applied, such as monospace,serif or _,monospace, if we feel one of those or something similar would be more readable.

Change 380523 merged by jenkins-bot:
[mediawiki/extensions/CentralNotice@master] Unify monospace font family stack

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

Change 381269 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (4fac129ce)

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

Change 381269 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (84ec68dfb)

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

Change 396005 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/core@master] Standardize editfont size across browsers/OSes

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

Change 396005 had a related patch set uploaded (by Bartosz Dziewoński; owner: Esanders):
[mediawiki/core@master] Standardize editfont size across browsers/OSes

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

Change 381145 merged by jenkins-bot:
[mediawiki/core@master] Unify monospace font family stack

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

Change 396005 merged by jenkins-bot:
[mediawiki/core@master] Standardize editfont size across browsers/OSes

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

Volker_E closed this task as Resolved.Dec 20 2017, 1:26 AM
Volker_E claimed this task.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.