Page MenuHomePhabricator

Share experience of building a LTR / RTL feature
Closed, ResolvedPublic


The revision slider has been built to fit both left-to-right languages and right-to-left languages. Maybe it might be worth sharing the experience with the community.

Open questions are:

  • What exactly should we share?
  • Where would we share it?

@Mooeypoo, we'd love to collaborate with you on that, if you are interested!

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 11 2016, 3:22 PM
Lea_WMDE renamed this task from PLACEHOLDER: write a blog post/article on creating RTL tools in Mediawiki to Share experience of building a LTR / RTL feature.Aug 12 2016, 1:19 PM
Lea_WMDE removed Lea_WMDE as the assignee of this task.
Lea_WMDE added a project: TCB-Team.
Lea_WMDE updated the task description. (Show Details)
Lea_WMDE added a subscriber: Mooeypoo.

I'd be super happy to help!

Is this meant to be more technical or more broad? The target audience is planned to be developers (style of 'here's what we did technically' etc) or is it more broad, in the sense of 'things to consider' or laying out your experience deploying and testing on Hebrew (and other RTL) wikis?

We are thinking about something leaning more to the technically-oriented audience. At least it seems we have something to share when it comes to developing. We don't feel like we have enough knowledge and experience to say much on broader and general level. We would still like to keep it rather general (although MediaWiki-oriented), so it is useful for folks, not just focus in details on what we did in the revision slider.

The shape of the post/article is not really settled yet, and we're open for suggestions. What I said above must not necessarily be the way this piece will be end up looking like!

We've started with a quick brainstorming session where we try to list things we've learned during this projects about making RTL-friendly software. At least quite a few of them seem to be things worth mentioning.
The following list might not be incomplete. I tried to sort it in order of "generalness":

  • The earlier you become aware of needs of right-to-left languages and start thinking of making your UI RTL-compliant, the better for you. E.g. you can add some abstraction layer which will save you from having if statements all around the code base.
  • MediaWiki already includes quite some features that simplify creating software which working for both left-to-right and right-to-left languages, to name a few:
    • CSSJanus automatically converting CSS stylesheets between LTR and RTL,
    • ResourceLoader allowing to specify RTL- and LTR-specific icons, images,
    • OOjs UI providing widgets and icons that are designed to work for both LTR and RTL languages out of the box, saving you a lot of work and reducing amount of code.
  • Browsers and libraries seem to be LTR-centered in some aspects, which leads to using hacks to have UI RTL-friendly. Examples we came across include:
    • there is no standard definition of how DOM elements scrollLeft property should behave when content direction is RTL. Different browsers handlie if differently - conditional hacks required
    • library we used for generating popups was checking if popup fits the screen properly in LTR mode but it ignored some RTL-specific cases allowing broken popups - simple solution for this: use OO UI!
  • generally is good to stop thinking of parts of UI as of "left arrow", "right pointer" etc. Many of those elements would/should naturally be aligned differently in RTL language version. Using more generic names as "backwards arrow" instead of "left arrow" makes your code more generic as you focus on what the thing does, not how it looks like, and might also help you to have a better overview of your UI, not focusing on what on left, what is on right.
  • Use of <bdi> tag allows to mix directions of text
  • Making the UI working in RTL language is not just about mirroring all elements, e.g. negative numbers should still have a sign on the left of digits in Hebrew
  • languages written from right to left differ same as LTR languages do (e.g. mirrored question mark symbol used in Arabic or Farsi but not Hebrew). Generally you should try to make your tool flexible and not to assume that things which are good in one language would also work fine in other languages. Basically the same what applies when it comes to other i18n/l10n aspects.

Some other i18n observations that have been mentioned (just for the record, as they are most likely out of the scope of the piece):

  • do not assume how text is formatted (different punctuation rules in different languages) or what is the word order (units don't necessarily go after the amount in all languages),
  • remember about GENDER,
  • language format dates in different ways - do not assume English way is universal.

This outline is awesome! I think it will really help understand the process you went through and the tools available.

You can also refer to my "Wait, ?tahW" lecture about RTL support on the web - it is more about the background of RTL support online and what users (don't) expect but it can give you a bit of context as to why things are so complicated... (Also there are some history/context pieces on there)

And it emphasizes that actually wanting to support RTL and working towards RTL support is not all that obvious online. Your passion into working on it is really appreciated!

WMDE-leszek triaged this task as Normal priority.Aug 25 2016, 1:15 PM
WMDE-leszek closed this task as Resolved.Dec 14 2016, 3:25 PM

As mentioned in subtasks, we have published a RevisionSlider-specific write up at, and there is already a "general" directionality docs page at
I believe we can close this task but we should not forget about expanding the docs.