Page MenuHomePhabricator

List of languages looks strange when mixes RTL and LTR languages
Closed, ResolvedPublic3 Story Points

Description

Copying from Amir:
Items in the language list are in a mix of RTL and LTR languages.
This makes the list somewhat strangely aligned.
Centering it makes sense - that's how language lists are shown on
an iPhone, for example.


Version: unspecified
Severity: normal

Acceptance criteria

  • A dir attribute needs to be added to each language item.
  • Left align LTR languages
  • RIght align RTL languages
  • Currently the API does not support this but we can use an array to determine RTL given the number of RTL languages that exist. We'll use a frontend library and submit a patch in parallel to get this into core. See ongoing conversation in https://gerrit.wikimedia.org/r/415176, T189036 and associated patchsets.

Languages that can be considered RTL are:

# array needs lowercasing
['Aeb_arab',
'Arc',
'Ar',
'Arz',
'Azb',
'Bcc',
'Bgn',
'Bqi',
'Ckb',
'Dv',
'Fa',
'Glk',
'He',
'Khw',
'Kk_cn',
'Kk_arab',
'Ks_arab',
'Ku_arab',
'Lki',
'Lrc',
'Luz',
'Mzn',
'Pnb',
'Ps',
'Sd',
'Sdh',
'Skr_arab',
'Ug_arab',
'Ur',
'Yi'
]

All other languages should be considered ltr.

Testing

Details

Reference
bz64617

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

bingle-admin wrote:

Prioritization and scheduling of this bug is tracked on Trello card https://trello.com/c/OD3t1a5u

jgonera wrote:

What are the steps or platform required to see this? A screenshot perhaps?

Created attachment 15462
Arabic a RTL language, shown 2 from bottom is written in LTR

Attached:

Let's just add a direction attribute to each individual language in the overlay? It would also allow us to categorise languages in the overlay by RTL/LTR which would be a neat feature...

Amir it seems the API doesn't return the direction of a language. Do you know if it is possible with a query like:
https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&meta=siteinfo&format=json&siprop=general%7Clanguages

?

Jdlrobson changed the task status from Open to Stalled.Dec 11 2014, 9:12 PM

Blocked on T78334

Another imaginable possibility is to resolve it through https://phabricator.wikimedia.org/T78337 . It also makes more sense because it's about languages and not sites.

Jdlrobson set Security to None.
Amire80 triaged this task as Normal priority.Jan 23 2015, 4:39 AM
Amire80 added a project: I18n.
MaxSem removed a subscriber: MaxSem.May 17 2016, 6:41 PM
Jdlrobson reassigned this task from Amire80 to Nirzar.May 25 2016, 9:45 PM
jhobs added a subscriber: jhobs.

Pinging @Nirzar for design.

Nirzar added a comment.EditedMay 25 2016, 10:09 PM

Centering it makes sense - that's how language lists are shown on an iPhone, for example.

are we talking about center align? languages are not shown that way on iPhone. plus it doesn't make sense to center align list items. the scannability is a huge issue for center aligned lists and that's why no one uses it

here's a screen from iPhone.

there are two solutions here

  1. Use only LTR, so show RTL languages in LTR like iOS does
  1. Use the current language as base language and translate all other language names into that language. so for example. if you current project language is Hebrew, and you are switching languages, the whole language list will use Hebrew script and will be RTL. that way it's even easier for a Hebrew speaking person to read all other language names.

@Nirzar @dr0ptp4kt what is the status here? porting it over from old language switching epic: T121919 to new one: T137932

@JKatzWMF i think the amount of work needs to be done for option 2 above is a lot. We can estimate it but my feelings it's a whole project on its own. I think we should go with option 1 unless there are any strong objections. also this shouldn't be a blocker in my opinion since the title says "looks strange"

kaldari removed a subscriber: kaldari.Jun 16 2016, 12:25 AM

@Nirzar works for me. If @dr0ptp4kt agrees, let's remove as a blocker.

I agree - option 1 - be consistent.

OR option 0 - don't introduce extra scope. Presently, the mobile language switcher uses the directionality of the wiki, meaning: if the wiki language is LTR the list is left aligned and if it's RTL it's right aligned.

Jdlrobson moved this task from Backlog to Tasks on the MobileFrontend board.Jul 13 2017, 5:56 PM
Jdlrobson changed the task status from Stalled to Open.Feb 26 2018, 7:43 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: Aklapper.
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from 2017-18 Q3 to Upcoming on the Readers-Web-Backlog board.
Jdlrobson removed Nirzar as the assignee of this task.Feb 27 2018, 5:32 PM
Jdlrobson added a subscriber: Nirzar.

Our estimates ranged from 2-5. It seems like more clarity on T74153 would be helpful. I'll do that.

ovasileva set the point value for this task to 3.Mar 6 2018, 5:40 PM
Jdlrobson updated the task description. (Show Details)Mar 6 2018, 5:40 PM
Jdlrobson moved this task from Upcoming to 2017-18 Q3 on the Readers-Web-Backlog board.
Jdlrobson updated the task description. (Show Details)Mar 7 2018, 1:30 AM
Jdlrobson moved this task from To Do to Doing on the Readers-Web-Kanbanana-Board-Old board.

Change 419812 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Right align RTL languages in language list

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

It works!

I will continue working on the parent tasks to render the JS array unnecessary but we can push ahead and review this.

Change 419812 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Right align RTL languages in language list

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

Jdlrobson updated the task description. (Show Details)Mar 21 2018, 8:03 PM
Jdlrobson reassigned this task from Jdlrobson to ABorbaWMF.Mar 21 2018, 8:10 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: ABorbaWMF.

I've updated staging to include this patch:

 ssh reading-web-staging-3.eqiad.wmflabs
sudo su mwvagrant
cd /srv/mediawiki-vagrant/mediawiki/extensions/MobileFrontend/
git fetch
git checkout origin/master

@ABorbaWMF I've added instructions for how to test!

Working for me on Staging:

ovasileva reassigned this task from ABorbaWMF to Nirzar.Mar 23 2018, 11:01 AM
ovasileva added a subscriber: ovasileva.

over to @Nirzar for signoff

Nirzar closed this task as Resolved.Mar 26 2018, 5:09 PM

Macro votecat: looks good

as per the screenshot.