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 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

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
Jdlrobson moved this task from Backlog to Tracking on the MinervaNeue board.Sep 25 2017, 2:10 PM

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.