CODEWITHSUNDEEP
htmlcss
Jacek Kołodziejczyk
Jacek Kołodziejczyk

Reputation: 634

css direction rtl element order problem

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)?

Upvotes: 7

Views: 13468

Answers (2)

Khattab
Khattab

Reputation: 21

change the inline-block to inline-flex

<body style="direction: rtl">
    <div style="display:inline-flex">
        <span>x:</span> <span>1</span>, 
        <span>y:</span> <span>2</span> |  
        <a>link1</a> | 
    </div>
    <a>link2</a>
</body>

This will displays as you want in FF & Chrome, but not in IE.

Upvotes: 2

brainjam
brainjam

Reputation: 19005

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

Upvotes: 7

Related Questions