La propiedad  CSS  text-orientation define la orientación del texto en una línea de escritura. Ésta propiedad sólo tiene efecto en modo vertical, ésto es, cuando writing-mode no está establecido cómo horizontal-tb. Ésta propiedad CSS es util para controlar la forma en que se muestran los lenguajes que utilizan escritura vertical, y tambien para construir encabezados verticales para tablas.

/* Palabras clave valor */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Valores globales */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

Valor inicialmixed
Applies toall elements, except table row groups, rows, column groups, and columns
Heredableyes
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

La propiedad text-orientation puede tener cómo valor una de las palabras clave listadas a continuación.

Valores

mixed
Rota los caracteres de escritura horizontal 90° en sentido de las manecillas del reloj. Establece los caracteres de escritura vertical de forma natural. Este es el valor por defecto.
upright
Establece los caracteres de escritura horizontal de forma natural (pero se presentan de arriba hacia abajo), de igual manera establece de forma natural los glifos para escritura vertical. Note que ésta palabra clave causa que todos los caracteres sean considerados de forma izquierda-a-derecha: el valor utilizado para direction es forzado a ser ltr.
sideways
Causa que los caracteres sean presentados de la forma en que se presentarían de manera horizontal, pero con la línea de escritura rotada 90° en sentido de las manecillas del reloj.
sideways-right
Un alias para sideways que se mantiene para propositos de compatibilidad.
use-glyph-orientation
En elementos SVG, ésta palabra clave produce que sea utilizado el valor de las propiedades SVG desaprobadas glyph-orientation-vertical y glyph-orientation-horizontal.

Sintaxis formal

mixed | upright | sideways

Ejemplos

HTML

<p>Lorem ipsum dolet semper quisquam.</p>

CSS

p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Resultado

Especificación

Especificación Estado Comentario
CSS Writing Modes Module Level 3
La definición de 'text-orientation' en esta especificación.
Candidate Recommendation Definición inicial.

Compatibilidad con navegadores

 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 48
Soporte completo 48
Soporte completo Si
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge ? Firefox Soporte completo 41
Soporte completo 41
Sin soporte 38 — 51
Deshabilitado
Deshabilitado From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo Si
Prefijado
Soporte completo Si
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Safari Sin soporte NoWebView Android Soporte completo 48
Soporte completo 48
Soporte completo Si
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Chrome Android Soporte completo 48
Soporte completo 48
Soporte completo Si
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge Mobile ? Firefox Android Soporte completo 41
Soporte completo 41
Sin soporte 38 — 51
Deshabilitado
Deshabilitado From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Soporte completo 5.0
Soporte completo 5.0
Soporte completo Si
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
sidewaysChrome Sin soporte NoEdge ? Firefox Soporte completo 44
Notas
Soporte completo 44
Notas
Notas sideways-right has become an alias of sideways.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoEdge Mobile ? Firefox Android Soporte completo 44
Notas
Soporte completo 44
Notas
Notas sideways-right has become an alias of sideways.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

 

Vea tambien

Etiquetas y colaboradores del documento

Colaboradores en esta página: MikeOrtizTrivino
Última actualización por: MikeOrtizTrivino,