La text-orientationpropiedad en CSS alinea el texto en una línea cuando se trabaja con una vertical writing-mode. Básicamente, gira la línea 90° en el sentido de las agujas del reloj para ayudar a controlar cómo se muestran los idiomas verticales, de forma muy parecida a la forma en que text-combine-uprightgira grupos de caracteres dentro de una línea de texto en un guión vertical, pero para líneas de texto completas.

.element {  text-orientation: mixed;  writing-mode: vertical-rl; } 

Para manejar texto bidireccional (un bloque que contiene texto de izquierda a derecha y de derecha a izquierda, por ejemplo), consulte la unicode-bidipropiedad. Se combina con la directionpropiedad para anular cómo el navegador decide mostrar el texto.

Sintaxis

text-orientation: mixed | upright | sideways

• Inicial: mixed
• Se aplica a: todos los elementos excepto grupos de filas de tabla, filas, grupos de columnas y columnas.
• Heredado: si
• Porcentajes: n/a
• Valor calculado: valor especificado
• Tipo de animación: no animable

Valores

/* Keyword values */text-orientation: mixed; /* default */text-orientation: upright;text-orientation: sideways;text-orientation: sideways-right;/* Global values */text-orientation: inherit;text-orientation: initial; /* mixed */text-orientation: unset;

• mixed: Valor por defecto. Los caracteres en una escritura horizontal se giran 90° en el sentido de las agujas del reloj. Los caracteres en una escritura vertical se muestran en su orientación vertical natural.
• upright: los caracteres en una escritura horizontal se establecen en su posición vertical horizontal natural, incluidos algunos glifos. Entonces, cuando un modo de escritura vertical puede rotar una línea de texto para que los caracteres queden de lado, este valor rotará los caracteres 90° a su posición natural. Tenga en cuenta que este valor fuerza a la directionpropiedad a adoptar un valor usado de ltr, lo que significa que todos los caracteres se tratan como si estuvieran en modo de escritura de izquierda a derecha.
• sideways: Todo el texto en modo de escritura vertical se muestra de lado, como si estuviera en un diseño horizontal, pero toda la línea se gira 90° en el sentido de las agujas del reloj.
• sideways-right: Algunos navegadores respetan este valor como un alias del sidewaysvalor mantenido por compatibilidad con versiones anteriores.

use-glyph-orientationse eliminó como valor de palabra clave en diciembre de 2015. Se usó en elementos SVG para definir propiedades SVG glyph-orientation-verticaly glyph-orientation-horizontalahora están en desuso. glyph-orientation-verticalahora es un alias para text-orientation.

Soporte del 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 y superiores.

Escritorio

cromo	Firefox	ES DECIR	Borde	Safari
48	41	No	79	10.1*

Móvil/Tableta

androidcromo	Android Firefox	androide	Safari en iOS
124	125	124	10.0-10.2

Manifestación

Especificación

• Modos de escritura CSS Nivel 3 (borrador del editor)

Más información

• ¿Por qué la orientación vertical del texto es una pesadilla para la compatibilidad entre navegadores? por Nikhil: una explicación detallada de text-orientationy writing-mode.
• Cree fácilmente texto lateral utilizando la propiedad CSS “modo de escritura” de Adi Purdila: explore diferentes enfoques además de utilizar text-orientation.
• 2 formas de crear texto vertical en CSS por WS Toh: una comparación más directa entre los enfoques que utilizan writing-modey text-orientation.
• Rotación de texto de Chris Coyier: una aproximación al texto vertical usando transformen lugar de writing-modeo text-orientation.

Propiedades relacionadas

dirección

.element { direction: rtl; } Sara Cope

combinación de texto en posición vertical

span { text-combine-upright: all; } Geoff Graham

Unicode-bidi

.element { unicode-bidi: embed; } Chris Coyier

modo de escritura

.element { writing-mode: vertical-rl; } Robin Rendle