css: dir="rtl" VS style="direction:rtl"

Use dir="auto" on forms and inserted text in order to automatically detect the direction of content supplied at run-time

<div dir="auto">Hello, world!</div>
<br/>
<div dir="auto">لا إله إلا الله محمد رسول الله</div>
<br/>
<input type="text" dir="auto" value="Hello, world!" > 
<br/><br/>
<input type="text" dir="auto" value="لا إله إلا الله محمد رسول الله" >

JSFIDDLE Demo https://jsfiddle.net/80k0drsf/


As you can't modify the HTML, a really really hacky selector would be:

div[style*="direction:rtl"] {
    ...
}

JSFiddle demo.

Note that I'm using style*= as opposed to just style= as this will also match elements which have more than just direction:rtl declared within the element's style property.

For extra strength in the selector, you could also use [style*="direction: rtl"] to handle style attributes which separate the values from the properties with a space:

[style*="direction:rtl"], [style*="direction: rtl"] { ... }

Alternatively in this case you could just match on a style attribute which contains "rtl", as I'm pretty sure this combination of characters isn't used in any other property (ignoring external resources like background image file names):

[style*="rtl"] { ... }

Updated JSFiddle demo.

Tags:

Css

Direction