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