Page MenuHomePhabricator

RTL languages in Glosses should be aligned to right when editing
Closed, ResolvedPublic

Description

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:

Screenshot_2021-01-13 Luftballon.png (532×1 px, 51 KB)

Screenshot_2021-01-13 Luftballon(1).png (653×1 px, 95 KB)

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">.

Event Timeline

Restricted Application added a subscriber: Huji. · View Herald Transcript

Apparently the inputs are even LTR with ?uselang=fa (presumably because the styles use the site language, not the interface language):

Screenshot_2021-01-13 Luftballon(2).png (758×993 px, 100 KB)

@Ladsgroup I assume those language inputs should all be RTL, since they contain Persian language names?

Change 655906 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/WikibaseLexeme@master] Fix directions of Sense Gloss inputs

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

@Ladsgroup I assume those language inputs should all be RTL, since they contain Persian language names?

Funnily enough, they have the language code in latin letters, making it bidi but given that the name is the major part, I think it should be RTL.

I confirm the patch fixes both issues:

image.png (288×844 px, 41 KB)

image.png (226×670 px, 37 KB)

Change 655906 merged by jenkins-bot:
[mediawiki/extensions/WikibaseLexeme@master] Fix directions of Sense Gloss inputs

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