Page MenuHomePhabricator

In RTL languages, default instructional text for statement auto-suggest search field overlaps
Closed, ResolvedPublicBUG REPORT

Description

User story: N/A

We have this:

On RTL languages (particularly Hebrew, Farsi, and Arabic), the default text in the depicts auto-suggest/search box is jumbled and overlapping.

We want this:
RTL languages should show the help text in the proper order and not overlap at normal screen sizes

Screenshots (if possible):

Acceptance Criteria:

  • Hebrew, Farsi, and Arabic at the very least should have clean, readable text that doesn't overlap in the auto-suggest box (append ?uselang=he or uselang=fa or ?uselang=ar to a file page URL to test easily)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 1 2019, 4:27 PM
Ramsey-WMF renamed this task from In RTL languages, default instructional text for auto-suggest overlaps to In RTL languages, default instructional text for statement auto-suggest search field overlaps.May 1 2019, 4:51 PM
Ramsey-WMF triaged this task as Normal priority.
Ramsey-WMF moved this task from Untriaged to Next up on the Multimedia board.
Restricted Application added a project: I18n. · View Herald TranscriptMay 1 2019, 5:54 PM

@Ramsey-WMF Without having tested myself, Farsi fa should be in the list I think.

Ramsey-WMF updated the task description. (Show Details)May 9 2019, 5:27 PM
Ramsey-WMF updated the task description. (Show Details)

@Ramsey-WMF Without having tested myself, Farsi fa should be in the list I think.

Yes. I've updated the task description

Assigning this to Eric because he loves RTL issues :)

I assume the correct appearance in RTL languages would be something like this:

The placeholder text for the input is the thing that's currently in the wrong location; it should be next to the magnifying glass icon at the direction-relative "starting side" of the input box. The other text element, the "From Wikidata" label, appears in the correct position (at the "far end" of the input).

It looks like there is actually a CSS override being applied when viewing the page in RTL mode that forces text inside input elements (both placeholder text and any text that the user enters) to remain in LTR orientation. This actually comes from Core: the class is .sitedir-ltr (in mediawiki.legacy/shared.css). Here is the relevant CSS:

/* Most input fields should be in site direction */
.sitedir-ltr textarea,
.sitedir-ltr input {
    /* @noflip */
    direction: ltr;
}

I'll post a patch that restores the expected behavior here, but I'm overriding an override at this point. If anyone familiar with the contents of mediawiki.legacy/shared.css can elaborate on why this exception was made for input elements, I'd be curious to know why.

Amire80 added a subscriber: Amire80.Aug 9 2019, 9:25 PM

The image and the solution look okay!

Change 529435 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Force statement input to orient correctly in RTL languages

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

Patch is ready for review. I've added a very narrow override for when the <body> element possesses both the rtl and sitedir-ltr classes; I still don't understand why the latter class gets added at all when the language is set to something like Hebrew or Arabic.

Perhaps @Catrope, @Krinkle, or @SPQRobin can give a better answer, but my guess is that it was done because of the assumption that the input fields must always follow the direction of the site's content language and not the direction of the user interface language. This usually makes sense on a site like Wikipedia or Wikisource, where most of the content is indeed in one language, but it's problematic on multilingual sites like Meta, Commons, Incubator, or Wikidata. Perhaps it can be improved.

Restricted Application added a project: Multimedia. · View Herald TranscriptAug 10 2019, 11:54 PM

Change 529435 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Force statement input to orient correctly in RTL languages

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

Currently not working on Beta

Change 532815 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Better cross-browser fix for T222283

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

Change 532815 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Better cross-browser fix for T222283

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

Ramsey-WMF closed this task as Resolved.Sep 10 2019, 12:32 AM

Tested. Fixed.