Over 600 million people write right-to-left (Arabic, Hebrew, Persian, Urdu), yet most apps break for them. Two HTML attributes fix the most common cases. For English-only apps where users may type in RTL languages, add `dir="auto"` to free-form text inputs — the browser detects the first strongly-directional character and adjusts rendering automatically, no JavaScript needed. For fully localized apps with a locale switcher, set `dir="rtl"` on the `<html>` element when an RTL locale is active, and replace physical CSS properties (margin-left, padding-right) with CSS Logical Properties (margin-inline-start, padding-inline-start) so layouts mirror correctly without manual overrides. The two approaches compose: in a fully RTL interface, free-form inputs should still carry `dir="auto"` to handle mixed-language input. Common pitfalls include icon flipping (only directional icons should flip), flexbox auto-reversal, and the incorrect use of `navigator.language` to infer text direction.
Table of contents
Why dir="auto" —not navigator.language —is the answer for English-only appsWhen RTL goes deeper: supporting a fully localized UIThe 4 most common security risks when vibe coding your appThe implementation checklistHow to make an AI clone of your CEO for the world's biggest hackathonWhere this goes wrong in practiceThe real cost of skipping thisSort: