La directionpropiedad en CSS establece la dirección del flujo de contenido dentro de un elemento a nivel de bloque. Esto se aplica a elementos de texto, en línea y de bloque en línea. También establece la alineación predeterminada del texto y la dirección en la que fluyen las celdas de la tabla dentro de una fila de la tabla.
.main-content ( direction: rtl; /* Right to Left */ )Los valores válidos son:
ltr- De izquierda a derecha, el predeterminadortl- De derecha a izquierdainherit- hereda su valor del elemento padre
El texto de esta página está configurado en la ltrdirección predeterminada . El caso de uso más común para establecer rtles para páginas web con texto en hebreo o árabe. Aquí hay un ejemplo de árabe configurado en rtl:
طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد
También hay un atributo HTML para establecer la dirección:
Tanto la propiedad CSS como el atributo HTML harán que la dirección en cascada hacia los elementos descendientes. Se recomienda utilizar el atributo HTML, ya que funcionará incluso si CSS falla o no afecta la página por cualquier motivo.
También hay una etiqueta HTML específica que se puede utilizar para cambiar la dirección del texto: el elemento de anulación bidireccional. Esto existe, por lo que hay un elemento sin semántica para usar solo para este propósito. Por ejemplo:
This text will go left to right. This text will go right to left.Para emparejar todo esto con CSS ...
*(dir="ltr") ( direction: ltr; unicode-bidi: embed; ) *(dir="rtl") ( direction: rtl; unicode-bidi: embed; ) bdo(dir="ltr") ( direction: ltr; unicode-bidi: bidi-override; ) bdo(dir="rtl") ( direction: rtl; unicode-bidi: bidi-override; )"Bidi" = "bidireccional"
Al crear diseños en un mundo pre-flexbox pre-grid, la gente a menudo elige entre flotadores y bloques en línea para crear columnas. Una ventaja del bloque en línea, además de eliminar la necesidad de borrar el flotador, es que al cambiar la propiedad de dirección también se invierte el diseño. Esto no es cierto para los flotantes, que deberían reiniciarse si una página web admite varios idiomas y la dirección del idioma cambia de ltr a rtl o viceversa.
Si necesita cambiar la dirección de un elemento en línea (en comparación con su elemento de nivel de bloque principal), deberá usar el elemento o asegurarse de que el elemento en línea establezca la propiedad unicode-bidi correctamente:
Some regular text reverse direction text text reverse directionspan(dir) ( unicode-bidi: bidi-override; )Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| 2.0+ | 1.3+ | Alguna | 9.2+ | 5.5+ | Alguna | 3.1+ |