Fix textarea editor's edit font size
Closed, ResolvedPublic

Description

For users arriving via Tech News:

You can override the font size to your liking using a snippet like this, added to your user style subpage – for example, global.css:

.mw-editfont-monospace,
.mw-editfont-sans-serif,
.mw-editfont-serif {
	font-size: 13px !important;
}

See the table below to find out what font size your browser was using before.

Note that fractional values may not work well with wikitext syntax highlighting.

Task summary

For historical reasons we've allowed inconsistent browser-default styles to apply to textarea#wpTextbox1 (and until recently we allowed the browser to set the font family: T170223)

This leads to inconsistency across browsers, which can lead to a jarring UX when changing browser, and also problems implementing new edit areas with a consistent feel (e.g. Flow, VE source mode), or extensions that require font-size matching (e.g. CodeMirror syntax highlighting, see T180678)

The issue is further complicated by the fact we use font-family:monospace (instead of the "monospace, monospace" hack: T176636) which applies extra font size rules in some browsers (Firefox) and some versions.

The current font sizes we get are (all in px):

BrowserOSMonospaceSerif/Sans-serfNotes
ChromeWin/Ubuntu13.333313.3333(Likely more precision, but reporting tool rounds to 4dp)
IE/EdgeWin (All)13.3313.33(as above)
FirefoxOSX/Win1316
FirefoxUbuntu1216
SafariOSX (All)1111
ChromeOSX1111

It would seem sensible to standardise on 13.3333 to affect the fewest number of users. Chrome+IE/Edge users (76%) will be unaffected except for OSX (~4%). Firefox users (15%) will get a barely noticeable change. The only users significantly affected will be OSX users (12%) who will notice a significant increase (from the currently very small, and arguably not-very-accessible 11px).

Edit: Also FF users who have changed their edit font to serif/sans-serif will get a significant change, but very few people use that preference at all (https://phabricator.wikimedia.org/T170223#3539911)

Edit2: We are going with 13px. It should be basically indistinguishable from 13.3333px, and avoids rounding errors further down the chain.

Screenshots

Monospaced

Browser/OSBeforeAfter
Windows/Firefox
Windows/Chrome
Windows/Edge
Ubuntu/Firefox
Ubuntu/Chrome
OSX/Firefox
OSX/Chrome
OSX/Safari

Sans-serif

Browser/OSBeforeAfter
Windows/Firefox
Windows/Chrome
Windows/Edge
Ubuntu/Firefox
Ubuntu/Chrome
OSX/Firefox
OSX/Chrome
OSX/Safari
Esanders created this task.Dec 7 2017, 1:09 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 7 2017, 1:09 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

The implementation uses a single class selector, so any on-wiki override of the font size, such as on ar.wiki - will be unaffected by this change.

Elitre added a subscriber: Elitre.Dec 7 2017, 2:32 PM

I support this, but it will probably be super annoying for some users if the font rendering changes for them. (I know how annoyed I was when the upgrade from Sublime Text 2 to 3 changed the text rendering very slightly by switching from GDI to DirectWrite, and how relieved when I found you can change it back.)

We should announce this in Tech News, and create a small help page with the reasoning from this task and with instructions (CSS snippet) on how to override the font size. Along the lines of https://meta.wikimedia.org/wiki/Change_to_section_edit_links (but probably it'll end up a lot shorter).

Esanders updated the task description. (Show Details)Dec 8 2017, 12:31 PM

We should announce this in Tech News, and create a small help page with the reasoning from this task and with instructions (CSS snippet) on how to override the font size. Along the lines of https://meta.wikimedia.org/wiki/Change_to_section_edit_links (but probably it'll end up a lot shorter).

That sounds good. Some screenshots before and after the change would probably be useful, so that users can visually assess the magnitude of the change to them.

Elitre added a comment.EditedDec 11 2017, 5:46 PM

I support this, but it will probably be super annoying for some users if the font rendering changes for them. (I know how annoyed I was when the upgrade from Sublime Text 2 to 3 changed the text rendering very slightly by switching from GDI to DirectWrite, and how relieved when I found you can change it back.)

We should announce this in Tech News, and create a small help page with the reasoning from this task and with instructions (CSS snippet) on how to override the font size. Along the lines of https://meta.wikimedia.org/wiki/Change_to_section_edit_links (but probably it'll end up a lot shorter).

Matma, looks like you got this and your plan sounds good (including the link to a good example page). Please ping, should you need help? Although I understand this is probably something for next quarter.

Safari (11px > 13.3333px):
before


after

From discussion on the changeset, we are going with 13px. It should be basically indistinguishable from 13.3333px, and avoids rounding errors further down the chain.

Esanders updated the task description. (Show Details)Dec 19 2017, 11:57 AM
matmarex updated the task description. (Show Details)Dec 19 2017, 10:21 PM

I added before/after screenshots of monospaced/sans-serif edit field fonts to the description, for Windows and Ubuntu. (The labels say "Chrome" but technically it was Opera on Windows and Chromium on Ubuntu.) @Esanders Can you fill in the OSX-shaped holes?

The change from 13.3333px to 13px is noticeable when comparing them side-by-side, but I probably wouldn't have noticed otherwise.

Has anybody been working on the help page for this?

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

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

Volker_E updated the task description. (Show Details)Dec 20 2017, 1:38 AM

The patches here got merged, but we still do not have a help page and we do not have an announcement. This is going to go out during the week of 2-4 January. (Next Tech News is 8 January, so we'll probably need to announce this separately…)

As this doesn't seem to be an emergency, and as some documentation might be helpful, could someone please postpone this for just one week, so that it can be announced in Tech News on 8 January?

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

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

Change 401402 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/Flow@master] Revert "Remove duplicate editfont size definition" (temporarily)

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

Change 401403 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/CodeMirror@master] Revert "Remove font-size now it is set by editfont" (temporarily)

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

