Propiedad direction de CSS

La propiedad direction define la dirección del texto.

La propiedad direction establece la dirección base del texto de los elementos de bloque y la dirección de las incrustaciones creadas por la propiedad unicode-bidi. También establece la alineación predeterminada del texto de los elementos de bloque y la dirección en la que fluyen las celdas dentro de una fila de tabla.

La dirección del texto suele especificarse dentro de un documento, como el atributo dir de HTML, en lugar de usar directamente la propiedad direction. A diferencia del atributo dir de HTML, la propiedad CSS direction no se hereda en las celdas de la tabla desde las columnas de la tabla, porque las celdas están dentro de las filas, no de las columnas. En su lugar, las celdas heredan la dirección directamente del elemento table.

INFO

La propiedad direction no tiene efecto en los elementos de nivel en línea.

Valor inicial	ltr
Se aplica a	Todos los elementos.
Heredable	Sí.
Animable	Discreto.
Versión	CSS2
Sintaxis DOM	object.style.direction = "rtl";

Sintaxis

Sintaxis de la propiedad CSS direction

css

direction: ltr | rtl | initial | inherit;

Ejemplo de la propiedad direction:

Ejemplo de la propiedad CSS direction con el valor rtl (de derecha a izquierda)

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        direction: rtl;
      }
    </style>
  </head>
  <body>
    <p>As you can see, this text is written with default direction.</p>
    <div>However, this text is written from right to left as we defined.</div>
  </body>
</html>

Try it Yourself »

Resultado

CSS direction Property

En el ejemplo anterior se utiliza el valor "rtl". El texto se escribe de derecha a izquierda.

Valores

Valor	Descripción	Probar
ltr	Indica que la dirección del texto será de izquierda a derecha. Este es el valor predeterminado de la propiedad.	Probar »
rtl	Indica que la dirección del texto será de derecha a izquierda.	Probar »
initial	Establece la propiedad en su valor predeterminado.	Probar »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad CSS 'direction'?

Establece la dirección del texto para el contenido de un elemento.Controla la dirección del contenedor flexNo se aplica a elementos en línea.Tiene un impacto en el orden de las columnas de la tabla.

Propiedad direction de CSS ​

Sintaxis ​

Ejemplo de la propiedad direction: ​

Resultado ​