Page MenuHomePhabricator

RTL support for Wikipedia Preview
Closed, ResolvedPublic

Description

Request

Support RTL on Wikipedia Preview

Event Timeline

SBisson created this task.Dec 6 2019, 4:08 PM
Restricted Application added a project: Inuka-Team. · View Herald TranscriptDec 6 2019, 4:08 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
SBisson renamed this task from Implement RTL support to RTL support.Dec 6 2019, 4:09 PM
Restricted Application added a project: I18n. · View Herald TranscriptDec 6 2019, 5:09 PM
AMuigai moved this task from Backlog to Q2-2020 on the Inuka-Team board.Apr 17 2020, 2:46 PM
AMuigai triaged this task as Medium priority.May 14 2020, 1:44 PM
AMuigai moved this task from Q2-2020 to Backlog on the Inuka-Team board.Jun 29 2020, 1:04 PM
AMuigai updated the task description. (Show Details)
Amire80 renamed this task from RTL support to RTL support for Wikipedia Preview.Jul 20 2020, 4:14 PM
SBisson moved this task from Code Review to Dev on the Inuka-Team (Kanban) board.Aug 4 2020, 8:47 PM
SBisson moved this task from Dev to Code Review on the Inuka-Team (Kanban) board.Aug 5 2020, 3:18 PM
hueitan moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Aug 5 2020, 9:18 PM
Jpita added a subscriber: Jpita.Aug 8 2020, 10:04 AM

the loading gif appears on the right side instead of being centered

I looked at https://wikimedia.github.io/wikipedia-preview/articles/hebrew.html

Mostly it's OK.

The main problem I see is the footer, which is not RTL. The content is correctly RTL: <div class="container" dir="rtl">. But the footer doesn't have RTL direction. Add dir="rtl" to <div class="footer">, <html>, or <body>.

Some other comments:

  • I'd love to see it in English and compare the placement of elements.
  • The title is not localized, but written in English: "Wikipedia". It's OK for the early testing stage, but should be localized before releasing and tested again.
  • It's probably not so much about RTL, but about localization in general: the ⓘ icon after the links is OK in Hebrew, but may be problematic in some other languages that treat spaces differently. In particular, I recommend testing these:
    • German and Dutch: It's quite frequent in these two languages, and perhaps in others, that the link ends in the middle of the word. For example, in the German Wikipedia article Vereinigte Staaten, there is this sentence: "Ein besonderer Aspekt bei manchen kleineren Städten, der selten und überwiegend in den Neuenglandstaaten vorkommt...". Only the string "Neuengland" is linked in the long word Neuenglandstaaten. In MediaWiki's wiki syntax, it is achieved by using <nowiki /> (I couldn't find how to do the same in Phabricator markup, but it's not that important). I suspect that the ⓘ icon will be inserted in the middle of the word, and this may look not so nice.
    • Japanese, Chinese, Burmese, Thai, Khmer, Lao: These languages use punctuation and spaces completely different from European languages, and this may affect how links are used, too. Each of these languages does it differently, so it would be great if someone could check each of them (and also languages that use the same writing systems: Cantonese, Shan, Mon, etc.). It's possible that it's fine to use the ⓘ icon there like that, but it should be checked.

the rest of the work for this task will be done on T252827

SBisson moved this task from Design sign off to Dev on the Inuka-Team (Kanban) board.EditedAug 11 2020, 7:17 PM

the rest of the work for this task will be done on T252827

The task referenced above is for the KaiOS app...

Bringing back to dev to address

  • alignment of the loading gif

I looked at https://wikimedia.github.io/wikipedia-preview/articles/hebrew.html

Mostly it's OK.

The main problem I see is the footer, which is not RTL. The content is correctly RTL: <div class="container" dir="rtl">. But the footer doesn't have RTL direction. > Add dir="rtl" to <div class="footer">, <html>, or <body>.

The footer content is in English with a little bit of Hebrew where it links to the article that was used. Wouldn't dir="rtl" break it?

Some other comments:

  • I'd love to see it in English and compare the placement of elements.

The first article in the demo site is in English: https://wikimedia.github.io/wikipedia-preview/articles/english.html

  • The title is not localized, but written in English: "Wikipedia". It's OK for the early testing stage, but should be localized before releasing and tested again.

There's another PR for the localization of the wordmark: https://github.com/wikimedia/wikipedia-preview/pull/36

It should be merged soon so you'll be able to see it on the demo site.

  • It's probably not so much about RTL, but about localization in general: the ⓘ icon after the links is OK in Hebrew, but may be problematic in some other languages that treat spaces differently.

The (i) icon is not inserted by software but by content editors. Not Wikipedia editors but editors of the third party websites integrating with the Wikipedia Preview component. They decide what word(s) have the preview enabled, which article it links to, and they can use the provided style with the (i) but they don't have to.

How could we proceed to check if this is flexible enough for all the languages you mentioned?

SBisson moved this task from Dev to QA on the Inuka-Team (Kanban) board.Aug 11 2020, 8:01 PM

the loading gif appears on the right side instead of being centered

It looks centered to me now on master. Let me know if that's what you see as well.

The animation itself goes from left to right so it probably needs to be flipped but I'll wait for the "loading state follow-up PR" (https://github.com/wikimedia/wikipedia-preview/pull/41) to be finished to avoid code conflicts.

The task referenced above is for the KaiOS app...

oops, sorry

AMuigai closed this task as Resolved.Aug 18 2020, 12:18 PM