RTL

RTL

July 10, 2012 · by Arnstein Teigene

There are a few languages where the writing starts from the right of the page, and continues to the left. We call them right to left scripts, or RTL for short. One of the more notable RTL languages is Arabic which we are now happy to support on our addons website.

If your browser is already set to Arabic language you can just head over to http://addons.opera.com to see the changes, otherwise you can check it out here.

Øyvind Håkestad, our user interface guru, says of the RTL support:

While in the process of making addons.opera.com work for Arabic, the easy way out would have been to let only the text flow from right to left. But we wanted to do it properly, by making the whole page rtl.

This involved converting all of our Cascading Style Sheets (CSS) from ltr (left to right) to rtl. Since we have a fair amount of CSS code (that keep changing all the time), we figured doing this manually would be too much work. It would also be error prone. We already had an automated process for making CSS from Less code, and we thought plugging in something that converted our CSS from ltr to rtl would be cool.

There are already code out there doing this type of conversion, but for various reasons, we chose to implement our own. It is written as a library for Node, and it can be installed through npm. We've made the code available on Github, and we hope it may be useful for other people as well :-)

You can find it here: https://github.com/operasoftware/flipcss

Readers' comments 4

Left under the original article, as archived.

QuHnoTuesday, July 10, 2012 9:47:03 AM

I can figuratively hear the involved swearing during the development.

I would like to read an article what the drawbacks during development were and what to look out for when doing that. That could be helpful for extension (and other) designers too - something like:
How to change a web page / an extension from RTL to LTR ...
JimThursday, July 12, 2012 6:55:46 AM
I think Hebrew is also RTL.
QuHnoSunday, July 22, 2012 8:46:36 AM
Hm...

http://www.w3c.org.ma/Tests/displayInline.html

Are there 2 browsers out there who do it the same way?

A good basic article, may be in the web standards curriculum, would be really welcome ...
ChristophTuesday, July 31, 2012 9:16:38 AM
I'm sorry for misusing this comment section for an offtopic issue, but I wasn't able to spot a place that would be more appropriate:
As I'm having multiple extensions installed while I'm developing new ones, it's really a pain in the a*** to figure out which of them just produced an error solely by its ID. Could someone who's working on the error console add the name of the widget to those errors, please?