Page MenuHomePhabricator

Timeless skin: 13px editor font-size is very hard to read
Open, HighPublicBUG REPORT

Description

Generic parent-task: T245476: [SPIKE] How to make source editors' font-size responsive

Compared to the article font-size of 15.2px editor text is too small to provide a convenient UX.

Steps to Reproduce:
  • Compare text in the editor to sidebar links, latter is the same as article text.
  • Compare text in the editor with highlighting turned on and off.
  • Do these with all 3 of the editor font settings: monospace, sans-serif, serif.

WTE / WTE2010:

  1. https://www.mediawiki.org/w/index.php?title=2017_wikitext_editor&action=edit&useskin=timeless

WTE2017:

  1. Enable "New wikitext mode"
  2. https://www.mediawiki.org/wiki/2017_wikitext_editor?veaction=editsource&useskin=timeless
Reason

For historical reasons related to browsers implicitly setting monospace elements' font-size to something around 13px (inconsistently, ofc):
T182320: Fix textarea editor's edit font size sets the font-size to 13px for all skins, all editors, also when using non-monospace font.
Not an issue (not noticeable) in Vector (body: 14px), MonoBook (12.7px), Modern (13px).
Minerva avoids this by resetting paragraphs' (not the editor's) font-size to 16px.

Fix

Reset (inherit) default page font-size in editors (in Timeless).

Screenshots

Bad vs Good:

Before and after fix:

QA

Test on beta-cluster
WTE2010 source editor
  • Set the Skin to Timeless if not done yet.
  • Open "Editing" tab in "Preferences" in a new browser tab for efficency.
  • Choose all 3 "Edit area font style" options, reload the editor with each option, check the "font-" CSS rules in DevTools.
  • For each option, enable "Syntax highlighting" on the toolbar (stylus icon left of "Advanced", forces monospace font).
  • Evaluate whether the font size is visually perceived as similar with syntax highlighting enabled and disabled (subjective measure).
  • With highlighting enabled check the "font-" CSS rules in DevTools (only necessary once).
sansserifmonohighlighting (mono)
15.2px15.2px13.56px13.56pxexpected font-size: (with 16px browser setting)
15.2px ✔️15.2px ✔️15.2px ➖15.2px ➖actual font-size:
✔️✔️✔️font-family: as defined
WTE2017 VE source editor (NWE)
  • Enable "New wikitext mode" in "Beta features" tab.
  • Open "Editing" tab in "Preferences" in a new browser tab for efficency.
  • Choose all 3 "Edit area font style" options, reload the editor with each option, check the "font-" CSS rules in DevTools.
  • For each option, enable "Syntax highlighting" in the hamburger menu (forces monospace font).
  • Evaluate whether the font size is visually perceived as similar with syntax highlighting enabled and disabled (subjective measure).
  • With highlighting enabled check the "font-" CSS rules in DevTools (only necessary once).
sansserifmonohighlighting (mono)
15.2px15.2px13.56px13.56pxexpected font-size: (with 16px browser setting)
13px ➖13px ➖13px ➖13px ➖actual font-size: 15.2px (with 16px browser setting)
font-family: as defined

Event Timeline

Restricted Application added a project: VisualEditor. · View Herald TranscriptMar 10 2020, 5:12 PM
Restricted Application added a subscriber: Masumrezarock100. · View Herald Transcript
Demian updated the task description. (Show Details)Mar 10 2020, 5:26 PM
Demian updated the task description. (Show Details)Mar 10 2020, 5:36 PM
Demian updated the task description. (Show Details)

Change 578568 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Timeless@master] Fix editor font-size (13px) being too small in comparison to article (15.2px)

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

Subscribing discussion participants from T245476 .

@matmarex Isarra seems to be unavailable for reviewing the patch.

Change 586426 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/skins/Timeless@master] Make wikitext editor use fonts consistent with rest of content

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

Isarra added a subscriber: Isarra.Apr 6 2020, 8:07 PM

I am so confused... is this about the core editor, or VE's wikitext editor? Or does VE's editor just inherit the core styles regardless, in which case why does it matter and why was it filed against any of that when those are not where the fix should be? And what skin is this for? I don't think any of the mentioned skins have sidebars the same size as the content?

Based on just the title and the fact that this was filed under Timeless, the above patch should fully resolve it for at least core, but the description has me at an utter loss.

Demian added a comment.EditedApr 6 2020, 8:19 PM

I am so confused... is this about the core editor, or VE's wikitext editor?

