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?

Good question. This is indeed a problem. Mozilla's solution was to invent new properties like -moz-padding-start et al, but of course that won't work anywhere else. — Mr Lister
– Mr Lister, Commented Apr 29, 2012 at 17:52

sg3s · Accepted Answer · 2012-05-06 17:43:34Z

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.

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

Joscha · Accepted Answer · 2012-04-29 15:30:49Z

5

How about adding the direction to your body element via a special class, then you can write according selectors:

<body class="rtl">

and in the CSS:

.rtl .myclass {
   text-align: right;
}

answered Apr 29, 2012 at 15:30

Joscha

4,6931 gold badge30 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to switch left and right in a css file?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related