Propiedad CSS writing-mode
Usa la propiedad CSS writing-mode para definir la dirección en que fluye el contenido. Conoce sus valores y prueba ejemplos prácticos.
La propiedad CSS writing-mode define si las líneas de texto se disponen de forma horizontal o vertical, y en qué dirección avanzan los bloques y las líneas.
Esta página explica qué hace la propiedad, los valores que acepta, cuándo conviene usarla y cómo interactúa con propiedades relacionadas como text-orientation y direction.
Qué controla writing-mode
writing-mode cambia la dirección de flujo del bloque — la dirección en la que se apilan las cajas de nivel de bloque (párrafos, encabezados, etc.) — y la dirección de base en línea en la que los caracteres fluyen dentro de una línea. En una página normal en inglés, los bloques se apilan de arriba hacia abajo y el texto dentro de una línea fluye de izquierda a derecha (horizontal-tb). Al cambiar a un valor vertical, todo ese modelo rota: las líneas corren de arriba hacia abajo y se apilan de derecha a izquierda o de izquierda a derecha.
Como reasigna el significado de "inicio", "fin", "bloque" e "inline", writing-mode trabaja en conjunto con las propiedades lógicas de CSS (margin-block, padding-inline, inset-block, entre otras), que siguen automáticamente el modo de escritura activo en lugar de estar ligadas a los lados físicos.
¿Cuándo se usa?
- Scripts del Este de Asia en vertical (chino tradicional, japonés, coreano) que se escriben de arriba hacia abajo con columnas que corren de derecha a izquierda — usa
vertical-rl. - Etiquetas de interfaz rotadas, como un encabezado de columna lateral en una tabla o una etiqueta de eje vertical en un gráfico.
- Diseños editoriales o de "revista" que giran intencionalmente un encabezado o un destacado de costado.
Para los modos verticales casi siempre se combina writing-mode con text-orientation para decidir si los caracteres latinos individuales permanecen en posición vertical o se rotan 90°.
Los navegadores modernos soportan completamente la propiedad writing-mode sin prefijos de proveedor.
| Valor inicial | horizontal-tb |
|---|---|
| Se aplica a | Todos los elementos excepto grupos de filas de tabla, grupos de columnas de tabla, filas de tabla, columnas de tabla, contenedor base de ruby y contenedor de anotación de ruby. |
| Heredado | Sí. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.writingMode = "vertical-lr"; |
Sintaxis
Valores de CSS writing-mode
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;El valor por defecto es horizontal-tb. La propiedad se hereda, por lo que aplicarla a un contenedor afecta a todos sus descendientes a menos que lo sobrescriban.
Ejemplo de la propiedad writing-mode con el valor horizontal-tb:
Ejemplo de código CSS writing-mode
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: horizontal-tb;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Resultado
Otro ejemplo donde el contenido fluye verticalmente de arriba hacia abajo y de derecha a izquierda.
Ejemplo de la propiedad writing-mode con el valor vertical-rl:
Ejemplo CSS writing-mode vertical-rl
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: vertical-rl;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>En el siguiente ejemplo, el contenido fluye verticalmente de arriba hacia abajo y de izquierda a derecha.
Ejemplo de la propiedad writing-mode con el valor vertical-lr:
Ejemplo CSS writing-mode vertical-lr
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: vertical-lr;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Combinación con text-orientation
Dentro de un modo de escritura vertical, text-orientation decide cómo se rota cada glifo. La combinación más habitual mantiene los caracteres CJK en posición vertical mientras la línea fluye verticalmente:
.vertical {
writing-mode: vertical-rl;
text-orientation: upright; /* keep characters upright instead of rotated 90° */
}Sin text-orientation: upright, las letras latinas y los números se rotan 90° en el sentido de las agujas del reloj de forma predeterminada en un modo vertical.
Valores
horizontal-tb es el único valor horizontal. Los demás valores son todos verticales y difieren en la dirección en que se apilan las líneas y en cómo se orientan los glifos.
| Valor | Descripción |
|---|---|
| horizontal-tb | Predeterminado. El contenido fluye horizontalmente de izquierda a derecha y las líneas se apilan de arriba hacia abajo. |
| vertical-rl | El contenido fluye verticalmente de arriba hacia abajo y las líneas se apilan de derecha a izquierda. |
| vertical-lr | El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de izquierda a derecha. |
| sideways-rl | Obsoleto en CSS Writing Modes Level 3. El contenido fluye verticalmente de arriba hacia abajo y todos los glifos se colocan de costado hacia la derecha. |
| sideways-lr | Obsoleto en CSS Writing Modes Level 3. El contenido fluye verticalmente de arriba hacia abajo y todos los glifos se colocan de costado hacia la izquierda. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
text-orientation— controla cómo se rotan los glifos individuales dentro de un modo de escritura vertical.direction— establece la dirección de base en línea (LTR frente a RTL) del texto.text-align— alinea el contenido en línea; sus palabras clavestart/endrespetan el modo de escritura.transform— una forma alternativa de rotar elementos visualmente sin cambiar el modelo de diseño.