i18n/dir-rtl

Why

Without dir="rtl", text in these languages is laid out left to right: punctuation lands on the wrong side, mixed numbers and Latin words jump around, and the whole layout (navigation, form fields, scroll direction) reads backwards for the user.

Fix

Set dir in markup, not in CSS: <html lang="ar" dir="rtl">, from the same locale data that sets lang (a list of right-to-left languages, or Intl.Locale text info where the runtime has it). Write layout with logical properties so it mirrors without extra CSS. Use dir="auto" on fields and elements that show user-generated text.

Examples

<!-- bad -->
<html lang="ar">
<!-- good -->
<html lang="ar" dir="rtl">

Sources

• W3C Internationalization, Structural markup and right-to-left text in HTML
• MDN, the dir global attribute

Read it in the terminal

npx github:dawidolko/frontend-skills explain i18n/dir-rtl