RTL Styling 101: The Hidden Cost of Broken Letter Spacing

Letter spacing has a known flaw: it doesn't behave as the CSS Specification dictates. Instead of spacing characters evenly, the property leaves an awkward gap at the end of an element. For most developers writing in Spanish or English, that quirk is merely cosmetic. But for speakers of right-to-left (RTL) languages such as Arabic or Hebrew, the stray space lands at the start of a word—or, in Firefox's Gecko engine, at the end in reading order—while Chrome and Safari (Blink and Webkit) leave it at the beginning.

Side-by-side comparison of letter spacing on Gecko and Blink/Webkit

Demonstrating this pain point requires proper RTL styling, which is no trivial task. A comprehensive guide by Ahmad Shadeed covers every major aspect of styling RTL web content and offers best practices for internationalizing an LTR page. It remains a must-read for anyone interested in web i18n and accessibility.

The guide dates back to 2018, so some may already know it. For those who don't, it's a worthwhile discovery.

Direct Link →