Original title: **WikiTextEditor uses 13px font while VisualEditor uses the skin's default**
The report has been expanded to address the same issue surfacing in #discussiontools that affects more users:
{T251469 }
== Problem statement
Source editors are fixed to using 13px font-size regardless of the skin's and the browser's chosen font-size.
The font-size in the source editor can become disproportionate to the overall font-size, resulting in degraded UX.
=== Solution
The general solution would be:
# Inherit the font-size from the skin, thus rendering the edited text with the same font-size as the surroundings.
# In case of monospace fonts which tend to occupy more space at the same font-size setting: use ~90% of the font-size inherited from the skin. Status quo:
* Vector: 13px/14px ~= 92.86%
* MonoBook: 13px/12.7px = 102.36%
* Modern: 13px/13px = 100%
* Timeless WTE, WTE2010: 15.2px/15.2px = 100% (after my initial fix T247325#6034393)
* Timeless WTE2017: 13px/15.2px = 85.53% (pending fix T247325#6049054)
Patches on this task demonstrate the 90% monospace, 100% otherwise solution.
Individual skins can be customized, for ex. Vector would use 12.6px font-size with this generic approach, which might be undesirable.
== Original report
Initially reported for the Timeless skin (T247325), the rest use miniature fonts anyway and Minerva overrides the font-size in <p> tags.
===== Steps to Reproduce:
1. WTE2010: https://www.mediawiki.org/wiki/2017_wikitext_editor?action=edit&useskin=timeless
1. [[ https://www.mediawiki.org/wiki/Special:Preferences#mw-prefsection-betafeatures | enable ]] "New wikitext mode"
1. WTE2017: https://www.mediawiki.org/wiki/2017_wikitext_editor?veaction=editsource&useskin=timeless
===== Actual Results:
Hard-to-read 13px font-size.
===== Expected Results:
Readable 15.2px font-size (inherited from the skin) for sans and serif editfont.
About 10% smaller font-size for monospace fonts: the same text is rendered in about the same area at ca. 90% font-size as with serif and sans fonts.
== Screenshots
Good:
| {F31621696} | {F31621695}
Bad vs Good:
| {F31621703} | {F31621704}
== Details
The offending css rule is (loaded into a <style> tag):
```
.mw-editfont-monospace, .mw-editfont-sans-serif, .mw-editfont-serif {
font-size: 13px;
}
```
The patch that added it: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/396005/5/resources/src/mediawiki/mediawiki.editfont.css
The cause: {T182320}
`textarea` elements set an inconsistent font-size in old browsers. (Not in today's Chrome, idk about others)
> For historical reasons we've allowed inconsistent browser-default styles to apply to textarea#wpTextbox1
==== Early approach
1. 2017WTE has no `textarea` element (only divs). The selector should be more specific: `.textarea.mw-editfont-*`
2. Just reset the `textarea` element's font-size to the parent's: `font-size: inherit;` That will be the skin's chosen default.
3. The [[ https://gerrit.wikimedia.org/r/c/mediawiki/extensions/CodeMirror/+/572876 | second patch ]] addresses an error ([[ #5892848 | details ]]) in CodeMirror that was revealed by this change.