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

Assigned To

Authored By

	Jdlrobson
	Apr 29 2014, 5:59 PM

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

Install https://chrome.google.com/webstore/detail/cors-toggle/jioikioepegflmdnbocfhgmpmopmjkim?hl=en
Toggle on the CORs extension
Visit https://reading-web-staging.wmflabs.org/w/index.php?title=Israel&mobileaction=toggle_view_mobile#/languages
RTL languages should appear right aligned. LTR left aligned.
Verify languages display correctly on a few other pages
When done pass to Nirzar for sign off.

Details

Reference: bz64617

	Subject	Repo	Branch	Lines +/-
	Right align RTL languages in language list	mediawiki/extensions/MobileFrontend	master	+100 -5

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Invalid	Amire80	T30708 BiDi: LTR and RTL mixed up (tracking)
Resolved	• Nirzar	T66617 List of languages looks strange when mixes RTL and LTR languages
Duplicate	None	T74153 meta=siteinfo&prop=langlinks should indicate whether a language is RTL
Resolved	• santhosh	T78337 refactor the langdb in ULS to make it more easily reusable
Resolved	• santhosh	T131140 Create a language data library out of jquery.uls.data module and make it independent of jquery

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:

Screen_Shot_2014-05-23_at_3.33.39_PM.png (438×1 px, 30 KB)

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

Web-Team-Backlog

Jdlrobson moved this task from Incoming to Epics/Goals on the Web-Team-Backlog board.Dec 5 2014, 7:35 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.

Amire80 added a subtask: T78337: refactor the langdb in ULS to make it more easily reusable.Dec 11 2014, 9:30 PM

Jdlrobson moved this task from Epics/Goals to 2016-17 Q4 on the Web-Team-Backlog board.Dec 22 2014, 7:47 PM

Jdlrobson removed a project: MobileFrontend-stable.Jan 6 2015, 9:20 PM

Jdlrobson set Security to None.

Amire80 triaged this task as Medium priority.Jan 23 2015, 4:39 AM

Amire80 added a project: I18n.

Jdlrobson moved this task from 2016-17 Q4 to 2015-16 Q4 on the Web-Team-Backlog board.Apr 10 2015, 6:09 PM

Jdlrobson moved this task from 2015-16 Q4 to Upcoming on the Web-Team-Backlog board.Apr 10 2015, 6:35 PM

Jdlrobson edited projects, added MobileFrontend; removed Web-Team-Backlog.Aug 14 2015, 11:10 PM

Jdlrobson mentioned this in T123384: Build language overlay design alternative.Feb 2 2016, 7:43 PM

Jdlrobson added a parent task: T121919: [GOAL] Improve in-article language switching on mobile web I.Feb 2 2016, 7:53 PM

MBinder_WMF added a project: Web-Team-Backlog.May 17 2016, 6:35 PM

MaxSem unsubscribed.May 17 2016, 6:41 PM

Jdlrobson moved this task from Upcoming to 2016-17 Q1 on the Web-Team-Backlog board.May 18 2016, 3:13 PM

MBinder_WMF moved this task from 2016-17 Q1 to Incoming on the Web-Team-Backlog board.May 18 2016, 4:53 PM

Jdlrobson reassigned this task from Amire80 to • Nirzar.May 25 2016, 9:45 PM

Pinging @Nirzar for design.

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

Use only LTR, so show RTL languages in LTR like iOS does

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 removed a parent task: T121919: [GOAL] Improve in-article language switching on mobile web I.Jun 15 2016, 11:44 PM

• JKatzWMF added a parent task: T137932: [EPIC] Mobile language switching improvement work II.

@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 unsubscribed.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.

• JKatzWMF removed a parent task: T137932: [EPIC] Mobile language switching improvement work II.Jun 16 2016, 9:41 PM

MBinder_WMF moved this task from Needs Prioritization to Design on the Web-Team-Backlog board.Sep 29 2016, 10:47 PM

MBinder_WMF edited projects, added Web-Team-Backlog (Design); removed Web-Team-Backlog.

Jdlrobson moved this task from Backlog to Team:Growth on the MobileFrontend board.Jul 13 2017, 5:56 PM

• santhosh closed subtask T78337: refactor the langdb in ULS to make it more easily reusable as Resolved.Sep 27 2017, 11:35 AM

Jdlrobson mentioned this in T188233: Article titles in the language list lack the lang and dir attributes, and autonyms lack the dir attributes.Feb 26 2018, 4:38 PM

Jdlrobson changed the task status from Stalled to Open.Feb 26 2018, 7:43 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson merged a task: T188233: Article titles in the language list lack the lang and dir attributes, and autonyms lack the dir attributes.

Jdlrobson added a subscriber: Aklapper.

Jdlrobson edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Design).Feb 26 2018, 7:48 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Incoming to 2017-18 Q3 on the Web-Team-Backlog board.Feb 27 2018, 1:25 AM

Jdlrobson moved this task from 2017-18 Q3 to Upcoming on the Web-Team-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.

pmiazga subscribed.Feb 27 2018, 6:34 PM

ovasileva set the point value for this task to 3.Mar 6 2018, 5:40 PM

ovasileva added a project: Readers-Web-Kanbanana-Board-Old.

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 Web-Team-Backlog board.

A follow up: T189036: Get MobileFrontend to use language-data :)

Jdlrobson updated the task description. (Show Details)Mar 7 2018, 1:30 AM

Jdlrobson claimed this task.Mar 15 2018, 3:20 PM

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

gerritbot added a project: Patch-For-Review.Mar 15 2018, 6:18 PM

It works!

Screen Shot 2018-03-15 at 11.17.05 AM.png (349×397 px, 21 KB)

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

Jdlrobson moved this task from Needs Code Review to Needs More Work on the Readers-Web-Kanbanana-Board-Old board.Mar 20 2018, 4:03 PM

Jdlrobson moved this task from Needs More Work to Needs Code Review on the Readers-Web-Kanbanana-Board-Old board.Mar 20 2018, 10:01 PM

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

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

Jdlrobson moved this task from Needs Code Review to Needs QA on the Readers-Web-Kanbanana-Board-Old board.Mar 21 2018, 7:39 PM

Jdlrobson removed a project: Patch-For-Review.

ReleaseTaggerBot added a project: MW-1.31-release-notes (WMF-deploy-2018-03-27 (1.31.0-wmf.27)).Mar 21 2018, 8:01 PM

Jdlrobson updated the task description. (Show Details)Mar 21 2018, 8:03 PM

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:

Screen Shot 2018-03-22 at 10.21.06 AM.png (1×2 px, 801 KB)

over to @Nirzar for signoff

Macro votecat: looks good

as per the screenshot.

	F15966132: Screen Shot 2018-03-22 at 10.21.06 AM.png
	Mar 22 2018, 6:04 PM

	F15526203: Screen Shot 2018-03-15 at 11.17.05 AM.png
	Mar 15 2018, 6:19 PM

	F13782: Screen_Shot_2014-05-23_at_3.33.39_PM.png
	Nov 22 2014, 3:16 AM

	F4054911: IMG_0248.PNG
	May 26 2016, 12:39 AM

List of languages looks strange when mixes RTL and LTR languagesClosed, ResolvedPublic3 Estimated Story PointsActions