Right to left and locale
A page's text direction comes from <html dir>, and the language from <html lang>.
A page's text direction comes from <html dir>, and the language from <html lang>. The Dusk and Vite apps of
this repository set both from the locale, and syncLocaleWithRoute keeps them in step on client navigation
(see the i18n guide). Write for both directions from the start:
- Use logical properties and utilities:
startandend,ms-*andme-*,ps-*andpe-*,text-start,border-s,rounded-s. A physicalleft-4breaks in Arabic. - Mirror the directional icons (chevrons, arrows) with
rtl:rotate-180orrtl:-scale-x-100. Do not mirror icons that are not directional (a clock, a logo, a checkmark). - Keep the reading order and the Tab order the same as the visual order. The primitives keep the arrow keys meaningful in both directions: Left and Right swap in right-to-left text.
- Set
dir="ltr"on a run of left-to-right content inside Arabic text (a code sample, a number, a product code).