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 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-rl`
Experimental

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`
Experimental

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` 
Obsoleto

Desaprobado, excepto en los documentos SVG1. En CSS utilice `horizontal-tb`.

`lr-tb` 
Obsoleto

Desaprobado, excepto en los documentos SVG1. En CSS utilice `horizontal-tb`.

`rl` 
Obsoleto

Desaprobado, excepto en los documentos SVG1. En CSS utilice `horizontal-tb`.

`tb` 
Obsoleto

Desaprobado, excepto en los documentos SVG1. En CSS utilice `vertical-rl`.

`tb-rl` 
Obsoleto

Desaprobado, excepto en los documentos SVG1. En CSS utilice `vertical-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 class="example Text1"><span>我家没有电脑。</span></td>
    <td class="example Text1"><span>Example text</span></td>
    <td class="example Text1"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text1"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-lr</td>
    <td class="example Text2"><span>我家没有电脑。</span></td>
    <td class="example Text2"><span>Example text</span></td>
    <td class="example Text2"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text2"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-rl</td>
    <td class="example Text3"><span>我家没有电脑。</span></td>
    <td class="example Text3"><span>Example text</span></td>
    <td class="example Text3"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text3"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-lr</td>
    <td class="example Text4"><span>我家没有电脑。</span></td>
    <td class="example Text4"><span>Example text</span></td>
    <td class="example Text4"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text4"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-rl</td>
    <td class="example Text5"><span>我家没有电脑。</span></td>
    <td class="example Text5"><span>Example text</span></td>
    <td class="example Text5"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text5"><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

![](/es/docs/Web/CSS/writing-mode/screenshot_2020-02-05_21-04-30.png)

Especificaciones
----------------

| Specification |
| --- |
| CSS Writing Modes Level 4 # block-flow |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* Atributo de SVG `writing-mode` (en-US)
* `direction`
* `unicode-bidi` (en-US)
* `text-orientation`
* `text-combine-upright` (en-US)