Flip it, flip it good: Quick tips for supporting RTL languages in your web application
I've been working with themes in Gallery for 6 years and it wasn't until recently that I started to give due consideration to a significant portion of Gallery's users, those whose native language is written from right to left. Shame on me, because it's really not that difficult to add proper RTL text and layout support to web applications. I hope the following helps out those who need to do the same.
Here are the primary things you'll need to consider when styling your web application for RTL languages.
Text direction and alignment
At the core of everything RTL is the CSS direction property. This property defaults to ltr and in Gallery direction is switched to rtl by applying a CSS class to our core template's body element.
<body class="rtl">The class is defined simply as:
.rtl { direction: rtl; }Every CSS adjustment made for RTL will be defined through a descendent selector starting with this class. In addition to setting text direction we also set text alignment. Gallery use a couple of generic classes for this.
.g-text-left { text-align: left; }
.g-text-right { text-align: right; }These classes can easily be redefined when they become the descendant of our RTL class.
.rtl .g-text-left { text-align: right; }
.rtl .g-text-right { text-align: left; }The 'g-' prefix on the class names act sort of like namespaces and keep Gallery's CSS from stepping on and/or getting stepped on by CSS when it's integrated with other web applications.
Layout and block element alignment
Left floated elements should be floated to the right and vica versa. Gallery uses something like the following to float block elements.
.g-left { float: left; }
.g-right { float: right; }And here are the RTL equivalents. By now you get the picture.
.rtl .g-left { float: right; }
.rtl .g-right { float: left; }You'll also need to flip padding and margin values from left to the right. The following LTR blocks align nicely and use a bit of right margin to add white space between them.
You won't be able to simply float these to the right and maintain alignment.
Swap those margin values from the right to the left!
Much better.
Icon orientation
Directional arrows in buttons, dropdown indicators, etc. also need to be flipped. Make sure have a second version or the flipped version's included in your image sprite files.
Flipping the arrows on tabs and and the pager button was simply a matter of updating float values. The breadcrumb separator and the play slideshow button icons each required the creation of a mirrored copy.
Helpul tips
The following helped me out tremendously while testing RTL styles.
- Install RTL fonts to use while testing. All I needed to do was pop in my Snow Leopard disk and install Arabic and Hebrew with the extras installer. It was pretty quick and easy.
- Enlist the help of users who speak Arabic, Hebrew, etc. to review your work. I was fortunate to have the help of a few Gallery community members who cared enough to provide feedback and submit tickets with annotated screenshots which illustrated problems and defined solutions. Some RTL issues would never have been fixed without their help.
The Final (almost) Product
We're getting closer to the first Gallery 3 release candidate. Download it and give it a try. In the meantime, check out the English display for G3's default theme, Wind, and the Arabic display.