All source editors: WikiTextEditor (old), WTE2010 (with toolbar), WTE2017 (VE's New Wikitext Editor - NEW). "Alphabet soup" confusion, indeed.

Or does VE's editor just inherit the core styles regardless,

VE's editor uses styles defined in core:

/* Edit font preference */
.mw-editfont-monospace {
  font-family: monospace, monospace;
}
.mw-editfont-sans-serif {
  font-family: sans-serif;
}
.mw-editfont-serif {
  font-family: serif;
}

in which case why does it matter and why was it filed against any of that when those are not where the fix should be?

I don't follow.

And what skin is this for? I don't think any of the mentioned skins have sidebars the same size as the content?

Just Timeless. The old skins fare well with 13px font-size in the editor, Minerva hacks around this issue. (See parent task T245476)

Based on just the title and the fact that this was filed under Timeless, the above patch should fully resolve it for at least core, but the description has me at an utter loss.

Thank you for finishing this fix.

Change 578568 abandoned by Aron Manning:
Fix editor font-size (13px) being too small in comparison to article (15.2px)

Reason:
Finished in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Timeless/ /586426

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

Change 586426 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Make wikitext editor use fonts consistent with rest of content

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

Demian closed this task as Resolved.Apr 6 2020, 8:24 PM
Demian removed a project: Patch-For-Review.
Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptApr 6 2020, 8:24 PM
Demian updated the task description. (Show Details)Apr 6 2020, 9:44 PM
Demian updated the task description. (Show Details)

Change 578568 restored by Aron Manning:
Fix editor font-size (13px) being too small in comparison to article (15.2px)

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

I am so confused...
... the description has me at an utter loss.

The following comment from you in the code (emphasis mine):

// Custom font stacks below should fully address this issue regardless

Suggest to me that you blame the font-stack inconsistency for this bug, which is not the case. As defined in the core styles (see above), VisualEditor uses the default monospace/sans-serif/serif browser font. In comparison, the Timeless uses for articles 'Segoe UI' (Windows) or a metrically consistent alternative. The size difference is minor.

The significant problem was the forced 13px font-size, which would not be "fully address" by using Timeless' font-stack.
Is this the cause of the confusion?

Demian added a subscriber: ashley.EditedApr 6 2020, 10:43 PM

@ashley @Isarra the previous patch fixed the WTE2010 (standard) text editor, but not the WTE2017 (VE source editor). See the QA section in the task description.
Reason: WTE2017 styles load after the skin's, overriding it.

Change 578568 restored by Aron Manning:
https://gerrit.wikimedia.org/r/578568

I've uploaded a patch for WTE2017 with more specific rules. Please review and merge. Note that the train leaves the station... tomorrow, I guess?

QA first patch (merged)

Test on beta-cluster
WTE2010 source editor
  • Set the Skin to Timeless if not done yet.
  • Open "Editing" tab in "Preferences" in a new browser tab for efficency.
  • Choose all 3 "Edit area font style" options, reload the editor with each option, check the "font-" CSS rules in DevTools.
  • For each option, enable "Syntax highlighting" on the toolbar (stylus icon left of "Advanced", forces monospace font).
  • Evaluate whether the font size is visually perceived as similar with syntax highlighting enabled and disabled (subjective measure).
  • With highlighting enabled check the "font-" CSS rules in DevTools (only necessary once).
sansserifmonohighlighting (mono)
15.2px15.2px13.56px13.56pxexpected font-size: (with 16px browser setting)
15.2px ✔️15.2px ✔️15.2px ➖15.2px ➖actual font-size:
✔️✔️✔️font-family: as defined
WTE2017 VE source editor (NWE)
  • Enable "New wikitext mode" in "Beta features" tab.
  • Open "Editing" tab in "Preferences" in a new browser tab for efficency.
  • Choose all 3 "Edit area font style" options, reload the editor with each option, check the "font-" CSS rules in DevTools.
  • For each option, enable "Syntax highlighting" in the hamburger menu (forces monospace font).
  • Evaluate whether the font size is visually perceived as similar with syntax highlighting enabled and disabled (subjective measure).
  • With highlighting enabled check the "font-" CSS rules in DevTools (only necessary once).
sansserifmonohighlighting (mono)
15.2px15.2px13.56px13.56pxexpected font-size: (with 16px browser setting)
13px ➖13px ➖13px ➖13px ➖actual font-size: 15.2px (with 16px browser setting)
font-family: as defined
Demian updated the task description. (Show Details)Apr 6 2020, 10:44 PM
Demian reopened this task as Open.Apr 6 2020, 10:47 PM
Demian triaged this task as High priority.
JTannerWMF moved this task from To Triage to Triaged on the VisualEditor board.Apr 7 2020, 3:09 PM
JTannerWMF edited projects, added Editing-team (Tracking); removed Editing-team.
JTannerWMF moved this task from Backlog to External on the Editing-team (Tracking) board.
JTannerWMF added a subscriber: JTannerWMF.

There doesn't appear to be an action for the Editing Team

Demian added a comment.EditedApr 7 2020, 3:15 PM

The first patch fixed the issue for WTE2010, but not for VisualEditor's WTE2017 as reported in the "QA" section in the description.

The second patch for fixing in WTE2017 too is awaiting review: https://gerrit.wikimedia.org/r/578568
Test report on 2nd patch: T247325#6049054

Demian updated the task description. (Show Details)Apr 7 2020, 3:16 PM
Demian added a project: Patch-For-Review.
Demian added a subscriber: Patch-For-Review.
Demian removed a subscriber: Patch-For-Review.
Evad37 added a subscriber: Evad37.EditedApr 10 2020, 2:09 AM

Wow, 15.2px is really, unpleasantly, big... in my opinion anyway. For comparison, the font size in this textbox here on phrabricator, and in most other skins (Vector, Monobook, Modern, Cologne Blue) is 13px.

(To clarify, I'm using the standard wikitext editor)

The difference is also really noticeable when enabling/disabling the code editor, e.g. on .css pages, as that is still using the normal 13px font size

Demian updated the task description. (Show Details)Apr 11 2020, 6:47 AM
Demian updated the task description. (Show Details)Apr 11 2020, 2:11 PM
Demian updated the task description. (Show Details)Apr 11 2020, 2:28 PM
Demian updated the task description. (Show Details)Apr 11 2020, 2:45 PM
Demian updated the task description. (Show Details)Apr 11 2020, 2:59 PM
Demian updated the task description. (Show Details)
Demian added a comment.EditedApr 11 2020, 3:04 PM
Test results for patch 578568 (not merged yet)

Test locally (git review -d 578568 in Timeless' folder) or on PatchDemo.

WTE2010 source editor
  • Log in as "Guest" : "guestguest".
  • Set the Skin to Timeless if not done yet.
  • Disable "New wikitext mode" in "Beta features" tab.
  • Open "Edit area font style" in "Editing" tab in a new browser tab for efficency.
  • Choose all 3 "Edit area font style" options, reload the editor with each option, check the "font-" CSS rules in DevTools.
  • For each option, enable "Syntax highlighting" in the hamburger menu (forces monospace font). (N/A on PatchDemo)
  • Evaluate whether the font size is visually perceived as similar with syntax highlighting enabled and disabled (subjective measure). (N/A on PatchDemo)
  • With highlighting enabled check the "font-" CSS rules in DevTools (only necessary once). (N/A on PatchDemo)
sansserifmonohighlighting (mono)
15.2px15.2px13.56px13.56pxexpected font-size: (with 16px browser setting)
15.2px ✔️15.2px ✔️13.56px ✔️13.56px ✔️actual font-size:
✔️✔️✔️✔️font-family: as defined
WTE2017 VE source editor (NWE)
  • Log in as "Guest" : "guestguest".
  • Set the Skin to Timeless if not done yet.
  • Enable "New wikitext mode" in "Beta features" tab.
  • Open "Editing" tab in "Preferences" in a new browser tab for efficency.
  • Choose all 3 "Edit area font style" options, reload the editor with each option, check the "font-" CSS rules in DevTools.
  • For each option, enable "Syntax highlighting" in the hamburger menu (forces monospace font). (N/A on PatchDemo)
  • Evaluate whether the font size is visually perceived as similar with syntax highlighting enabled and disabled (subjective measure). (N/A on PatchDemo)
  • With highlighting enabled check the "font-" CSS rules in DevTools (only necessary once). (N/A on PatchDemo)
sansserifmonohighlighting (mono)
15.2px15.2px13.56px13.56pxexpected font-size: (with 16px browser setting)
15.2px ✔️15.2px ✔️13.56px ✔️13.56px ✔️actual font-size:
✔️✔️✔️✔️font-family: as defined

Summary: This patch addresses all the specific use-cases.

Demian updated the task description. (Show Details)Jul 6 2020, 4:06 AM