Modo de escritura en CSS
Tipos de modos de escritura
Horizontal-tb (Predeterminado)
El modo de escritura horizontal-tb es el predeterminado en CSS. En este modo, el texto fluye horizontalmente de izquierda a derecha, y la siguiente línea aparece debajo de la anterior. Esto es común para idiomas escritos horizontalmente, como el español.
Consejo: Ejemplo de código
.horizontal-tb {
writing-mode: horizontal-tb;
}Vertical-rl
El modo de escritura vertical-rl muestra el texto verticalmente, con las líneas fluyendo de derecha a izquierda. El texto se rota 90 grados en sentido horario, y la siguiente línea aparece a la izquierda de la anterior. Este modo es útil para menús de navegación verticales o para mostrar texto en idiomas que tradicionalmente se escriben verticalmente, como el japonés o el chino.
Consejo: Ejemplo de código
.vertical-rl {
writing-mode: vertical-rl;
}Vertical-lr
El modo de escritura vertical-lr es similar a vertical-rl, pero las líneas fluyen de izquierda a derecha. El texto se rota 90 grados en sentido antihorario, y la siguiente línea aparece a la derecha de la anterior. Este modo se puede usar para diseños de texto vertical.
Consejo: Ejemplo de código
.vertical-lr {
writing-mode: vertical-lr;
}Sideways-rl
El modo de escritura sideways-rl muestra el texto verticalmente con las líneas fluyendo de derecha a izquierda. A diferencia de vertical-rl, los caracteres no se rotan y permanecen en posición vertical. Este modo es útil para diseños verticales compactos o etiquetas verticales cortas.
Consejo: Ejemplo de código
.sideways-rl {
writing-mode: sideways-rl;
}Sideways-lr
El modo de escritura sideways-lr es similar a sideways-rl, pero las líneas fluyen de izquierda a derecha. Los caracteres permanecen en posición vertical, y la siguiente línea aparece a la derecha de la anterior. Este modo se puede aplicar en escenarios de diseño específicos que necesiten un diseño vertical compacto.
Consejo: Ejemplo de código
.sideways-lr {
writing-mode: sideways-lr;
}