Atributo dir de HTML
El atributo dir forma parte de los atributos globales y especifica la dirección del texto del contenido de un elemento. Descubra en qué elementos se puede utilizar.
El atributo dir de HTML especifica la dirección base del texto del contenido de un elemento. Es esencial para mostrar correctamente el HTML en escrituras de derecha a izquierda (RTL), como el árabe, el hebreo, el persa y el urdu. Cientos de millones de personas leen idiomas escritos en estas escrituras, por lo que establecer la dirección correctamente es una parte fundamental de la internacionalización.
dir es un atributo global, por lo que puede utilizarse en cualquier elemento HTML. El valor que usa un elemento se hereda del ancestro más cercano que tenga dir definido; si ninguno lo tiene, se usa ltr por defecto.
Valores
El atributo dir puede tener tres valores:
ltr— dirección del texto de izquierda a derecha (el valor predeterminado en la mayoría de los navegadores). Se usa para escrituras latinas, cirílicas, griegas, CJK y la mayoría de las demás.rtl— dirección del texto de derecha a izquierda. Se usa para el árabe, el hebreo y escrituras similares.auto— permite al navegador decidir según el contenido, usando la heurística del primer carácter direccional fuerte (véase la advertencia más abajo).
Sintaxis
<tag dir="ltr | rtl | auto">content</tag>Establecer la dirección del documento con dir en <html>
El uso más común e importante de dir es en el elemento <html>. Esto establece la dirección base de toda la página, que todos los elementos heredan a continuación. Para una página en árabe o hebreo, siempre se debe combinar dir="rtl" con el atributo lang correspondiente:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<title>مرحبا بالعالم</title>
</head>
<body>
<h1>مرحبا بالعالم</h1>
<p>هذا مثال على نص يُكتب من اليمين إلى اليسار.</p>
</body>
</html>Dado que dir="rtl" está en <html>, el encabezado, el párrafo, las viñetas de lista, la posición de la barra de desplazamiento y la alineación de texto predeterminada fluyen de derecha a izquierda sin necesidad de marcado adicional.
Ejemplo: efecto RTL visible
El ejemplo original colocaba dir="rtl" en texto en inglés, donde el efecto es apenas perceptible. La dirección solo resulta obvia con texto en escritura RTL real o con puntuación mixta. Compare estos párrafos:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML dir attribute</title>
</head>
<body>
<p dir="ltr">שלום עולם — Hebrew greeting (forced ltr)</p>
<p dir="rtl">שלום עולם — Hebrew greeting (rtl)</p>
<p dir="auto">שלום עולם — Hebrew greeting (auto)</p>
</body>
</html>En el párrafo rtl, el hebreo se muestra de derecha a izquierda y el texto y la puntuación finales se reordenan en consecuencia. En el párrafo auto, el navegador detecta el primer carácter fuerte (hebreo) y elige rtl automáticamente.
Cuándo establecer ltr de forma explícita
Establecer dir="ltr" en un elemento hijo es útil para anular una dirección rtl heredada. Por ejemplo, dentro de una página en árabe (rtl) puede haber un bloque de código, una URL o un campo de formulario en inglés que debe mantenerse de izquierda a derecha:
<html lang="ar" dir="rtl">
<body>
<p>عنوان الموقع:</p>
<p dir="ltr">https://www.w3docs.com/learn-html</p>
</body>
</html>Sin dir="ltr", la URL heredaría la dirección rtl de la página y su puntuación podría reordenarse visualmente de forma confusa.
Una nota sobre auto
auto es conveniente para el contenido generado por usuarios (comentarios, nombres de usuario, resultados de búsqueda) cuando no se conoce el idioma de antemano. Sin embargo, se basa en una heurística simple: el navegador busca el primer carácter direccional fuerte y lo usa para determinar la dirección de todo el elemento. Esto puede ser incorrecto; por ejemplo, un comentario que comienza con un emoji, un número o una palabra latina pero está escrito principalmente en árabe se mostrará de izquierda a derecha. Para el aislamiento por cadena de texto con dirección desconocida, es preferible usar el elemento <bdi>, que tanto aísla el texto como puede aplicar auto.
dir frente a <bdo>, <bdi> y la propiedad CSS direction
Estas herramientas están relacionadas pero resuelven problemas distintos:
- Atributo
dir— establece la dirección base que heredan un elemento y sus hijos. El navegador sigue aplicando el algoritmo bidireccional (bidi) de Unicode para reordenar los fragmentos de dirección mixta. <bdo>— anulación bidireccional. Fuerza una dirección única y desactiva la reordenación bidi automática para su contenido. Úselo cuando necesite invertir caracteres independientemente de su dirección natural.<bdi>— aislamiento bidireccional. Aísla un fragmento de texto para que su dirección no afecte al texto circundante; es ideal para incrustar contenido de usuario impredecible.- CSS
direction— el equivalente en la capa de estilos del atributodir. En general se prefiere el atributo HTMLdirporque también informa a las tecnologías de asistencia y al algoritmo bidi, mientras que CSS por sí solo no siempre lo hace. Cuando ambos están presentes, el atributo normalmente se asigna al mismo valor calculado.
Compatibilidad con navegadores
El atributo dir es compatible con todos los navegadores modernos y lo ha sido durante mucho tiempo, por lo que puede usarse sin necesidad de alternativas.