CSS logical properties for RTL layouts

01Why left and right break in RTL

Properties such as <code>margin-left</code> and <code>padding-right</code> point at a fixed side of the screen. In an Arabic interface, the start of a line is on the right, so a space that was meant to sit before an icon ends up after it.

Logical properties describe sides relative to the writing direction instead. They let one stylesheet serve both English and Arabic without a second set of rules.

Typical symptoms of physical properties in an RTL page include:

• An icon that sits on the wrong side of its label, with its gap on the outer edge.
• A coloured accent bar that stays on the left edge of a card while the text starts on the right.
• A close button that stays in the left corner of a dialog, far from where Arabic readers expect it.

02Inline and block axes

The inline axis is the direction text runs along a line: left to right in English, right to left in Arabic. The block axis is the direction lines stack, which is top to bottom in both.

Start and end replace left and right. Top and bottom become block-start and block-end.

A useful habit is to read every spacing rule as a sentence about reading order: space before the label, space after the icon. If the sentence still makes sense after the page flips, the rule is probably logical already. If it names a screen side, rewrite it.

03Common replacements

• Spacing

  <code>margin-left</code> becomes <code>margin-inline-start</code>. <code>padding-right</code> becomes <code>padding-inline-end</code>. <code>padding-inline: 16px</code> sets both inline sides.

• Position

  <code>left: 0</code> becomes <code>inset-inline-start: 0</code>.

• Borders

  <code>border-left</code> becomes <code>border-inline-start</code>.

• Text alignment

  <code>text-align: left</code> becomes <code>text-align: start</code>, and <code>right</code> becomes <code>end</code>.

Flexbox and grid already follow the direction. With <code>dir="rtl"</code> on the <code>html</code> element, a row of flex items starts from the right with no extra CSS.

Set the direction once on <code>html</code> with <code>dir</code> and <code>lang</code>, not on individual components.

04When you still need RTL overrides

Some things have no logical version and need a direction-specific rule:

• <code>transform: translateX()</code> and rotation values, such as a slide-in panel.
• <code>background-position</code> with a left or right keyword.
• Directional icons, such as an arrow that should point the other way.

For these, add a small override such as <code>[dir=rtl] .arrow { transform: scaleX(-1); }</code> and keep the list short.

Browser support for logical properties is broad in current browsers. Even so, check the browsers your audience actually uses before removing old physical rules, and test the page in both directions after every change.

05Sources

• MDN Web Docs. CSS logical properties and values. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
• W3C. CSS Logical Properties and Values Level 1. https://www.w3.org/TR/css-logical-1/