writing-mode

Experimental

Esta es una tecnolog铆a experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producci贸n.

Resumen

La propiedad writing-mode define si los renglones de texto se disponen horizontal o verticalmente y la direcci贸n en que avanzan los bloques.

La propiedad especifica la direcci贸n de flujo de bloques, que es la direcci贸n en que se apilan los contenedores a nivel de bloque y la direcci贸n en que el contenido a nivel de l铆nea fluye dentro de un contenedor de bloque. Por ende, la propiedad writing-mode tambi茅n determina la ordenaci贸n del contenido a nivel de bloque.

Valor inicialhorizontal-tb
Applies toall elements except table row groups, table column groups, table rows, and table columns
Heredableyes
Valor calculadocomo se especifica
Animation typediscrete

Sintaxis

/* Valores de la palabra clave */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* Valores globales */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;

Valores

horizontal-tb
El contenido fluye horizontalmente de izquierda a derecha y verticalmente de arriba hacia abajo. El pr贸ximo rengl贸n horizontal se posiciona debajo del rengl贸n anterior.
vertical-rl
El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de derecha a izquierda. El pr贸ximo rengl贸n vertical se posiciona a la izquierda del rengl贸n anterior.
vertical-lr
El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de izquierda a derecha. El pr贸ximo rengl贸n vertical se posiciona a la derecha del rengl贸n anterior.
sideways-rl
El contenido fluye verticalmente de arriba hacia abajo y todos los glifos, incluidos aquellos de los sistemas de escritura verticales, se colocan de lado hacia la derecha.
sideways-lr
El contenido fluye verticalmente de arriba hacia abajo y todos los glifos, incluidos aquellos de los sistemas de escritura verticales, se colocan de lado hacia la izquierda.
lr
Desaprobado, excepto en los documentos SVG1. En CSS utilice horizontal-tb.
lr-tb
Desaprobado, excepto en los documentos SVG1. En CSS utilice horizontal-tb.
rl
Desaprobado, excepto en los documentos SVG1. En CSS utilice horizontal-tb.
tb
Desaprobado, excepto en los documentos SVG1. En CSS utilice vertical-rl.
tb-rl
Desaprobado, excepto en los documentos SVG1. En CSS utilice vertical-rl.

Sintaxis formal

horizontal-tb | (en-US) vertical-rl | (en-US) vertical-lr | (en-US) sideways-rl | (en-US) sideways-lr

Ejemplo

Resultado efectivo

Especificaci贸n

Especificaci贸n Estado Comentario
CSS Writing Modes Module Level 3
La definici贸n de 'writing-mode' en esta especificaci贸n.
Proposed Recommendation Definici贸n inicial

Compatibilidad entre navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Funci贸n Chrome Firefox (Gecko) Internet Explorer Opera Safari
Compatibilidad b谩sica 8-webkit (en-US) 41 (41)[1][3] 9.0 -ms (en-US)[2] 15-webkit (en-US) 5.1-webkit (en-US)
Valores de SVG 1.1 lr, lr-tb, rl, tb, tb-rl 48.0 (sin prefijos) 43 (43) 9.0 -ms (en-US)[2] (Yes) ?
sideways-rl,sideways-lr Sin soporte (a partir de 48.0) 43 (43) Sin soporte (a partir de 25) Sin soporte (a partir de 35.0) ?
Funci贸n Android Webview de Android Chrome para Android Firefox m贸vil (Gecko) IE m贸vil Opera Mobile Safari Mobile
Compatibilidad b谩sica 3-webkit (en-US) (Yes) 47-webkit (en-US) 41.0 (41) [1][3] ? ? 5.1 -webkit (en-US)
Valores de SVG 1.1 lr, lr-tb, rl, tb, tb-rl ? 48.0 (sin prefijos) 48.0 (sin prefijos) 43.0 (43) ? ? ?
sideways-rl,sideways-lr Sin soporte[4] Sin soporte Sin soporte ? ? ? ?

[1] Desde Gecko 36 hubo una implementaci贸n experimental disponible, regida por la preferencia layout.css.vertical-text.enabled, cuyo valor era false hasta Firefox 38. A partir de Firefox 39 y Firefox 40, la preferencia se activ贸 (true) solo en las ediciones Nightly y DevTools. Observe que no todos los widgets de CSS (p. ej., tablas) la acatan, por el momento.

[2] La implementaci贸n de Internet Explorer diverge de la especificaci贸n. Consulte el art铆culo relacionado en el Centro de desarrollo de Internet Explorer.

[3] Solo a partir de Gecko 42 se admiten los sistemas de escritura bidireccionales y RTL.

V茅ase tambi茅n