Last updated January 29, 2011. Created by LeeHunter on February 17, 2008.
Edited by Tor Arne Thune, jhodgdon, SLIU, dvessel. Log in to edit this page.

Adding support for RTL (Right to Left) languages involves overriding the lateral styles through cascades and naming the file based on the style sheet it is paired to. The inclusion of the RTL style sheet is automated. The inclusion of the file depends on the language settings set for the site.

For example, in the core theme Garland, "style.css" is the main style sheet. It also includes "style-rtl.css" for right to left languages like Arabic or Hebrew. The inclusion of the two styles always loads with the main style first and the RTL style second. This allows cascading of all the rulesets within the two files without having to worry about specificity in the selectors used in the RTL style.

There is a coding standard to keep the rules organized. Rules that are dependent on the lateral positioning or dimensions should be commented with /* LTR */ indicating that the property is specific to a left to right layout. This includes floats, margins, padding, etc. Inline text should flow automatically as long as the theme sets the language direction of the document through the "page.tpl.php" template.

Example base style:

ul.primary-links {
  margin-top: 1em;
  padding: 0 1em 0 0; /* LTR */
  float: left; /* LTR */
  position: relative;
}

Corresponding RTL style:

ul.primary-links {
  padding: 0 0 0 1em;
  float: right;
}

While working with the main CSS file, this makes it easier to spot where changes may be needed in the RTL style.

Note that if your theme overrides a module style, the associated RTL style will be omitted unless it is present in your theme.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

thanks شكرا

I do not agree with the rule you mentionned (it would be good to have the source). Using that rule is "OK" if you have a main website using LTR and RTL is an option.

My approach - and this is what worked best for me until now - is to have 3 files:

  • style.css should not contain anything that is "right" or "left" like (margins, padding, float, positions)
  • style-rtl.css for rules that should only be used for RTL languages (Arabic for example)
  • style-ltr.css for rules that should only be used for LTR languages (English for example)

This method fixes these things amount other:

  • It doesn't assume that the website is LTR by default
  • It doesn't "load" unused code, i.e unused CSS declarations and comments
  • It doesn't force you to declare properties twice, I'm thinking about top and bottom margins or paddings: "margin: 0 10px 0 0;"
  • It make separation of direction related code easier, one file for RTL declarations, one for LTR declarations and one for standard rules that will be used no matter what the language is.

Another thing worth mentionning is that the majority of programmers and more importantly theme designers use unfriendly CSS rules in terms of localizations, take this example:

// Example from a coder that is not aware of RTL
#drop{
  margin-right: 20px;
}
// To make RTL you have to do this,
#drop{
  margin-right: X /* You have to find (with firebug) what the value is if you disable the rule declared earlier*/;
  margin-left: 20px;
}

Yet another thing worth mentionning for people who make themes is that they should:

  • Avoid using left/right in ids and classes, instead use start/end or first/last
  • Avoid using text-align:left/right and use text-align:start/end instead