writing-mode

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨marzo de 2017⁩.

* Some parts of this feature may have varying levels of support.

Experimental:Esta es unatecnología experimental
Comprueba laTabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Resumen

La propiedadwriting-mode define si los renglones de texto se disponen horizontal o verticalmente y la dirección en que avanzan los bloques.

La propiedad especifica ladirecció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 propiedadwriting-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
Valor calculado	como se especifica
Animation type	Not animatable

Sintaxis

css

/* 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-rlExperimental: 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-lrExperimental: 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.
lrObsoleto: Desaprobado, excepto en los documentos SVG1. En CSS utilicehorizontal-tb.
lr-tbObsoleto: Desaprobado, excepto en los documentos SVG1. En CSS utilicehorizontal-tb.
rlObsoleto: Desaprobado, excepto en los documentos SVG1. En CSS utilicehorizontal-tb.
tbObsoleto: Desaprobado, excepto en los documentos SVG1. En CSS utilicevertical-rl.
tb-rlObsoleto: Desaprobado, excepto en los documentos SVG1. En CSS utilicevertical-rl.

Sintaxis formal

writing-mode =
horizontal-tb|
vertical-rl|
vertical-lr|
sideways-rl|
sideways-lr

Ejemplo

<table>  <tr>    <th>Value</th>    <th>Vertical script</th>    <th>Horizontal (LTR) script</th>    <th>Horizontal (RTL) script</th>    <th>Mixed script</th>  </tr>  <tr>    <td>horizontal-tb</td>    <td><span>我家没有电脑。</span></td>    <td><span>Example text</span></td>    <td><span>מלל ארוך לדוגמא</span></td>    <td><span>1994年に至っては</span></td>  </tr>  <tr>    <td>vertical-lr</td>    <td><span>我家没有电脑。</span></td>    <td><span>Example text</span></td>    <td><span>מלל ארוך לדוגמא</span></td>    <td><span>1994年に至っては</span></td>  </tr>  <tr>    <td>vertical-rl</td>    <td><span>我家没有电脑。</span></td>    <td><span>Example text</span></td>    <td><span>מלל ארוך לדוגמא</span></td>    <td><span>1994年に至っては</span></td>  </tr>  <tr>    <td>sideways-lr</td>    <td><span>我家没有电脑。</span></td>    <td><span>Example text</span></td>    <td><span>מלל ארוך לדוגמא</span></td>    <td><span>1994年に至っては</span></td>  </tr>  <tr>    <td>sideways-rl</td>    <td><span>我家没有电脑。</span></td>    <td><span>Example text</span></td>    <td><span>מלל ארוך לדוגמא</span></td>    <td><span>1994年に至っては</span></td>  </tr></table>

table {  border-collapse: collapse;}td,th {  border: 1px black solid;  padding: 3px;}th {  background-color: lightgray;}.example {  height: 75px;  width: 75px;}

.example.Text1 span,.example.Text1 {  writing-mode: horizontal-tb;}.example.Text2 span,.example.Text2 {  writing-mode: vertical-lr;}.example.Text3 span,.example.Text3 {  writing-mode: vertical-rl;}.example.Text4 span,.example.Text4 {  writing-mode: sideways-lr;}.example.Text5 span,.example.Text5 {  writing-mode: sideways-rl;}

Resultado efectivo

Especificaciones

Specification
CSS Writing Modes Level 4 # block-flow
Scalable Vector Graphics (SVG) 2 # WritingModeProperty

Compatibilidad con navegadores

Véase también

Help improve MDN

Learn how to contribute

This page was last modified on⁨1 ene 1970⁩ byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換

writing-mode

Help improve MDN