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
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
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.
Véase también
- Atributo de SVG
writing-mode
direction
unicode-bidi
text-orientation
text-combine-upright