Page MenuHomePhabricator

Talk pages - New sections - editor text malformed and misaligned
Closed, ResolvedPublicBUG REPORT

Description

Steps to Reproduce:

  1. Be using the the Timeless skin
  2. Open up a new section link on talk page (such as https://en.wikipedia.org/w/index.php?title=User_talk:Gwennie-nyan&action=edit&section=new)
  3. Type in text (preferably dummy text like lorem ipsum)

Results:

  1. Note how the cursor doesn't stay with the text you type.
  2. Open up a browser developer inspector window
  3. See how raw html text and that displayed by the editor is quite different (Sorry imgur compresses video)

Expected Results:

  • Text lines up with underlying text when typing for editing.

Event Timeline

Is this using VE/NWE 2017? And with/without codemirror or any particular editarea-affecting gadgets?

Is this using VE/NWE 2017? And with/without codemirror or any particular editarea-affecting gadgets?

Correct.

I've found that https://en.wikipedia.org/w/index.php?title=User_talk:Gwennie-nyan&section=new&veaction=editsource won't trigger it, only the link options above will.

Was able to reproduce in Firefox, but only with syntax highlighting on. The offending styles are rECMI resources/ext.CodeMirror.less:3-11, introduced as mitigation for T245568: Highlighting (CodeMirror) changes the editor font from the user preference (sans/serif) to monospace in the 2017 editor:

.mw-editfont-monospace,
.mw-editfont-sans-serif,
.mw-editfont-serif {
	.CodeMirror {
		// Don't let CodeMirror set the font to monospace if it's set on an ancestor.
		// See T245568
		font-family: inherit;
	}
}

The next font-family comes from .mw-editfont-monospace. The font-famliy for .mw-editfont-monospace is set in two different places:

inline:6
.mw-editfont-monospace {
    font-family: monospace,monospace;
}
load.php:1 @screen
.mw-editfont-monospace {
    font-family: 'Menlo','Consolas','Monaco','Noto Mono','Nimbus Mono L',monospace;
}

The rules are at the same specificity but line 6 is loaded after line 1, so the monospace fallback from core (rMW resources/src/mediawiki.editfont.less:2-4) overrides the fancier fonts set in rSTIM resources/forms.less:128. The two fonts are not metrically identical, so the spacing for the CodeMirror cursor becomes disconnected from the text. It doesn't look like changing the load order is practical here, so the best fix would probably be to make the font rules in forms.less more specific, like

body .mw-editfont-monospace {
	font-family: @fonts-mono;
}

I used monospace as the example, but this applies for serif, sans-serif, and mono.

This did not occur when using veaction=edit because VE does not load ext.CodeMirror, just ext.CodeMirror.visualEditor.init and ext.CodeMirror.lib. Neither of those modules include the font-family:inheritrule.

Change 703954 had a related patch set uploaded (by AntiCompositeNumber; author: AntiCompositeNumber):

[mediawiki/skins/Timeless@master] resources: increase specificity of mw-editfont font-family in forms.less

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

Change 703954 merged by jenkins-bot:

[mediawiki/skins/Timeless@master] resources: increase specificity of mw-editfont font-family in forms.less

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