[]previous and next page

Right to left and locale

A page's text direction comes from <html dir>, and the language from <html lang>.

For agentsUpdated

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: start and end, ms-* and me-*, ps-* and pe-*, text-start, border-s, rounded-s. A physical left-4 breaks in Arabic.
  • Mirror the directional icons (chevrons, arrows) with rtl:rotate-180 or rtl:-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).