Menu
I have this html:
<body style="direction: rtl">
<div style="display:inline-block">
<span>x:</span> <span>1</span>,
<span>y:</span> <span>2</span> |
<a>link1</a> |
</div>
<a>link2</a>
</body>
With direction: ltr it displays:
x: 1, y: 2 | link1 | link2
But when I change it to rtl is shows:
link2 | x: 1, y: 2 | link1
while I would expect:
link2 | link1 | 2 :y ,1 :x
Is there a way to set css properties to achieve the expected result wihtout modifying the DOM elements structure (the types of the elements can be changed though)?
575
The direction CSS property sets the direction of text, table columns, and horizontal overflow. Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages).
rtl: Specifies the direction as right to left. ltr(default): Specifies the direction as left to right which is also the default direction.
The specification defines the inline base direction as the direction in which content is ordered on a line. This defines the start and end of the inline direction. The start is where sentences start and the end is where a line of text ends before it would begin to wrap onto a new line.
Try this:
<body style="direction: rtl">
<div style="display:inline-block">
<span dir="rtl">x:</span> <span dir="rtl">1</span>,
<span dir="rtl">y:</span> <span dir="rtl">2</span> |
<a>link1</a> |
</div>
<a>link2</a>
</body>
This gave me what you wanted.
Useful links: http://www.i18nguy.com/markup/right-to-left.html and http://www.w3.org/TR/html401/struct/dirlang.html
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
