CodePark/ questions / Right-to-left & layout
START PRACTICINGPRACTICE
Frontend question · Internationalization › Right-to-left & layout

How do you make a web app support right-to-left (RTL) languages like Arabic and Hebrew?

<html lang="ar" dir="rtl">

/* physical: wrong in RTL */
.card { margin-left: 16px; text-align: left; }

/* logical: follows the direction */
.card { margin-inline-start: 16px; text-align: start; }

Set the direction on the document, write CSS with logical properties, and mirror only what shows direction.

1. Set the direction. Put dir="rtl" and lang on <html>. The browser then lays out text, inline content, flexbox rows and grid columns from right to left. Don't flip the page with transform: scaleX(-1).

2. Use CSS logical properties. Physical words like left and right don't change with direction. Logical ones do:

  • margin-inline-start instead of margin-left
  • padding-inline-end instead of padding-right
  • inset-inline-start instead of left
  • text-align: start instead of text-align: left
  • border-start-start-radius for a rounded top corner on the reading start side

For the few places that still need a rule per direction, use [dir="rtl"] or :dir(rtl) selectors.

3. Mirror what shows direction. Flip back arrows, "next" chevrons and progress through steps. Don't flip logos, media play buttons, clocks, checkmarks or photos.

4. Handle mixed text. Numbers, code and English brand names inside Arabic text stay left to right. For user content in an unknown language, use dir="auto" or the <bdi> element, so the browser picks the direction from the text.

5. Test with real content. Use real Arabic text, long strings and numbers, not only a flipped English page.

  • Set dir="rtl" and lang on the <html> element.
  • Flexbox, grid and text follow the direction automatically.
  • Use logical properties like margin-inline-start and text-align: start instead of left and right.
  • Mirror icons that show direction, like back arrows, but not logos or media controls.
  • Use dir="auto" or <bdi> for user text in an unknown direction.
  • Test with real RTL content, not only a flipped English page.