How to switch left and right in a css file?

Question

I have an HTML django template page that is both RTL and LTR (depends on user's locale).

The CSS of this page is stored in another file, and that file is currently static.

What is the best way to switch the attribute left and right according to the locale? Is there a built in attribute in CSS for this problem? (I don't want to use JS, it feels too messy)

I have:

.elem{
    left: 10px; 
    bottom: 10px;
    position: absolute;
}

I want something like this:

.elem{
    right-or-left-according-to-html-dir: 10px; 
    bottom: 10px;
    position: absolute;
}

Currently the only option I can think of is turning the file into a template also:

.elem{
    {{dir}}: 10px; 
    bottom: 10px;
    position: absolute;
}

Is there a better way that will let me keep my CSS file static?

Answer 1

You say you're making the document rtl or ltr depending on locale. In that case you can use the :lang() selector to make certain parts of your document have styling depending on the locale.

• http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:lang
• http://www.w3.org/TR/css3-selectors/#lang-pseudo

If you want a little more support (IE7+) you could use the attribute selector selector[lang='en'] though that will only test the attribute on the specified selector.

• http://www.w3.org/TR/css3-selectors/#attribute-selectors

If you specify the language in the html element (which you should, with lang="en" for example) you can just put the html selector in front of the class you want to apply in certain locales:

.elem {
    margin: 0 10px 0 0;
    color: blue;
}

html[lang='en'] .elem {
    margin: 0 0 0 10px;
}

Even better, if you specified the dir attribute you can directly use that in css like so:

.elem[dir='rtl'] {
    margin: 0 10px 0 0;
}

Please note that with a class on the body element you will always depend on that class always being there. But the dir and lang attribute can be specified on a more specific scope, like a single div, and still be used in the css along with styles for the 'other' reading directions.

Edit

Lastly, to gaze into the future, the CSS Selectors 'Level 4' will include a psuedo tag which will be able to filter on text directionality. Of course the specs are in development and adoption by browsers may take years before it is possible to reliably use it:

http://dev.w3.org/csswg/selectors4/#dir-pseudo