3 Different Ways to RTL your CSS

There are three major ways I prefer to use when RTLing a webpage. Each one has its own pros and cons. They are actually the same..flipping CSS properties and rules is the same procedure in all ways. What's different is where and how are we flipping them.

1- Same file.

The method used in the first RTL a webpage tutorial. We simply open the orignal CSS file and scan it for CSS rules to flip till we reach the end of file, save and it's RTLed.

PROs:

• No extra files or CSS rules.
• Which means no extra HTTP requests, bandwidth or much effort.

Cons:

Useless if we're running a multilingual website..because we need both directions (if we're using bidirectional websites).

 2- Independent Separate Files.

This method is the same as first one but instead of modifying the original stylesheet, we copy it (say styles-rtl.css) and modify that one.

PROs:

• We maintain the styles for both directions. So we serve the appropriate stylesheet according to the current language of the page.
• No extra files or CSS rules *
• Which means no extra HTTP requests or bandwidth **

*Assuming we didn't have to add bug fixes (*cough*IE*cough*)!

** Remember we're serving only one style sheet in the page

CONs:

Hard to maintain and too much redundant CSS rules. For example, a CSS rule like a{color:red;} will be duplicated in both files. And if you wanted to change it to green, you'll have to do it twice in both files.

 3- Dependent Separate Files.

This method is a mix of the first two. We have 2 seperate files, but the second one only contains flipped CSS rules. For example if we're styling links in styles.css as:

a{color:red; margin-left:10px;}

in the styles-rtl.css stylesheet we'll only include the flipped rule:

a{margin-right:10px;}

And then we link both:

<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="styles-rtl.css"/>

Make sure you include the overriding stylesheet after the original one to ensure the rules are overriden.

But notice that the link in RTL now has a margin-left of 10px AND a margin-right of 10px which is not what we want. We want the margin-left to be a margin-right. In that case we "reset" the margin-left like below:

a {margin-left:0; margin-right:10px;}

PROS:

• Easy to maintain and modify. RTLed rules are much less and don't get frequently changed as much as the other ones. Now changing the color of the red link to green is going to be in one stylesheet only since it's not repeated in the flipped one.
• Great to use in big multilingual websites.

CONs:

Extra files/size, 1 extra HTTP request. This can be avoided by merging the two files into one for your online deployment when you're all done. You can also compress it too for a smaller file size.

How do you RTL your CSS? Which method of the 3 do you prefer? Or is there a different one?