Can CSS stylesheets be bidirectional?

Question

Can CSS be bidirectional or is a stylesheet inherently tied to the direction of script (RTL vs. LTR)?

I.e. can one and a single stylesheet work for both left-to-right (English) and right-to-left (Hebrew) languages?

If so, what are guidelines to take into account?

If no, how can a ltr stylesheet be transformed to rtl?

Answer 1

Hi!

I've previously used CSSJanus to transform ltr stylesheets to rtl. It comes as a command line tool, which means I can run it each time I build my application and only have to maintain one version of the file. The transformation switches all float: left to float: right (and some other hard-to-guess properties like background-position). Don't forget to set direction: ltr; in your default stylesheet!

Hope you get it to work!

Answer 2

You might consider taking the approach used by iGoogle, which has a set of special variables __BIDI_START_EDGE__, __BIDI_END_EDGE__, __BIDI_DIR__, and __BIDI_REVERSE_DIR__. You write your CSS rules as usual, except instead of writing something like margin-left you write margin-__BIDI_START_EDGE__. Then write a bit of server-side code that takes your style sheet and the direction (ltr or rtl), and fills in the variables with the values "left", "right", "ltr", and "rtl" as appropriate.

This doesn't let you serve a single file, but it's pretty robust, and it has the advantage that anything you don't want to be flipped can just be written with a literal "left" or "right".

(See this email from the OpenAjaxIDE mailing list, which says "IBM's localization experts have given a thumbs up to the BIDI features in OpenSocial" and suggests adopting them for an OpenAjax project.)

Answer 3

I wouldn't recommend using a single stylesheet to support both RTL and LTR styles. You'll be downloading a large CSS file to only use half of it in the page.

Although if you want to do this you can add a class to the html tag for example('rtl' and 'ltr') and use in the stylesheet like below:

.ltr .class {padding-left:10px;}
.rtl .class {padding-right:10px;}

You can check this tutorial to know how to 'RTL' an LTR page.