text-orientation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

La propiedad CSStext-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.

css
/* 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
Valor calculadocomo se especifica
Animation typeNot animatable

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

text-orientation = 
mixed |
upright |
sideways

Ejemplos

HTML

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

CSS

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

Resultado

Especificaciones

Specification
CSS Writing Modes Level 4
# text-orientation

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-orientation
mixed
sideways
upright

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Vea tambien