Atributo dir fundamental
El atributo dir con el valor 'rtl' es la base de cualquier diseño web RTL. Normalmente se establece en la etiqueta <html> o <body> y afecta la alineación del texto, el orden predeterminado de las celdas de tabla y la dirección de propiedades CSS como 'text-align'. Sin este atributo, el contenido permanece alineado a la izquierda, lo que resulta antinatural para idiomas RTL. Además, debe sobrescribir 'dir' a nivel de contenedor cuando haya direcciones mixtas. La ausencia o un valor incorrecto del atributo dir genera diseños difíciles de leer, por lo que debe priorizarse.
Diseño espejado y propiedades CSS lógicas
En lugar de propiedades físicas como 'left' y 'right', utilice propiedades CSS lógicas como 'margin-inline-start' y 'padding-inline-end'. Estas se adaptan automáticamente a la dirección de escritura y evitan sobrescrituras manuales. Un diseño espejado significa que la barra de navegación comienza a la derecha y el contenido a la izquierda. Con valores lógicos como 'float: inline-start' o 'text-align: start' se logra esto sin consultas de medios. Las propiedades modernas de CSS Grid y Flexbox como 'justify-content: flex-start' funcionan correctamente según el atributo dir. Siempre pruebe con contenido real, ya que las propiedades lógicas no son interpretadas de la misma manera por todos los navegadores.
Números y caracteres latinos incrustados
En textos RTL, los números y las letras latinas incrustadas permanecen alineados de izquierda a derecha. Esto presenta desafíos, ya que pueden interrumpir la dirección de lectura. Utilice el atributo 'unicode-bidi' o 'direction: ltr' para estos elementos con el fin de garantizar una representación coherente. En formatos de fecha o número, es recomendable ajustar el orden a la cultura RTL. Preste atención también al diseño de formularios, donde los campos de entrada para números deben permanecer alineados a la izquierda. Un tratamiento cuidadoso de esta dirección mixta evita rupturas visuales y mejora la legibilidad.
Fuentes y tipografía
La elección de la fuente es crucial: el árabe, el persa y el hebreo requieren fuentes con soporte de glifos adecuado. Opciones populares son 'Noto Naskh Arabic', 'Vazir' para persa y 'Noto Sans Hebrew'. Defina alternativas, p. ej., 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Asegúrese de tener tamaños de fuente y espaciado de línea suficientes, ya que las fuentes RTL suelen ser más estrechas o complejas. Evite la cursiva, ya que no existe en muchas escrituras árabes. Pruebe la representación en diferentes dispositivos para garantizar que las fuentes se carguen correctamente y sean legibles.
Iconos y espejado
Los iconos que indican una dirección (por ejemplo, flechas, símbolos de avance/retroceso) deben reflejarse en diseños RTL. Esto se logra con transformaciones CSS como 'transform: scaleX(-1)' o mediante el uso de conjuntos de iconos que admitan RTL automáticamente (por ejemplo, Font Awesome con el atributo 'dir'). Los símbolos sin referencia direccional (por ejemplo, casa, ajustes) permanecen sin cambios. Asegúrese de que el reflejo no altere la semántica. Pruebe todos los iconos en la vista RTL, ya que los reflejos no intencionados pueden afectar la usabilidad.
