Page MenuHomePhabricator
Create Task
Maniphest T222283

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

Assigned To
egardner
Authored By
• Ramsey-WMF
May 1 2019, 4:27 PM
Tags
Referenced Files
F30004714: Screen Shot 2019-08-09 at 1.57.54 PM.png
Aug 9 2019, 9:17 PM
F28887412: hebrew-bug.PNG
May 1 2019, 4:27 PM
Subscribers
Aklapper
Amire80
Catrope
Krinkle
• Ramsey-WMF
SPQRobin
Volker_E
Tokens
"Like" token, awarded by Amire80.

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):

hebrew-bug.PNG (95×743 px, 4 KB)

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)

Details

SubjectRepoBranchLines +/-
Better cross-browser fix for T222283mediawiki/extensions/WikibaseMediaInfomaster+1 -1
Force statement input to orient correctly in RTL languagesmediawiki/extensions/WikibaseMediaInfomaster+8 -0
Customize query in gerrit

Related Objects
Search...

Event Timeline

• Ramsey-WMF created this task.May 1 2019, 4:27 PM
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 Medium priority.
• Ramsey-WMF added projects: Structured-Data-Team-Current-Work, Structured Data Engineering.
• Ramsey-WMF moved this task from Untriaged to Next up on the Multimedia board.
Aklapper added a project: RTL.May 1 2019, 5:54 PM
Restricted Application added a project: I18n. · View Herald TranscriptMay 1 2019, 5:54 PM
• Ramsey-WMF added a parent task: T221109: Inconsistent handling of RTL languages in Structured Data UI elements.May 1 2019, 11:28 PM
Volker_E subscribed.May 9 2019, 10:00 AM

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

Volker_E mentioned this in T221109: Inconsistent handling of RTL languages in Structured Data UI elements.May 9 2019, 10:11 AM
• Ramsey-WMF updated the task description. (Show Details)May 9 2019, 5:27 PM
• Ramsey-WMF updated the task description. (Show Details)
In T222283#5169561, @Volker_E wrote:

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

Yes. I've updated the task description

• Ramsey-WMF assigned this task to egardner.Aug 8 2019, 6:07 PM

Assigning this to Eric because he loves RTL issues :)

• Ramsey-WMF moved this task from To Do to Doing on the Structured Data Engineering board.Aug 8 2019, 6:08 PM
Amire80 awarded a token.Aug 9 2019, 1:22 PM
egardner added a comment.Aug 9 2019, 9:17 PM

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

Screen Shot 2019-08-09 at 1.57.54 PM.png (798×1 px, 102 KB)

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 subscribed.Aug 9 2019, 9:25 PM

The image and the solution look okay!

gerritbot added a comment.Aug 9 2019, 9:53 PM

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

gerritbot added a project: Patch-For-Review.Aug 9 2019, 9:53 PM
egardner moved this task from To Do to Code Review on the Structured-Data-Team-Current-Work board.Aug 9 2019, 9:54 PM

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.

Amire80 added subscribers: SPQRobin, Catrope, Krinkle.Aug 10 2019, 8:07 AM

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.

Aklapper edited projects, added Structured-Data-Backlog; removed Multimedia.Aug 10 2019, 11:54 PM
Restricted Application added a project: Multimedia. · View Herald TranscriptAug 10 2019, 11:54 PM
Aklapper edited projects, added Structured-Data-Backlog (Current Work); removed Multimedia, Structured-Data-Backlog.Aug 10 2019, 11:57 PM
Cparle moved this task from Code Review to Verify on Production on the Structured-Data-Team-Current-Work board.Aug 12 2019, 2:47 PM
Cparle moved this task from Verify on Production to Needs QA on the Structured-Data-Team-Current-Work board.
gerritbot added a comment.Aug 12 2019, 3:12 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

MBinder_WMF moved this task from Incoming to Needs QA on the Structured-Data-Backlog (Current Work) board.Aug 12 2019, 3:19 PM
Maintenance_bot removed a project: Patch-For-Review.Aug 12 2019, 4:10 PM
ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.20; 2019-08-27).Aug 20 2019, 6:01 PM
• Ramsey-WMF moved this task from Needs QA to Code Review on the Structured-Data-Backlog (Current Work) board.Aug 27 2019, 12:48 AM

Currently not working on Beta

gerritbot added a comment.Aug 27 2019, 10:37 PM

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

gerritbot added a project: Patch-For-Review.Aug 27 2019, 10:37 PM
gerritbot added a comment.Sep 3 2019, 10:59 AM

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

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

ReleaseTaggerBot edited projects, added MW-1.34-notes (1.34.0-wmf.21; 2019-09-03); removed MW-1.34-notes (1.34.0-wmf.20; 2019-08-27).Sep 3 2019, 11:00 AM
Maintenance_bot removed a project: Patch-For-Review.Sep 3 2019, 11:10 AM
egardner moved this task from Code Review to Needs QA on the Structured-Data-Backlog (Current Work) board.Sep 4 2019, 4:48 PM
• Ramsey-WMF moved this task from Needs QA to Verify on Production on the Structured-Data-Backlog (Current Work) board.Sep 9 2019, 4:29 PM
• Ramsey-WMF closed this task as Resolved.Sep 10 2019, 12:32 AM

Tested. Fixed.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL