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 This is an experimental API that should not be used in production code.
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 This is an experimental API that should not be used in production code.
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 This deprecated API should no longer be used, but will probably still work.
Desaprobado, excepto en los documentos SVG1. En CSS utilice horizontal-tb.
lr-tb This deprecated API should no longer be used, but will probably still work.
Desaprobado, excepto en los documentos SVG1. En CSS utilice horizontal-tb.
rl This deprecated API should no longer be used, but will probably still work.
Desaprobado, excepto en los documentos SVG1. En CSS utilice horizontal-tb.
tb This deprecated API should no longer be used, but will probably still work.
Desaprobado, excepto en los documentos SVG1. En CSS utilice vertical-rl.
tb-rl This deprecated API should no longer be used, but will probably still work.
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