css problema de orden dirección elemento RTL

tengo este código HTML:css problema de orden dirección elemento RTL

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

Con la dirección: LTR muestra:

x: 1, y: 2 | link1 | link2

Pero cuando lo cambio a RTL es muestra:

link2 | x: 1, y: 2 | link1

mientras yo esperaría:

link2 | link1 | 2 :y ,1 :x

¿Hay alguna forma de establecer las propiedades CSS para lograr el resultado esperado sin modificar la estructura de los elementos DOM (aunque se pueden cambiar los tipos de los elementos)?

Fuente

2010-03-30 Jacek Kołodziejczyk

Prueba esto:

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

Esto me dio lo que quería.

Enlaces de interés: http://www.i18nguy.com/markup/right-to-left.html y http://www.w3.org/TR/html401/struct/dirlang.html

Fuente

2010-03-30 15:15:07 brainjam

Gracias, funcionó –

Gracias. Tenía mi estilo div = en línea. Una vez que lo cambié al bloque en línea, funcionó. Una vez más, gracias. – moeabdol

cambio del inline-block para 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>

Esto se muestra como desee en FF & Chrome, pero no en IE.

Fuente

2013-11-07 18:17:47 Khattab

Para mí funciona, pero tengo miedo de romper otras cosas ... ¿Ejecutaré alguna prueba para verificar? –

css problema de orden dirección elemento RTL

Respuesta

Cuestiones relacionadas