Orientación del texto - Trucos CSS

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, al igual que 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 completas de texto.

.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 los grupos de filas de la 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 predeterminado. Los caracteres de un guión horizontal se giran 90 ° en el sentido de las agujas del reloj. Los caracteres de un guión vertical se muestran en su orientación vertical natural.
upright: Los caracteres de una escritura horizontal se establecen en su posición vertical horizontal natural, incluidos algunos glifos. Por lo tanto, cuando un modo de escritura vertical puede rotar una línea de texto para que los caracteres queden de lado, este valor rotará los propios caracteres 90 ° a su posición natural. Tenga en cuenta que este valor fuerza la directionpropiedad en un valor usado de ltr, lo que significa que todos los caracteres se tratan como si estuvieran en un 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 guardado 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-horizontalque ahora están en desuso. glyph-orientation-verticalahora es un alias de text-orientation.

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
48	41	No	79	10.1 *

Móvil / Tablet

Android Chrome	Android Firefox	Androide	Safari de iOS
88	85	81	10.0-10.2

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 usando la propiedad CSS "modo de escritura" de Adi Purdila: explore diferentes enfoques además de usar 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: un enfoque del texto vertical que usa en transformlugar de writing-modeo text-orientation.