CSS: Modos de escritura

En esta lección se comentan las propiedades CSS definidas en la recomendación CSS Writing Modes Level 3, publicada en diciembre de 2019.

Estas propiedades permiten elegir el modo de escritura, es decir, tanto la dirección del texto (de derecha a izquierda o de izquierda a derecha) cuando las líneas de texto se escriben horizontalmente, como la dirección de las líneas (de derecha a izquierda o de izquierda a derecha) cuando el texto se escribe verticalmente (de arriba hacia abajo).

Dirección: direction

La propiedad direction permite establecer la dirección de escritura. Los posibles valores de direction son ltr (de izquierda a derecha) y rtl (de derecha a izquierda).

p {
  direction: ltr;
}
Enlace externo
p {
  direction: rtl;
}
Enlace externo

Para que la propiedad direction se imponga al algoritmo de dirección de escritura del navegador, es necesario utilizar también la propiedad unicode-bidi.

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}
Enlace externo

Cuando se aplica a una tabla, la propiedad direction establece el orden de las columnas de la tabla.

table {
  border: black 1px solid;
  direction: ltr;
}
td {
  border: black 1px solid;
}
Enlace externo
table {
  border: black 1px solid;
  direction: rtl;
}
td {
  border: black 1px solid;
}
Enlace externo

Dirección: unicode-bidi

La propiedad unicode-bidi permite establecer el algoritmo de establecimiento de direccionalidad. Los posibles valores de unicode-bidi son normal (no modifica el algoritmo utilizado por el navegador), embed (para elementos en-línea, la dirección se puede redefinir en ellos), isolate, bidi-override (para elementos en-línea y bloques, la dirección se puede redefinir en cualquier elemento y sub-elemento del bloque), isolate-override y plaintext.

Los ejemplos siguientes muestran el efecto del valor bidi-override y embed. La dirección de escritura de un bloque se puede modificar si se aplica bidi-override al bloque, mientras que la dirección de un elemento en-línea se puede modificar aplicando bidi-override o embed al elemento en-línea.

p {
  unicode-bidi: bidi-override;
  direction: rtl;
}

strong {
  direction: ltr;
}
Enlace externo
p {
  unicode-bidi: bidi-override;
  direction: rtl;
}

strong {
  unicode-bidi: bidi-override;
  direction: ltr;
}
Enlace externo
p {
  unicode-bidi: bidi-override;
  direction: rtl;
}

strong {
  unicode-bidi: embed;
  direction: ltr;
}
Enlace externo