Propiedad CSS direction

La propiedad CSS direction establece la dirección de escritura base del texto y el contenido en línea — ya sea de izquierda a derecha (ltr, el valor predeterminado) o de derecha a izquierda (rtl). Es la propiedad que permite que los sistemas de escritura de derecha a izquierda, como el árabe, el hebreo, el persa y el urdu, se muestren correctamente.

Esta página explica qué controla direction, en qué se diferencia del atributo HTML dir, cuándo realmente lo necesitas y los errores comunes que confunden a las personas.

Qué afecta direction

Establecer direction en un elemento de bloque cambia varias cosas a la vez:

La dirección de texto base del contenido del elemento.
La alineación predeterminada del texto dentro de ese elemento (rtl alinea el texto a la derecha, ltr a la izquierda), a menos que lo reemplaces con text-align.
El orden en que las celdas de una tabla fluyen dentro de una fila (empezando por la derecha para rtl).
La dirección de las incrustaciones bidireccionales creadas junto con la propiedad unicode-bidi.

direction también influye en el lado en que aparecen las viñetas de lista, las barras de desplazamiento y el desbordamiento, porque el inicio en línea del elemento cambia de lado.

direction vs. el atributo HTML dir

En documentos reales, la dirección generalmente se establece con el atributo HTML dir (<html dir="rtl">) en lugar de la propiedad CSS, porque dir tiene un significado semántico del que dependen las tecnologías de asistencia y el algoritmo bidi del navegador.

Los dos no son perfectamente equivalentes: a diferencia del atributo HTML dir, la propiedad CSS direction no se hereda en las celdas de tabla desde las columnas de tabla — las celdas de tabla viven dentro de filas, no de columnas, por lo que una celda hereda su dirección del propio elemento de tabla.

Información

Para cambiar el orden del diseño puramente visual (elementos flex/grid, márgenes, padding), prefiere las propiedades lógicas modernas y writing-mode. Usa direction específicamente para la dirección de lectura del texto. Consulta writing-mode.

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

Sintaxis

Sintaxis de la propiedad CSS direction

direction: ltr | rtl | initial | inherit;

Ejemplo: comparando ltr y rtl

El <p> mantiene la dirección ltr predeterminada; el <div> se cambia a rtl, por lo que su texto comienza en el borde derecho y se lee hacia la izquierda.

<!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>

Pruébalo tú mismo »

Resultado

![Propiedad CSS direction](https://api.w3docs.com/uploads/media/default/0001/03/576170a14b5c571d29380b8bdc5880bafac595b3.png "CSS direction property rtl example" =420x)

En el ejemplo anterior se usa el valor rtl, por lo que el texto del <div> fluye de derecha a izquierda y se alinea a la derecha de forma predeterminada.

Ejemplo: una lista y una cita de derecha a izquierda

Dado que direction invierte el inicio en línea, las viñetas de lista y la alineación de texto predeterminada se mueven al lado derecho — exactamente lo que necesitas para un fragmento en árabe o hebreo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .rtl {
        direction: rtl;
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <ul class="rtl">
      <li>First item</li>
      <li>Second item</li>
    </ul>
  </body>
</html>

Las viñetas se renderizan a la derecha y el texto se alinea a la derecha — sin ninguna regla text-align.

Valores

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

Errores comunes

direction no tiene efecto sobre el orden de las cajas en línea por sí solo. Para reordenar realmente el texto mixto de izquierda a derecha y de derecha a izquierda, también necesitas unicode-bidi (por ejemplo, unicode-bidi: bidi-override).
Alineación vs. dirección. rtl cambia la alineación predeterminada, pero una regla text-align explícita sigue teniendo prioridad. Si el texto se alinea de manera "incorrecta" después de cambiar la dirección, comprueba si hay un text-align en conflicto.
Se hereda. Establece direction una vez en un contenedor de alto nivel (o mediante <html dir="rtl">) y todo el subárbol lo adopta, excepto las celdas de tabla como se indicó anteriormente.

Propiedades relacionadas

unicode-bidi — control detallado sobre el texto bidireccional.
writing-mode — flujo vertical vs. horizontal y dirección de bloque.
text-align — alineación horizontal explícita del contenido en línea.

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 impacto en el orden de las columnas de tabla.