We don’t run CSSJanus on the portal stylesheets, so it isn’t quite ready for RTL:

• The bookshelves disappear in RTL. To prevent horizontal scrolling when the page is narrower than 800 pixels, we make each bookshelf’s inner element three times the width of the page, then center and clip it to the outer element, which is the width of the page. Looks like we can fix that with a simple .bookshelf-container { direction: ltr; }.
• The sister project icons are left-aligned to the project names rather than right-aligned to the project icons. That should just be a matter of removing the text-align: left on .otherprojects.
• The “find a language” submit button still points to the right.

Hi - I have a couple questions for the group:

Are there any blockers to us using CSSJanus on the portal style sheets so that we can do RTL?

If we can use CSSJanus (and/or the fixes that @mxn suggests) can we implement them so that when we detect that a user's preferred language is one that uses RTL, using this list: https://en.wikipedia.org/wiki/Right-to-left and specifically: https://phabricator.wikimedia.org/T2745#34767

How hard would this feature be to implement? Do we have enough testers that can help us with this feature if we decide to implement it?

CSSJanus processes the CSS stylesheet on the server side, whereas the user language is detected later on the client side. MediaWiki is able to use CSSJanus because it serves up a different stylesheet based on the uselang setting rather than the client side language setting.

Theoretically we could write some JavaScript to flip the interface ourselves based on the detected language, but the page flipping would likely be quite distracting for visitors.

Gotcha..thanks for the info! We might just defer this to later on.

Moving this to the Portal Backlog board for investigation later on.

I merged a new ticket and added the description from @Neil_P._Quinn_WMF from T143126 here:

When I set my accept-language header to start with Arabic, the Arabic Wikipedia becomes the first one listed around the globe. However, the subheading appears this way:

This is incorrect and reads as "articles 437 000+".

It should appear like this:

I achieved that by setting the markup to be <small dir="rtl"><span dir="ltr">437 000+</span> مقالة</small> but I'm sure there are better ways.

(This new portal design looks awesome, by the way! Thanks!)

Just to be clear, T143126 was about the direction within an RTL link box, regardless of the user's language, whereas this task was originally about the orientation of all the link boxes when the user's language is RTL. The two could of course be taken care of together, one with CSS and the other with JavaScript.

Now that the direction part of T154349 is resolved, this is becoming much more important. In particular, the word order for counts is incorrect, and in Hebrew the number appears totally incorrectly. I suggest raising the priority.

OK, now, when the portal is in an RTL language, that RTL language appears correctly near the globe, but other LTR languages appear incorrectly. So for example English is shown as "articles +5 357 000", and it's also broken in Japanese, Italian, etc.

Each of the boxes around the globe already has the correct HTML lang attribute. All that's left is to add the correct dir attribute.

(Personal rant: I've been trying to convince the w3c for years to deduce dir automatically from lang, so far without success. But I'm not giving up.)

Change 343214 had a related patch set uploaded (by JGirault):
[wikimedia/portals] Add dir attribute to each language in the top10 section

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

Simulation with preferred languages = arabic, french, spanish, hebrew

Thanks, @JGirault - I think that is the proper way to display the article numbers.

In T122053#3108701, @JGirault wrote:

Simulation with preferred languages = arabic, french, spanish, hebrew

Unfortunately, that's still incorrect. For Arabic, the "466" should be to the left of the "000", which should itself be to the left of the "+". See my image above for how it should look. I'm confident the same applies to Hebrew.

As an aside, it's quite weird that we put "Wikipedia" in Latin script at the top of the page when the interface language is Arabic. The Arabic Wikipedia writes Wikipedia in Arabic script in its logo: "ويكيبيديا". However, it's not as big a deal as the broken numbers.

Thanks for working hard to get this right!

sooooo....RTL doesn't really mean everything is RTL? :-/

Ah, I didn't even notice, thanks a lot @Neil_P._Quinn_WMF ! This will require me a little more work then.

In T122053#3111349, @debt wrote:

sooooo....RTL doesn't really mean everything is RTL? :-/

That's correct. In Arabic, letter and words are written right to left, but numbers are written left to right. For (slightly) more information, see https://en.wikipedia.org/wiki/Arabic#Numerals. I believe the same is true of Hebrew as well.

thanks for helping with this sticky issue, @Neil_P._Quinn_WMF ! :)

New patch version features:

• Display top 10 item LTR or RTL depending on the language
• Force display of numbers in top 10 in LTR
• Force display of numbers in language dropdown in LTR

Simulation with preferred languages = arabic, french, spanish, hebrew

Currently in production:	Patch version :

The Arabic in the patch version looks good. Thanks @JGirault!

Change 343214 merged by jenkins-bot:
[wikimedia/portals@master] Add dir attribute to each language in the top10 section

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