Direction rtl not working, What is this supposed to do? |
Direction rtl not working, What is this supposed to do? |
Number1 |
Apr 16 2013, 02:26 PM
Post
#1
|
Advanced Member Group: Members Posts: 114 Joined: 17-October 12 Member No.: 17,963 |
From the W3C Schools site:
<!DOCTYPE html> <html> <head> <style> div.ex1 {direction:rtl;} </style> </head> <body> <div>Some text. Default writing direction.</div> <div class="ex1">Some text. Right-to-left direction.</div> </body> </html> Instead of reversing the text order, ".noitcerid ...", what I get as a result in all the browsers I've tried so far is ".Some text. Right-to-left direction", moved all the way to the right. I.e., the only apparent change is the move of the period after "direction" to in front of "Some" and the test is now right justified. What am I missing? Is this just a non-functional tag or what? |
pandy |
Apr 16 2013, 04:15 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
direction: rtl doesn't reverse the text. It assumes the text is written in a right-to-left language and aligns the text with straight right margin. For what you want you also need unicode-bidi. You have both properties here: http://www.w3.org/TR/CSS2/visuren.html#direction .
Try this. CODE #test { direction :rtl; unicode-bidi: bidi-override; float: left } #test:hover { direction: ltr } HTML <p id="test"> What am I saying?</p> |
Number1 |
Apr 16 2013, 04:28 PM
Post
#3
|
Advanced Member Group: Members Posts: 114 Joined: 17-October 12 Member No.: 17,963 |
Awesome! I was just imagining an sf story in which someone grows up alone on a space station, served by robots, and the terminals accidentally got set up that way. So the kid, when finally rescued, can't understand anyone because he only speaks in reverse.
direction: rtl doesn't reverse the text. It assumes the text is written in a right-to-left language and aligns the text with straight right margin. For what you want you also need unicode-bidi. You have both properties here: http://www.w3.org/TR/CSS2/visuren.html#direction . Try this. CODE #test { direction :rtl; unicode-bidi: bidi-override; float: left } #test:hover { direction: ltr } HTML <p id="test"> What am I saying?</p> |
Lo-Fi Version | Time is now: 27th April 2024 - 09:41 PM |