It looks like the plan is to revert these on 1.31.0-wmf.15 only, but not on master. The change will happen with wmf.16.

Change 401581 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/core@wmf/1.31.0-wmf.15] Revert "Standardize editfont size across browsers/OSes" (temporarily)

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

Change 401582 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/Flow@wmf/1.31.0-wmf.15] Revert "Remove duplicate editfont size definition" (temporarily)

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

Change 401583 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/CodeMirror@wmf/1.31.0-wmf.15] Revert "Remove font-size now it is set by editfont" (temporarily)

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

Change 401401 abandoned by Bartosz Dziewoński:
Revert "Standardize editfont size across browsers/OSes" (temporarily)

Reason:
Only wmf.15

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

Change 401402 abandoned by Bartosz Dziewoński:
Revert "Remove duplicate editfont size definition" (temporarily)

Reason:
Only wmf.15

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

Change 401403 abandoned by Bartosz Dziewoński:
Revert "Remove font-size now it is set by editfont" (temporarily)

Reason:
Only wmf.15

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

Change 401587 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/VisualEditor@master] Fix editfont size in source mode

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

Change 401581 merged by jenkins-bot:
[mediawiki/core@wmf/1.31.0-wmf.15] Revert "Standardize editfont size across browsers/OSes" (temporarily)

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

Change 401582 merged by jenkins-bot:
[mediawiki/extensions/Flow@wmf/1.31.0-wmf.15] Revert "Remove duplicate editfont size definition" (temporarily)

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

Change 401583 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@wmf/1.31.0-wmf.15] Revert "Remove font-size now it is set by editfont" (temporarily)

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

Mentioned in SAL (#wikimedia-operations) [2018-01-03T00:58:21Z] <reedy@tin> Synchronized php-1.31.0-wmf.15/extensions/CodeMirror: T182320 (duration: 00m 59s)

Mentioned in SAL (#wikimedia-operations) [2018-01-03T00:59:58Z] <reedy@tin> Synchronized php-1.31.0-wmf.15/extensions/Flow: T182320 (duration: 01m 18s)

Mentioned in SAL (#wikimedia-operations) [2018-01-03T01:01:15Z] <reedy@tin> Synchronized php-1.31.0-wmf.15/resources/src/mediawiki/mediawiki.editfont.css: T182320 (duration: 01m 01s)

To summarize: we spent all this effort to revert this change from wmf.15 (this week), but it will still go out with wmf.16 (next week). If we need to merge any follow-ups, we can merge them to master now.

There is a barebones announcement in Tech News: https://meta.wikimedia.org/wiki/Tech/News/2018/02

The font size in the editing window will change slightly for some users. It will now be identical on all browsers and operating systems.

Change 401587 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Fix editfont size in source mode

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

matmarex updated the task description. (Show Details)Jan 3 2018, 1:15 AM
matmarex removed a project: Patch-For-Review.
matmarex assigned this task to Esanders.
matmarex closed this task as Resolved.Jan 3 2018, 7:38 PM

Documentation is at https://www.mediawiki.org/wiki/Editing/Projects/Font_size_in_the_editing_window

I'll keep an eye on its talk page next week for any questions.