As an editor working on lexicographical data, when editing Glosses of a Sense in an RTL language I want the input to be in RTL, in order to enter it without breaking my brain.
Problem:
The directionality of a Gloss is set correctly when displaying it (T203081), but not when editing it.
Example:
See the Persian or Hebrew Glosses of L99-S1.
Screenshots/mockups:
BDD
GIVEN a Sense on a Lexeme
WHEN I edit an existing Gloss in an RTL language
OR I add a new Gloss in an RTL language
THEN the input is aligned right-to-left
Acceptance criteria:
- The input is styled correctly.
Notes:
This happens because the <input> is selected by the following CSS rule:
.sitedir-ltr textarea, .sitedir-ltr input, textarea[dir="ltr"][dir="ltr"], input[dir="ltr"][dir="ltr"] { direction: ltr; }
Which comes from this LESS code in resources/src/mediawiki.skinning/legacy.less:
/* Most input fields should be in site direction */ textarea, input { // Doubling of `dir` attribute selector increases specificity to allow // attributes to override content and/or site directionality. See T260993. .sitedir-ltr &, &[ dir='ltr' ][ dir='ltr' ] { /* @noflip */ direction: ltr; } .sitedir-rtl &, &[ dir='rtl' ][ dir='rtl' ] { /* @noflip */ direction: rtl; } }
And that’s more specific than the direction that the input inherits from the surrounding <td dir="rtl" lang="fa">.