Añadir una versión en árabe de este sitio significaba poner dir="rtl" en la página y reflejar
el diseño. Casi todo simplemente funcionó. Lo que se rompió no fueron las partes grandes y obvias, sino
fragmentos pequeños de CSS y texto que llevaban todo el tiempo asumiendo, en silencio, izquierda a derecha.
1. La trampa antispam
El formulario de contacto tiene un campo oculto que actúa como trampa antispam: los bots lo rellenan, las
personas reales nunca lo ven. Estaba oculto con position: absolute; left: -9999px;. En una
página de izquierda a derecha eso simplemente lo aparca fuera del borde izquierdo, fuera de la vista. En
dir="rtl" el inicio en línea de la página está a la derecha, y el contenido muy alejado hacia
la izquierda se convierte en desbordamiento desplazable en su lugar. La página de inicio en árabe ganó una
enorme barra de desplazamiento lateral, y una captura headless salió como un campo vacío del color de
fondo. La solución es el patrón estándar de ocultamiento visual, que no depende en absoluto de la
dirección:
.form-honeypot {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
opacity: 0;
}2. El espaciado entre letras
Los encabezados de la fuente de titulares usan tracking, espaciado extra entre caracteres. El árabe es una escritura cursiva: las letras se conectan con sus vecinas, y el espaciado entre letras separa esas uniones hasta que la palabra deja de leerse como palabra. La solución fue anularlo por completo para cualquier cosa en árabe, y dar al texto del cuerpo más espacio vertical para respirar:
:lang(ar) * { letter-spacing: 0 !important; }
:lang(ar) body { line-height: 1.8; }3. Dos frases en inglés seguidas
El héroe en árabe terminaba con ...علوم حاسوب في SFU. Vancouver, BC. El
algoritmo bidireccional del navegador trata un punto final y un espacio como neutros, así que
SFU y Vancouver, BC se fusionaron en una sola secuencia de izquierda a derecha. La
frase se mostró con sus piezas en el orden equivocado: se leía como SFU. Vancouver, BC flotando
fuera de lugar, con el punto final del lado equivocado. Poner una palabra en árabe entre las dos frases
separó las secuencias:
علوم حاسوب في SFU. مقيم في Vancouver, BC. Envolver cada frase en
<bdi>, o añadir una marca de derecha a izquierda (U+200F) justo después de
SFU., también lo habría solucionado.
Lo que no necesitó ningún esfuerzo
La mayor parte del diseño ya usaba propiedades lógicas de CSS: margin-inline-start,
inset-inline-end, text-align: start. Cambiar dir a rtl
reflejó todo eso de forma gratuita. Lo que quedaba, aún con propiedades físicas (los puntos de la línea de
tiempo, los marcadores de lista, una flecha hacia atrás), fue lo único que necesitó una pasada. El mapa
estelar y los diagramas se quedan de izquierda a derecha a propósito: no son texto, y reflejarlos los habría
dejado mal.
La lección
Las propiedades lógicas hacen que la dirección sea problema de otro. Todo lo que todavía asume izquierda y derecha, en lugar de inicio y fin, es donde están los bugs.