CSS right to left direction & floating elements

direction:rtl

When developing a website for Arabic one of the most common questions is how to get it work with a reverse direction. Actually there is the CSS property direction:

.my-class {
    direction:rtl;
}

which makes the page right aligned.

Floating elements …

However sometimes there are elements on the page which are absolutely positioned and the direction property doesn’t do the job. The solution is something like combining the two settings. Both direction and float. So something like:

.my-class {
    float:left;
}

becomes something like:

.my-class {
    float:right;
    direction:rtl;
}

and of course if you’ve something like margin-left it should become margin-right!

CodeProject

Related posts:

1. Fast way to manage the Arabic version of a web form
2. jQuery CSS selectors. Change one or more CSS properties!
3. CSS sprites. Go beyond the limits with base64!

You are a GREAT developer? Click here to answer the weekly quiz!