Adding an Arabic version of this site meant setting dir="rtl" on the page and mirroring the
layout. Most of it just worked. The parts that broke were not the big obvious ones, they were small pieces
of CSS and copy that had quietly assumed left to right the whole time.
1. The honeypot
The contact form has a hidden spam trap input: bots fill it in, real people never see it. It was hidden
with position: absolute; left: -9999px;. On a left-to-right page that just parks it off the
left edge, out of sight. In dir="rtl" the page's inline start is on the right, and content far
off to the left becomes scrollable overflow instead. The Arabic homepage gained a huge sideways scrollbar,
and a headless screenshot came out as an empty field of background colour. The fix is the standard
visually-hidden pattern, which does not depend on direction at all:
.form-honeypot {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
opacity: 0;
}2. Letter spacing
The display font's headings use tracking, extra letter-spacing between characters. Arabic is a joined script: letters connect to their neighbours, and letter-spacing pulls the joins apart until the word stops reading as a word. The fix was to zero it out for anything in Arabic, and give the body text more room to breathe vertically instead:
:lang(ar) * { letter-spacing: 0 !important; }
:lang(ar) body { line-height: 1.8; }3. Two English phrases in a row
The Arabic hero ended with ...علوم حاسوب في SFU. Vancouver, BC. The
browser's bidirectional algorithm treats a full stop and a space as neutral, so SFU and
Vancouver, BC merged into one left-to-right run. The sentence displayed with its pieces in the
wrong order: it read like SFU. Vancouver, BC floating out of place, with the final full stop
on the wrong side. Putting an Arabic word between the two phrases split the runs apart:
علوم حاسوب في SFU. مقيم في Vancouver, BC. Wrapping each phrase in
<bdi>, or adding a right-to-left mark (U+200F) right after SFU., would have
fixed it too.
What needed no effort at all
Most of the layout already used logical CSS properties: margin-inline-start,
inset-inline-end, text-align: start. Flipping dir to
rtl mirrored all of that for free. The leftovers that still used physical properties, timeline
dots, list markers, a back arrow, were the only parts that needed a pass. The star chart and diagrams stay
left to right on purpose: they are not text, and mirroring them would have made them wrong.
The lesson
Logical properties make direction someone else's problem. Everything that still assumes left and right, not start and end, is where the bugs are.