Acerca de este problema HTML
El atributo dir especifica la dirección base del texto para el contenido de un elemento. Cuando un documento está escrito en un idioma de derecha a izquierda como árabe, hebreo, persa (farsi) o urdu, el navegador necesita saber que el texto debe fluir de derecha a izquierda. Sin este atributo, los navegadores por defecto renderizan de izquierda a derecha (ltr), lo que puede causar una variedad de problemas: la alineación del texto puede ser incorrecta, la puntuación puede aparecer en el lugar equivocado, y el diseño general de la página puede verse roto o confuso para los lectores nativos.
Esto importa por varias razones importantes:
-
Accesibilidad: Los lectores de pantalla y otras tecnologías de asistencia dependen del atributo
dirpara anunciar y navegar correctamente el contenido. Sin él, la experiencia de lectura para usuarios que dependen de estas herramientas puede ser desorientadora o incorrecta. -
Corrección visual: Elementos como listas, tablas, etiquetas de formulario y menús de navegación reflejarán su diseño en modo RTL. Sin
dir="rtl", estos elementos por defecto usan posicionamiento LTR, que se siente antinatural para los hablantes de idiomas RTL. -
Manejo de texto bidireccional: Los documentos a menudo contienen contenido de dirección mixta (ej., texto árabe con palabras en inglés incrustadas, números o nombres de marca). El Algoritmo Bidireccional Unicode (BiDi) usa la dirección base establecida por
dirpara resolver correctamente el orden de estas secuencias mixtas de texto. -
Cumplimiento de estándares: El Estándar HTML Living de WHATWG recomienda que los autores establezcan el atributo
dirpara coincidir con el idioma del documento, y las guías de Internacionalización de W3C lo alientan fuertemente para idiomas RTL.
Cómo solucionarlo
Añade dir="rtl" a tu etiqueta de inicio <html>. Si aún no lo has hecho, también incluye el atributo lang apropiado para el idioma específico que estás usando.
Para árabe:
<html dir="rtl" lang="ar">
Para hebreo:
<html dir="rtl" lang="he">
Para persa:
<html dir="rtl" lang="fa">
Ejemplos
❌ Atributo dir faltante en un documento árabe
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>مرحبا بالعالم</title>
</head>
<body>
<h1>مرحبا بالعالم</h1>
<p>هذه صفحة تجريبية باللغة العربية.</p>
</body>
</html>
El navegador renderizará esta página con una dirección base de izquierda a derecha. El texto del encabezado y párrafo puede aparecer alineado a la izquierda, y cualquier contenido de dirección mixta (como números incrustados o palabras en inglés) puede ser ordenado incorrectamente.
✅ Correcto: dir="rtl" añadido a la etiqueta <html>
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8">
<title>مرحبا بالعالم</title>
</head>
<body>
<h1>مرحبا بالعالم</h1>
<p>هذه صفحة تجريبية باللغة العربية.</p>
</body>
</html>
Ahora el navegador sabe que debe renderizar la página de derecha a izquierda. El texto se alineará a la derecha por defecto, las barras de desplazamiento aparecerán a la izquierda, y el diseño general se sentirá natural para los lectores árabes.
Manejo de contenido de dirección mixta dentro de una página
Si tu documento RTL contiene secciones en un idioma de izquierda a derecha, usa el atributo dir en elementos individuales para anular la dirección base localmente:
<p>قام المستخدم بزيارة <span dir="ltr">www.example.com</span> اليوم.</p>
Esto asegura que la URL se renderice en el orden correcto de izquierda a derecha mientras el texto árabe circundante fluye de derecha a izquierda. Establecer dir="rtl" en el elemento <html> establece el valor por defecto correcto, y solo necesitas anulaciones por elemento para contenido LTR incrustado.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.