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:



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?

Average: 4.5 (30 votes)

Comments

A good practice that I usually follow is to add a comment after each rule in the original CSS file for RTL sensetive rules, for example:

margin-left: 10px /* rtl-review */

This way I can go back and only copy the marked rules to the RTL file and override it there. Also with advanced text comparison tool i can see both files side by side to make sure all rules are covered by filtering for my remark /* rtl-review */

That's an excellent tip!! Can't believe I haven't thought of it before!
Thank you :)

Here's another tip:
Instead of using float:right and float:left inside many classes. Remove all of those and create two new classes
.right{float:right;}
.left{float:left;}

Now in the RTL version, just use ur CSS overriding mechanism to swap them so that .right floats left and vice versa!
.right{float:left;}
.left{float:right;}

You don't need to change your code else where

Is it possible to style via css the <p dir="RTL"> without class or id ?
Thanks

You can just add the css properity {direction: rtl} into the body class!

Very useful online tool to flip CSS code:
http://www.ta3rip.com/rtl-css-online

Hello,

This tool has been developed and moved to a separated new domain:
http://rtl-css.com

I used grid 960 gs.. it's my recommendation..

I know that this article is very old, but i need to ask since im still naive in this Css
where to put this code a {margin-left:0; margin-right:10px;}
did you mean in my web page??

Yes wherever you put your styles in. Inline or in a separate CSS file. Check this tutorial: http://rtl-this.com/tutorial/rtling-hello-world-webpage

Game reviews help players" see" themselves taking part in leading MMORPGs, like generating new data, megapolis hack copying games softwares you can attract plenty
of other commitments. The amount a tester will be creating
tons of useless information that has been limited.

Add new comment

Twitter Updates

Recent comments

Who's online

There are currently 0 users online.