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

Question

I know how to style when the direction is inline

<div dir="rtl">foo</div>

div[dir="rtl"]
{
 ....;
}

But how to style

<div style="direction:rtl">foo</div> ?

Both behaves as expected (right "alignment" of text) but I need finer tweaking for some elements inside (float, text-align...) and I can't set up my rule correctly in the second case.

I can't edit the html. I MUST use style="direction:rtl".

Answer 1

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/