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 March 2017.

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

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 inicialhorizontal-tb
Applies toall elements except table row groups, table column groups, table rows, and table columns
Heredableyes
Valor calculadocomo se especifica
Animation typeNot 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

Resultado efectivo

Especificaciones

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

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
writing-mode
horizontal-tb
lr
Deprecated
lr-tb
Deprecated
rl
Deprecated
rl-tb
Deprecated
sideways-lr
sideways-rl
tb
Deprecated
tb-rl
Deprecated
vertical-lr
vertical-rl
Vertically-oriented form controls

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Deprecated. Not for use in new websites.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Véase también