CSS Logical Properties for RTL UI Layouts

CSS logical properties provide a modern, adaptable approach to internationalization by replacing physical directions (left, right, top, bottom) with flow-relative directions (inline, block). When building interfaces for right-to-left (RTL) languages such as Arabic, Hebrew, or Persian, logical properties automatically adjust layout spacing, alignments, and boundaries based on the document's writing mode and direction. This eliminates the need for separate RTL stylesheets or repetitive override rules, streamlining cross-language user interface development into a single, maintainable codebase.

Physical vs. Logical Dimensions

Traditional CSS relies on physical coordinates tied directly to the screen:

• Top and Bottom: The vertical axis.
• Left and Right: The horizontal axis.

CSS logical properties map these axes relative to the flow of content:

• Block Axis: The direction in which blocks of content stack. In standard horizontal writing modes, this runs vertically from top to bottom (block-start to block-end).
• Inline Axis: The direction in which text flows within a line. In a left-to-right (LTR) layout, it runs left to right. In an RTL layout, it automatically flips to run right to left (inline-start to inline-end).

Spacing: Margin and Padding

In traditional layouts, adding space to the beginning of a sentence requires explicit physical rules:

/* Traditional LTR and RTL approach */
.element {
  margin-left: 1.5rem;
}

[dir="rtl"] .element {
  margin-left: 0;
  margin-right: 1.5rem;
}

Using logical properties, this behavior is handled automatically without overrides:

/* Logical approach */
.element {
  margin-inline-start: 1.5rem;
}

When an element or its ancestor has dir="rtl", margin-inline-start automatically computes to margin-right. The same logic applies to padding-inline-start, padding-inline-end, and block dimensions (margin-block-start, margin-block-end).

Borders and Border Radius

Borders frequently indicate separators, active states, or directional cues. Logical properties handle borders identically to margins and padding:

• border-inline-start: Sets the border at the start of the inline text flow (left in LTR, right in RTL).
• border-inline-end: Sets the border at the end of the inline text flow (right in LTR, left in RTL).

Logical border-radius properties also adapt dynamically:

• border-start-start-radius: Top-left in LTR, top-right in RTL.
• border-start-end-radius: Top-right in LTR, top-left in RTL.
• border-end-start-radius: Bottom-left in LTR, bottom-right in RTL.
• border-end-end-radius: Bottom-right in LTR, bottom-left in RTL.

Sizing and Positioning

Logical properties replace absolute sizing and positioning directives:

• Sizing: Instead of width and height, logical properties use inline-size (horizontal size in standard writing modes) and block-size (vertical size).
• Positioning: Instead of using top, right, bottom, and left for positioned elements, use the inset family:
  • inset-inline-start replaces left in LTR and right in RTL.
  • inset-inline-end replaces right in LTR and left in RTL.
  • inset-block-start replaces top.
  • inset-block-end replaces bottom.

Text Alignment

Using text-align: left forces text to the left side of the container regardless of language direction, causing broken alignment in RTL interfaces. Using flow-relative alignment solves this:

• text-align: start: Aligns text to the left in LTR and to the right in RTL.
• text-align: end: Aligns text to the right in LTR and to the left in RTL.

Core Benefits for Internationalization

• Single Codebase: Eliminates the necessity for CSS preprocessing tools, CSS-in-JS transformations, or separate rtl.css files.
• Automatic Adaptation: Toggling between LTR and RTL simply requires updating the HTML attribute (dir="rtl" or dir="ltr"), and the layout immediately adjusts.
• Reduced Specificity Conflicts: Because manual overrides are no longer required to flip margins and alignments, style sheets remain flat and free from specificity wars.