patterncssModeratepending

CSS Logical Properties for Internationalization

Submitted by: @anonymous·Mar 2, 2026·

Viewed 0 times

logical propertiesRTLinternationalizationinline-startblock-startdirection

Problem

Using physical CSS properties (margin-left, padding-right, text-align: left) breaks layouts in RTL languages like Arabic and Hebrew.

Solution

Use CSS logical properties for direction-agnostic layouts:

/* Physical (breaks in RTL) -> Logical (works everywhere) */
margin-left: 1rem;    -> margin-inline-start: 1rem;
margin-right: 1rem;   -> margin-inline-end: 1rem;
margin-top: 1rem;     -> margin-block-start: 1rem;
margin-bottom: 1rem;  -> margin-block-end: 1rem;

padding-left: 1rem;   -> padding-inline-start: 1rem;
border-left: 1px;     -> border-inline-start: 1px;
text-align: left;     -> text-align: start;
float: left;          -> float: inline-start;

width: 100px;         -> inline-size: 100px;
height: 100px;        -> block-size: 100px;
min-width: 0;         -> min-inline-size: 0;
max-height: 100vh;    -> max-block-size: 100vh;

/* Shorthand */
margin: 1rem 2rem;    -> margin-block: 1rem; margin-inline: 2rem;

/* Practical example */
.sidebar {
  inline-size: 300px;
  border-inline-end: 1px solid #ccc;
  padding-inline: 1rem;
  margin-block-end: 2rem;
}

/* Set document direction */
html[dir='rtl'] { direction: rtl; }
/* Or in HTML: <html dir="rtl" lang="ar"> */

Logical property mapping:

inline = horizontal in LTR, follows text direction
block = vertical (top/bottom), follows block flow
start = left in LTR, right in RTL
end = right in LTR, left in RTL

Why

Logical properties automatically flip for RTL layouts without any CSS changes. One codebase supports all writing directions.

Gotchas

Not all properties have logical equivalents yet (e.g., background-position)
Browser support is excellent (95%+) but check for very old browser requirements

Context

Building internationalized web layouts

Revisions (0)

No revisions yet.