Master CSS Logical Properties for Seamless RTL Support

This article is translated from Aleksandr Hovhannisyan’s “Writing Better CSS”. Click “Read original” at the end for the source.

In early web development, layouts relied on tables and hacks; modern CSS now enables clean, responsive designs across browsers, reducing code bloat.

Using Logical Properties for RTL Support

If your app is monolingual, you can safely use physical properties like margin-left, padding-right, and absolute positioning. However, for internationalized apps supporting RTL languages (Arabic, Hebrew), you must consider directionality.

Traditional RTL approach: write LTR CSS then scope RTL styles with the dir attribute, using physical properties (top, right, bottom, left). Example:

.element {
  /* LTR CSS */
  margin-left: 8px;
}
html[dir="rtl"] .element {
  /* RTL CSS */
  margin-left: unset;
  margin-right: 8px;
}

Maintaining separate LTR and RTL rules leads to duplicated code. Logical properties simplify this by using start/end instead of left/right.

.element {
  margin-inline-start: 8px;
}

Logical properties consist of three parts: the property name (e.g., margin), the flow direction ( block or inline), and the start/end side, plus related sub‑properties such as color or width. For example, border-left-color maps to border-inline-start-color. In LTR, start equals left; in RTL, it equals right, allowing a single rule to work for both.

Logical properties are my favorite recent CSS feature; they work even without RTL support and make future internationalization easy.

Logical Property Examples

Common logical properties and their physical equivalents: [margin|padding|border]-left →

[margin|padding|border]-inline-start

[margin|padding|border]-right

→

[margin|padding|border]-inline-end

[margin|padding|border]-top

→

[margin|padding|border]-block-start

[margin|padding|border]-bottom

→

[margin|padding|border]-block-end

border-bottom-width

→

border-block-end-width

border-left-color

→ border-inline-start-color Using logical properties reduces duplication compared to maintaining separate LTR and RTL styles.

Positioning

Absolute, relative, and fixed positioning can also use logical properties: top →

inset-block-start

bottom

→

inset-block-end

left

→

inset-inline-start

right

→ inset-inline-end Width & Height

For vertical writing modes, use: width →

inline-size

height

→ block-size Width is symmetric and unaffected by RTL.

Logical Property Values

Some property values also have logical equivalents: text-align: right; →

text-align: end;

justify-content: left;

→

justify-content: start;

float: left;

→

float: inline-start;

float: right;

→

float: inline-end;

Browser Support

This article focuses on using CSS logical properties to support different writing modes, making CSS code cleaner. It is the third part of a series; previous parts can be read via the links below.

Writing Better CSS (Part I)

Writing Better CSS (Part II)