writing-mode - CSS

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 inicial	`horizontal-tb`
Applies to	all elements except table row groups, table column groups, table rows, and table columns
Heredable	yes
Media	visual
Valor calculado	como se especifica
Animation type	discrete
Canonical order	el 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

<table>
    <tr>
        <th>value</th>
        <th>Sistema de escritura vertical</th>
        <th>Sistema de escritura horizontal</th>
        <th>Escritura mixta</th>
    </tr>
    <tr>
        <td>horizontal-tb</td>
        <td class="exampleText1">我家没有电脑。</td>
        <td class="exampleText1">Texto de ejemplo</td>
        <td class="exampleText1">1994年に至っては</td>
    </tr>
    <tr>
        <td>vertical-lr</td>
        <td class="exampleText2">我家没有电脑。</td>
        <td class="exampleText2">Texto de ejemplo</td>
        <td class="exampleText2">1994年に至っては</td>
    </tr>
    <tr>
        <td>vertical-rl</td>
        <td class="exampleText3">我家没有电脑。</td>
        <td class="exampleText3">Texto de ejemplo</td>
        <td class="exampleText3">1994年に至っては</td>
    </tr>
    <tr>
        <td>sideways-lr</td>
        <td class="exampleText4">我家没有电脑。</td>
        <td class="exampleText4">Texto de ejemplo</td>
        <td class="exampleText4">1994年に至っては</td>
    </tr>
    <tr>
        <td>sideways-rl</td>
        <td class="exampleText5">我家没有电脑。</td>
        <td class="exampleText5">Texto de ejemplo</td>
        <td class="exampleText5">1994年に至っては</td>
    </tr>

table { border-collapse:collapse; }
td, th {border: 1px black solid; padding: 3px; }
th {background-color: lightgray; }
.exampleText1 { width:75px; writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; }
.exampleText2 { height:75px; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; }
.exampleText3 { height:75px; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; }
.exampleText4 { height:75px; writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; }
.exampleText5 { height:75px; writing-mode: sideways-rl; -webkit-writing-mode: sideways-rl; -ms-writing-mode: sideways-rl; }

Resultado efectivo

Especificación

Especificación	Estado	Comentario
CSS Writing Modes Module Level 3 La definición de 'writing-mode' en esta especificación.	Candidate 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!

Escritorio
Móvil

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`	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	(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`	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.