writing-mode

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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
Mediavisual
Valor calculadocomo se especifica
Animatableno
Canonical orderel orden único no-ambigüo definido por la gramática formal

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 | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Ejemplo

Resultado efectivo

Especificación

Especificación Estado Comentario
CSS Writing Modes Module Level 3
The definition of 'writing-mode' in that specification.
Candidate Recommendation Definición inicial

Compatibilidad entre navegadores

Función Chrome Firefox (Gecko) Internet Explorer Opera Safari
Compatibilidad básica 8-webkit 41 (41)[1][3] 9.0 -ms[2] 15-webkit 5.1-webkit
Valores de SVG 1.1 lr, lr-tb, rl, tb, tb-rl 48.0 (sin prefijos) 43 (43) 9.0 -ms[2] (Yes) ?
sideways-rl,sideways-lr No support (a partir de 48.0) 43 (43) No support (a partir de 25) No support (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 (Yes) 47-webkit 41.0 (41) [1][3] ? ? 5.1 -webkit
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 No support[4] No support No support ? ? ? ?

[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

Etiquetas y colaboradores del documento

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