La writing-modepropiedad cambia la alineación del texto para que se pueda leer de arriba a abajo o de izquierda a derecha, según el idioma. Por ejemplo, digamos que queremos agregar un texto que se lee de arriba a abajo y de derecha a izquierda, así:
.vertical-rl ( writing-mode: vertical-rl; )Vea el modo de escritura de Pen: vertical-rl de CSS-Tricks (@ css-tricks) en CodePen.
Esto es más útil en idiomas como el chino, el japonés o el coreano, donde el texto a menudo se establece verticalmente. En el idioma inglés, es más probable que desee utilizar esta propiedad por motivos estéticos, como alinear un encabezado en un bloque de texto como este:
Vea el Pen YWBWGA de CSS-Tricks (@ css-tricks) en CodePen.
Valores
En los ejemplos a continuación, hice que la primera letra del texto fuera roja, solo para que sea más fácil ver en qué dirección necesitas comenzar a leer.
horizontal-tb
Este es el valor predeterminado de la propiedad: el texto se lee de izquierda a derecha y de arriba a abajo.
Vea el modo de escritura del lápiz: horizontal-tb de CSS-Tricks (@ css-tricks) en CodePen.
vertical-rl
El texto se lee de derecha a izquierda y de arriba a abajo:
Vea el modo de escritura de Pen: vertical-rl de CSS-Tricks (@ css-tricks) en CodePen.
vertical-lr
El texto se lee de izquierda a derecha y de arriba a abajo:
Vea el modo de escritura de Pen: vertical-rl de CSS-Tricks (@ css-tricks) en CodePen.
Enlaces relacionados
- Texto vertical con modos de escritura CSS3
- Ahmad Shadeed en modo escritura
Soporte de navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5,1 * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 3 * | 5,0-5,1 * |