CSS Logical Properties for RTL and Arabic Layouts

If you have ever built a product for both English and Arabic audiences, or any combination of LTR and RTL languages, you already know the pain. Duplicate stylesheets, hardcoded direction overrides, and borders that flip to the wrong side are all common problems. CSS logical properties solve this by replacing physical directions like left and right with flow-relative values that automatically adapt to any writing mode or text direction.

Instead of writing margin-left and padding-right, you use margin-inline-start and padding-inline-end. The browser maps these logical values to the correct physical side based on the element's dir attribute or the document's writing mode. This means a single stylesheet can handle both LTR and RTL layouts without any overrides or duplication.

Why CSS Logical Properties Matter for RTL Layouts

Traditional CSS properties like margin-left, padding-right, and text-align: left are tied to the physical screen. They always refer to the same side regardless of language direction. This creates a serious problem when you need to support Arabic, Hebrew, Urdu, or any other RTL language, because every spacing, alignment, and positioning rule needs a separate override.

CSS logical properties replace these physical references with flow-relative equivalents. inline-start always means "the side where reading begins" and inline-end always means "the side where reading ends." In English (LTR), inline-start maps to left. In Arabic (RTL), it maps to right. The CSS stays the same; only the dir attribute changes.

Physical vs Logical Properties Compared

CSS Logical Properties Cheat Sheet

This table maps every common physical CSS property to its logical equivalent. Use the logical column in all new code to ensure your layouts work in both LTR and RTL without extra overrides.

Demo 1: Article Card

Toggle direction to see how the same CSS renders in both English and Arabic. The layout, spacing, and text alignment all flip correctly with zero extra CSS. Notice how margin-inline-start: auto on the date pushes it to the correct end in both directions.

Demo 2: Navigation Bar

The logo sits at inline-start, links fill the middle, and the CTA button anchors to inline-end. Toggle direction and watch the entire navigation mirror itself. This pattern works because margin-inline-end: auto on the logo pushes all subsequent items to the end, and margin-inline-start on the CTA creates spacing from the reading direction's end.

Demo 3: Transaction List

Each transaction icon uses margin-inline-end for spacing, and the amount uses margin-inline-start: auto to stay at the far end of the row. Toggle to see both directions working from a single set of CSS rules.

The CSS Behind All Three Demos

/* Icons: margin-inline-end mirrors automatically in RTL */
.icon {
  margin-inline-end: 12px;
}
 
/* Amount pushed to the end of the row */
.amount {
  margin-inline-start: auto;
}
 
/* Sidebar border appears on the correct side */
.active-nav-item {
  border-inline-start: 3px solid #c8460a;
  padding-inline-start: 12px;
}
 
/* Text always aligns to the reading start */
.label {
  text-align: start;
}

How to Adopt Logical Properties in Existing Projects

You do not need to refactor your entire codebase at once. Start by using logical properties in all new CSS you write. For existing code, search for margin-left, margin-right, padding-left, padding-right, border-left, border-right, left, right, and text-align: left or text-align: right. Replace them with their logical equivalents from the cheat sheet above. If you use Tailwind CSS, the utility classes ms-*, me-*, ps-*, and pe-* already map to margin-inline-start, margin-inline-end, padding-inline-start, and padding-inline-end.