15

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".

frenchone
  • 1,547
  • 4
  • 19
  • 34

3 Answers3

28

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/

Muhammad Tahir
  • 2,351
  • 29
  • 25
  • 4
    I didn't downvote but I suppose because I stated that I don't have access to html. – frenchone Apr 10 '17 at 08:07
  • 1
    sometimes you want different direction, regardless of the content's language, so you don't want the browser to decide. – vsync Oct 29 '20 at 17:23
9

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.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • Or if that div is for example the fifth div, you could use `div:nth-child(5) { ... }`. – GreyRoofPigeon Mar 19 '14 at 16:00
  • 1+ You could also use `div[style~="direction:rtl"]` which will work in instances like this: http://jsfiddle.net/5tS8u/ .. "represents an attr whose value is a whitespace-separated list" .. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors – Josh Crozier Mar 19 '14 at 16:01
  • 1
    @JoshCrozier `*=` is a better selector as the selector may not be separated with white space (for instance, it may end in a `;` (this breaks your JSFiddle demo: http://jsfiddle.net/5tS8u/1/)). – James Donnelly Mar 19 '14 at 16:03
  • 2
    +1 However what if it looks like `direction: rtl`? :) – Hashem Qolami Mar 19 '14 at 16:05
  • @JamesDonnelly Yep, you're right - I added that comment when your answer was still [style=".."] – Josh Crozier Mar 19 '14 at 16:05
  • @JamesDonnelly Alternatively you could do `div[style*="direction"][style*="rtl"]` with multiple attr selectors. Here is a **[demo](http://jsbin.com/wunusuga/1/edit)** – Hashem Qolami Mar 19 '14 at 16:38
  • @HashemQolami sure, but you could still have a direction of `ltr` and a background image which has `rtl` in the path, for instance. – James Donnelly Mar 19 '14 at 17:14
  • @JamesDonnelly: just as your solution breaks if there's a comment that contains /*direction :rtl*/. Just kidding. Your solution was a life-saver and your jsfiddle was really appreciated. Thank you. PS: for your information in my special case direction was spelled DIRECTION (sharepoint sucks) – frenchone Mar 20 '14 at 10:57
-4

just add class "rtl" to html tag

<html dir="rtl" class="rtl">
 <head>
   <style>
      html[class*="rtl"] body {
         background-color:blue;
      }
      html[class*="rtl"] div{
         background-color:green;
      }
   </style>
 </haed>

 <body>

 <div>
 </div>

 </body>
</html>
טאבו ישראל שרות לקוחות
  • 78
  • 3