Page MenuHomePhabricator

Explore RTL language support issues
Closed, ResolvedPublic


What if anything do we need to add to a stock Django project to make localizing the user interface for RTL languages "easy"? Cssjanus or a similar project can be used to generate alternate css stylesheets. What other things might be needed?


  • Use Cssjanus (or similar tool) to produce "flipped" layouts
  • Do not use inline css styles, instead use class or id based rules which can be directionally flipped when appropriate
  • Have native speakers of RTL languages help check for RTL display problems

See also

Event Timeline

bd808 triaged this task as High priority.Aug 21 2020, 8:33 PM

From the UI perspective, here is a bit about the RTL support T261029#6449439. There seems to be promising packages and frameworks in both React & Vue that makes it possible.

@Ladsgroup and @Addshore, do either of you have any hard learned wisdom on RTL support in features that you can share with us? I remember vaguely seeing a blog post or wiki page about things that were learned in developing Extension:RevisionSlider at some point.

@eranroz Do you have any advice on basic tooling that should be included in our new Django app to make supporting RTL in the interface and content easier?

I'm sorry, I haven't done anything multilingual with Django (and including modern frontend frameworks like React) but I would be definitely happy to test anything. I know only css janus and we have been using it in mediawiki (IIRC) and I'm quite happy with it.

Similar to Amir, I have no much experience with Django, but css janus works pretty good in many cases.
Just as a good practice, it is good to keep in mind to avoid using inline styles that are LTR/RTL specific (such as style="text-align:left;") but to prefer id/class to make it easier to define it in clean CSS than can be adapted to RTL friendly

bd808 claimed this task.

Current recommendations documented at We may have new questions in this area once we get into actually building and localizing the UI.