CSS programming for right-to-left languages

I am far from an expert in RTL languages. But I do have some experiential knowledge to share in this area from having to make CSS layouts work across browsers in RTL mode. So, if you have to support Hebrew or Arabic, here is what you do.

1. Create a separate RTL version of your stylesheet that has direction:rtl on the body tag. This will be inherited by all the elements. [update: according to the W3C, you should put dir=”rtl” on the html tag rather than direction:rtl in the css of the body tag.]

2. Flip your left/right values in the stylesheet.
If you declare something like margin-left, flip it to margin-right or vice versa.
If you use shortcut notation for margins and padding, flip the left and right values.
In your background positions, swap the left/right values. This gets a little tricky if you have used a pixel offset for a left-aligned element. I have found you can use percentages to get them off of the right-hand edge. So, background-position:4px center becomes background-position:97% center. You’ll have to play with this depending on the width of your UI element.
Seems fairly simple, doesn’t it? Now for the gotchas!

First, Firefox 2:
To deal with a Firefox 2 bug in columnar layouts where the center column is flexible width and the left and/or right columns are floated, put margin-right:auto;margin-left:auto on the center column.

And now, IE (both of em, not just IE 6):
To deal with an IE bug where the UI shifts if you maximize/restore the page, make sure you put position:relative on parent elements of children with position set to relative. More here.

To deal with IE RTL layout issues with floating elements, set direction:rtl on the text elements only (if this is possible). You will need to set direction:ltr on the parent elements to reset the direction:rtl inherited from the body tag. Then set direction:rtl on the text child elements. More here.

IE behaves better in RTL languages when widths are set on elements.

You can always try adding zoom:1 (triggers hasLayout in IE) or setting display of an element to inline-block (two techniques which solve a lot of IE display issues).

If you can’t do some of the techniques described above, you can try converting your complicated UI element to a table. IE usually flips tables nicely. But don’t go here first or you’ll wind up with a UI full of layout tables.

Hope this helps someone else trying to adapt their UI to right-to-left languages.

And here’s a good tutorial for more on this subject. Straight from the W3C’s mouth.


One response to “CSS programming for right-to-left languages

  1. Pingback: Arapça Site Kodlamak ve direction:rtl özelliği | M.Selman Ay

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s