Propiedad CSS text-orientation
Usa la propiedad CSS text-orientation para definir la orientación de los caracteres dentro de una línea. Consulta los valores y prueba ejemplos.
La propiedad CSS text-orientation controla cómo se orienta cada carácter dentro de una línea cuando el texto fluye verticalmente. Es la herramienta que se usa al maquetar escrituras de Asia Oriental (chino, japonés, coreano) en su flujo vertical tradicional, o cuando se desea una etiqueta o encabezado vertical en un diseño con escritura latina.
Por sí sola, text-orientation no hace nada: solo tiene efecto cuando la dirección de la línea es vertical. Esa dirección se establece con la propiedad writing-mode (por ejemplo, vertical-rl o vertical-lr). Piensa en ambas como una división del trabajo: writing-mode decide en qué dirección fluye la línea, y text-orientation decide cómo gira cada glifo a lo largo de esa línea.
Este capítulo cubre lo que hace cada valor, cuándo elegir uno u otro, los problemas de compatibilidad con navegadores y ejemplos ejecutables que puedes editar.
Por qué usarla
- Tipografía CJK vertical. Por defecto (
mixed), los caracteres latinos mezclados en texto chino o japonés vertical se rotan 90°, lo que resulta incómodo de leer.uprightlos mantiene en posición vertical correcta. - Encabezados verticales decorativos y etiquetas laterales. Los títulos al estilo de lomo de libro, etiquetas de barra lateral y rótulos de ejes de gráficos en escrituras latinas suelen leerse mejor en posición vertical o de lado.
- Renderizado fiel de contenido con múltiples escrituras, donde números, acrónimos o palabras extranjeras aparecen dentro de texto vertical.
Valores de un vistazo
text-orientation acepta cinco valores relacionados con la escritura: mixed, upright, sideways, sideways-right y use-glyph-orientation, además de las palabras clave globales initial e inherit. Todos los valores relacionados con la escritura solo se aplican en modos tipográficos verticales.
Algunas notas históricas importantes: el antiguo valor sideways-left fue eliminado de la especificación, sideways-right se mantiene ahora solo como alias de sideways, y los casos de uso no verticales se trasladaron a los valores sideways-lr / sideways-rl de la propiedad writing-mode.
La propiedad text-orientation solo tiene efecto cuando writing-mode es vertical (vertical-rl o vertical-lr). En un diseño horizontal normal se ignora.
| Valor inicial | mixed |
|---|---|
| Se aplica a | Todos los elementos, excepto grupos de filas de tabla, filas, grupos de columnas y columnas. |
| Heredada | Sí. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.textOrientation = "upright"; |
Sintaxis
Valores de CSS text-orientation
text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;Ejemplo de la propiedad text-orientation con el valor "mixed":
Ejemplo de código CSS text-orientation
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-rl;
text-orientation: mixed;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>Con mixed, las letras latinas se mantienen verticales mientras la línea fluye de arriba a abajo y de derecha a izquierda. Este es el comportamiento predeterminado del navegador para los modos de escritura vertical y el que conviene usar para texto CJK auténtico.
Resultado
Ejemplo de la propiedad text-orientation con el valor "upright":
Ejemplo CSS text-orientation con valor upright
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-lr;
text-orientation: upright;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>El valor upright obliga a que cada glifo se mantenga en posición vertical, independientemente de su escritura. Es la opción habitual para un encabezado vertical decorativo en un diseño con escritura latina, y para mantener legibles las palabras latinas insertadas dentro de texto CJK vertical. Ten en cuenta que upright también fuerza la dirección bidireccional direction del texto a ltr.
Ejemplo: encabezado vertical junto al cuerpo de texto
Otro ejemplo de código CSS text-orientation
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ffffff;
color: #000000;
font-size: 1.1em;
}
.example {
background: #cccccc;
color: #fff;
padding: 3em;
margin: 40px auto 0;
width: 400px;
max-width: 400px;
display: flex;
}
h1 {
color: #8ebf42;
margin: 0.15em 0.75em 0 0;
font-family: 'Bungee Shade', cursive;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
text-orientation: upright;
-webkit-font-feature-settings: "vkrn", "vpal";
font-feature-settings: "vkrn", "vpal";
}
p {
margin: 0;
line-height: 1.5;
font-size: 1.15em;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<div class="example">
<h1>Lorem Ipsum</h1>
<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.
</p>
</div>
</body>
</html>Compatibilidad con navegadores y alternativas
text-orientation es compatible con todos los navegadores modernos (Chrome, Edge, Firefox, Safari). Dos notas prácticas:
- Solo tiene sentido junto a un
writing-modevertical, por lo que siempre hay que definir ambos juntos. - Las versiones antiguas de WebKit necesitan el prefijo
-webkit-enwriting-mode(como se puede ver en el ejemplo anterior). La propiedadtext-orientationen sí no necesita prefijo en los navegadores actuales. - Evita
use-glyph-orientation: está obsoleto y ya no es compatible con los navegadores modernos.
Valores
| Valor | Descripción |
|---|---|
| mixed | Los scripts horizontales se muestran en posición vertical, mientras que los scripts verticales se rotan 90° en el sentido de las agujas del reloj. Este es el valor predeterminado de esta propiedad. |
| upright | Todos los caracteres se muestran en posición vertical, independientemente de su escritura. No afecta a la propiedad direction. |
| sideways | Los caracteres se distribuyen como si fueran horizontales, pero con toda la línea rotada 90° en el sentido de las agujas del reloj. |
| sideways-right | Un alias de sideways que se mantiene por razones de compatibilidad. |
| use-glyph-orientation | Obsoleto. Anteriormente mapeaba las propiedades SVG glyph-orientation-vertical y glyph-orientation-horizontal, ahora en desuso. Ya no es compatible con los navegadores modernos. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
writing-mode— establece la dirección de la línea (horizontal o vertical) y es necesaria para quetext-orientationtenga efecto.text-combine-upright— comprime una secuencia corta de caracteres (como un año de dos dígitos) en el espacio de un carácter vertical en texto vertical.direction— controla la dirección base bidireccional del texto.text-align— alinea el contenido en línea a lo largo de la línea, que en los modos verticales se convierte en alineación superior/inferior.