Page MenuHomePhabricator
Create Task
Maniphest T176636

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

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

Details

SubjectRepoBranchLines +/-
Unify monospace font stack. Avoid potential sizing bug caused by weird browser behavior with `font-family: monospace;`mediawiki/extensions/CodeMirrormaster+8 -1
Standardize editfont size across browsers/OSesmediawiki/coremaster+8 -1
Unify monospace font family stackmediawiki/coremaster+2 -6
Update VE core submodule to master (84ec68dfb)mediawiki/extensions/VisualEditormaster+1 -1
Unify monospace font family stackmediawiki/extensions/CentralNoticemaster+1 -1
Add `font-family-monospace` variablewikimedia-ui-basemaster+2 -0
Unify monospace font family stackmediawiki/extensions/VisualEditormaster+9 -6
Unify monospace font family stackVisualEditor/VisualEditormaster+20 -14
Unify monospace font family stackmediawiki/skins/MinervaNeuemaster+2 -1
Unify monospace font family stackmediawiki/coremaster+2 -1
Customize query in gerrit

Related Objects

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 Blocked on the MinervaNeue board.Sep 25 2017, 2:10 PM
Volker_E mentioned this in T175709: Which tags in MediaWiki should be styled as monospace?.Sep 25 2017, 2:10 PM
gerritbot subscribed.Sep 25 2017, 2:28 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

gerritbot added a project: Patch-For-Review.Sep 25 2017, 2:28 PM
Volker_E updated the task description. (Show Details)Sep 25 2017, 2:32 PM
Volker_E added a subscriber: Edokter.
gerritbot added a comment.Sep 25 2017, 2:39 PM

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

gerritbot added a comment.Sep 25 2017, 2:47 PM

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

Diffusion mentioned this in rWMUI2c72718738b7: Add `font-family-monospace` variable.Sep 25 2017, 3:01 PM
gerritbot added a comment.Sep 25 2017, 3:08 PM

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

gerritbot added a comment.Sep 25 2017, 5:45 PM

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

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

ReleaseTaggerBot added a project: MW-1.31-release-notes (WMF-deploy-2017-09-26 (1.31.0-wmf.1)).Sep 25 2017, 6:00 PM
gerritbot added a comment.Sep 27 2017, 8:57 PM

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

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

ReleaseTaggerBot edited projects, added MW-1.31-release-notes (WMF-deploy-2017-10-03 (1.31.0-wmf.2)); removed MW-1.31-release-notes (WMF-deploy-2017-09-26 (1.31.0-wmf.1)).Sep 27 2017, 9:00 PM
gerritbot added a comment.Sep 27 2017, 10:15 PM

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

gerritbot added a comment.Sep 27 2017, 10:25 PM

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

gerritbot added a comment.Sep 27 2017, 10:37 PM

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

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

gerritbot added a comment.Sep 27 2017, 10:40 PM

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

gerritbot added a comment.Sep 27 2017, 10:41 PM

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

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

Volker_E moved this task from Backlog to Doing… on the UI-Standardization-Kanban board.Sep 27 2017, 10:41 PM
gerritbot added a comment.Sep 28 2017, 8:48 AM

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

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

• Prtksxna subscribed.Sep 28 2017, 8:50 AM
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.

gerritbot added a comment.Sep 28 2017, 5:23 PM

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

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

gerritbot added a comment.Sep 28 2017, 5:55 PM

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

gerritbot added a comment.Sep 29 2017, 4:39 PM

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

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

Esanders mentioned this in T182320: Fix textarea editor's edit font size.Dec 7 2017, 1:09 PM
gerritbot added a comment.Dec 7 2017, 1:38 PM

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

gerritbot added a comment.Dec 19 2017, 10:34 PM

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

gerritbot added a comment.Dec 19 2017, 10:41 PM

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

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

ReleaseTaggerBot edited projects, added MW-1.31-release-notes (WMF-deploy-2018-01-02 (1.31.0-wmf.15)); removed MW-1.31-release-notes (WMF-deploy-2017-10-03 (1.31.0-wmf.2)).Dec 19 2017, 11:00 PM
gerritbot added a comment.Dec 20 2017, 1:25 AM

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.
Volker_E moved this task from Doing… to Done on the UI-Standardization-Kanban board.Dec 20 2017, 1:39 AM
• Demian added a parent task: T244425: Typography: documentation of research and decisions.Feb 10 2020, 3:25 PM
• Demian removed a parent task: T244425: Typography: documentation of research and decisions.Feb 10 2020, 7:29 PM
• Demian mentioned this in T244425: Typography: documentation of research and decisions.
• Demian mentioned this in T244803: Typography: Rethinking the monospace font stack (source code typography): proposing commonly used fonts tailored for developers.Feb 10 2020, 10:53 PM
• Demian mentioned this in T245476: [SPIKE] How to make source editors' font-size responsive.Feb 18 2020, 1:54 PM
gerritbot added a comment.Feb 20 2020, 2:50 AM

Change 573427 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/extensions/CodeMirror@master] Unify monospace font stack. Avoid potential sizing bug caused by weird browser behavior with font-family: momonospace;

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

gerritbot added a project: Patch-For-Review.Feb 20 2020, 2:50 AM
gerritbot added a comment.Feb 29 2020, 1:19 PM

Change 573427 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Unify monospace font stack. Avoid potential sizing bug caused by weird browser behavior with font-family: monospace;

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

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.22; 2020-03-03).Feb 29 2020, 2:00 PM
Od1n mentioned this in T192373: Width of "Input wikitext" textfield on Special:ExpandTemplates is different from normal.May 7 2020, 7:05 AM
Od1n updated the task description. (Show Details)May 7 2020, 7:07 AM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL