CSS Logical Properties for RTL Layouts and Internationalization

1. The problem with physical CSS properties

CSS was originally designed for Western, left-to-right writing systems (LTR). Properties like margin-left, padding-right, border-top and left refer to physical directions in the viewport, regardless of which direction the text actually flows. As soon as a website also needs to support Arabic, Hebrew, Farsi or Urdu, the entire layout has to be mirrored for RTL. Traditionally this was done by duplicating CSS with [dir="rtl"] selectors: every physical property was overridden with a mirrored variant for RTL. That produced twice as much CSS, was error prone and hard to maintain.

CSS Logical Properties solve this problem at its root. Instead of describing physical directions (left, right, top, bottom), logical properties describe directions relative to the flow of text: "start of the line", "end of the line", "start of the block" and "end of the block". In an LTR context, "start of the line" corresponds to left and "end of the line" to right. In an RTL context it is reversed, without changing a single CSS rule.

The concept was formalized in the CSS specification as CSS Logical Properties and Values Level 1 and is available in all modern browsers today. Adoption happens gradually because many existing codebases use physical properties. For new projects, using CSS Logical Properties from the outset is recommended, not just for RTL but also for vertical writing modes such as those used in Japanese or Chinese layouts.

2. Inline and block axes: the new coordinate system

The core of CSS Logical Properties is the new axis model. The "inline axis" runs in the direction of text flow: left to right in LTR, right to left in RTL, and top to bottom in vertical text. The "block axis" runs perpendicular to the text flow direction: top to bottom in horizontal text, and either right to left or left to right in vertical text, depending on writing-mode.

Within these axes there are two endpoints each: "inline-start" and "inline-end" along the inline axis, "block-start" and "block-end" along the block axis. These four logical directions replace the four physical directions "left", "right", "top" and "bottom". This means: margin-inline-start corresponds to margin-left in LTR and margin-right in RTL. This automatic adaptation is the core promise of CSS Logical Properties.

In addition to the start and end variants there are shorthand forms: margin-inline sets both inline sides at once (like margin-left and margin-right combined), and margin-block sets both block sides (like margin-top and margin-bottom). These shorthands are especially useful for the common pattern of defining horizontal and vertical spacing separately.

3. margin-inline and margin-block

The CSS Logical Property margin-inline is probably the most frequently used logical property in everyday work. The pattern margin-inline: auto centers a block element horizontally, regardless of writing direction. It corresponds to margin-left: auto; margin-right: auto, but is shorter and writing-direction independent. In an RTL context, margin-inline: auto produces exactly the same result: the element is positioned in the center of the available width.

margin-inline-start and margin-inline-end replace margin-left and margin-right in their direction-dependent meaning. A typical example: an icon in front of a label gets margin-inline-end: 0.5rem. In LTR that is margin-right, in RTL it is automatically margin-left. The icon always stays between the "start" of the label and the label text itself, regardless of language.

/* CSS Logical Properties: margin equivalents */

/* Centering: margin-inline: auto replaces margin: 0 auto */
.container {
  width: min(100%, 1200px);
  margin-inline: auto; /* works for both LTR and RTL */
}

/* Icon spacing: always between icon and text, not "on the right" */
.icon-label .icon {
  margin-inline-end: 0.5rem; /* LTR: margin-right | RTL: margin-left */
}

/* Indented list: start-aligned indent */
.nested-list {
  margin-inline-start: 1.5rem; /* LTR: margin-left | RTL: margin-right */
  padding-inline-start: 0;
}

/* Vertical rhythm: block direction only */
.section {
  margin-block: 3rem; /* LTR: margin-top + margin-bottom */
  margin-block-start: 4rem; /* override top/start specifically */
}

/* Shorthand: sets both inline values */
.aside {
  margin-inline: 2rem 0; /* inline-start: 2rem, inline-end: 0 */
}

4. padding-inline and padding-block

CSS Logical Properties for padding follow the same pattern as margins. padding-inline sets horizontal padding (in LTR), padding-block sets vertical padding. The most important single pattern is padding-inline: 1.5rem for horizontal inner spacing in cards, buttons and containers, shorter than padding-left: 1.5rem; padding-right: 1.5rem and automatically RTL compatible.

For buttons the pattern is particularly elegant: padding-block: 0.5rem; padding-inline: 1rem sets vertical and horizontal padding separately, without relying on shorthand ordering (padding: 0.5rem 1rem would do the same thing, but in physical notation). The benefit of the logical shorthands becomes clear when you need to override just one part: padding-inline-start overrides only the start side, without touching the other three sides.

A frequently overlooked use case: padding-block-start for spacing at the beginning of a section in vertical text. In Japanese layouts with writing-mode: vertical-rl, block-start does not correspond to the top, but to the right. CSS Logical Properties make the same declaration correct in both horizontal and vertical contexts, without having to rewrite the properties for every writing mode.

5. inset-inline and inset-block for positioning

Positioning properties like top, right, bottom and left have logical counterparts among the CSS Logical Properties: inset-block-start (= top), inset-block-end (= bottom), inset-inline-start (= left in LTR, right in RTL) and inset-inline-end (= right in LTR, left in RTL). The shorthand inset corresponds to the shorthand top right bottom left and sets all four sides at once.

A common pattern: an overlay or a sticky sidebar that is always docked to the "start side" of the layout. With physical properties: position: sticky; left: 0, which only works in LTR. With CSS Logical Properties: position: sticky; inset-inline-start: 0, which works automatically in both LTR and RTL. The same applies to badges, labels and other positioned elements docked to a corner of a container.

/* CSS Logical Properties: positioning and inset */

/* Sticky sidebar: always on the "start" side */
.sidebar {
  position: sticky;
  inset-block-start: 1rem; /* top: 1rem in horizontal writing */
  inset-inline-start: 0;   /* left: 0 in LTR, right: 0 in RTL */
  height: fit-content;
}

/* Absolute badge: top-right corner in LTR, top-left in RTL */
.card {
  position: relative;
}
.card .badge {
  position: absolute;
  inset-block-start: 0.5rem;   /* top */
  inset-inline-end: 0.5rem;    /* right in LTR, left in RTL */
}

/* Full overlay using inset shorthand */
.overlay {
  position: fixed;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0 */
  background: rgba(0, 0, 0, 0.5);
}

/* Tooltip: appears at the end of inline direction */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0; /* aligns with text start */
}

6. border-inline and logical borders

CSS Logical Properties for borders enable direction-independent dividing lines. border-inline-start creates a line at the "start" of the inline direction, on the left in LTR and on the right in RTL. The classic example is a blockquote with a left border: in an LTR layout, the quote gets border-inline-start: 4px solid #c4b5fd. In an RTL context the line automatically appears on the right side, which is the correct visual and semantic position for a quote in RTL languages.

The shorthand properties border-inline and border-block set both sides of the respective axis at once. border-block: 1px solid #e2e8f0 is equivalent to border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0, shorter and writing-direction independent. For horizontal dividing lines in cards and sections, this is the most modern CSS pattern.

7. writing-mode and text-orientation

The CSS property writing-mode controls the direction in which lines of text run and the direction in which block elements are stacked. The default value horizontal-tb is the familiar horizontal, top-to-bottom layout of Western scripts. With writing-mode: vertical-rl, lines of text run vertically from top to bottom and new lines are arranged from right to left, the standard for Japanese and Chinese typesetting. With vertical-lr, the line sequence runs from left to right.

CSS Logical Properties interact directly with writing-mode: on an element with writing-mode: vertical-rl, margin-inline-start corresponds to the physical margin-top, because the inline axis now runs vertically. This is exactly the point at which purely physical CSS properties become unusable in such contexts. With logical properties, a button or a card stays correctly styled regardless of whether the parent container's writing-mode is horizontal or vertical.

The property text-orientation controls, in vertical text, how individual characters are oriented. text-orientation: mixed rotates Latin characters onto their side while keeping CJK characters upright, the default behavior for mixed text. text-orientation: upright keeps all characters upright. text-orientation: sideways rotates everything sideways. This property is relevant for international typography and UI elements such as vertical tabs or side navigations.

8. Physical vs. logical in direct comparison

The following table shows the direct correspondences between physical and logical CSS Logical Properties for the LTR default layout. In RTL contexts, "start" and "end" are each mirrored.

For purely decorative physical properties, for example a top border used as a design element that is deliberately meant to always appear at the top, the physical variant is still correct. CSS Logical Properties are not a dogma: they are the right tool for direction-dependent spacing and positioning, but they are not required for properties where the physical direction is semantically intended.

9. Migration and progressive enhancement

The migration from physical to logical CSS Logical Properties can happen step by step. A simple strategy: build new components consistently with logical properties, and migrate existing components whenever the opportunity arises. Browser support is now so broad that no fallback is needed. For teams that no longer support IE11, there are no technical obstacles.

A practical migration approach: search the stylesheet for margin-left, margin-right, padding-left, padding-right, border-left, border-right, left: and right:. Every match is a candidate for a logical equivalent, unless the physical direction is explicitly intended semantically. For Tailwind CSS projects: Tailwind v3.3 introduced logical utilities such as ms-4 (margin-inline-start) and pe-2 (padding-inline-end). Tailwind v4 builds logical properties more deeply into the utility system.

/* CSS Logical Properties: migration and RTL example */

/* Before: physical, breaks in RTL */
.card {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-left: 4px solid #7c3aed;
  margin-left: auto;
  margin-right: auto;
}

/* After: logical, works in LTR and RTL */
.card {
  padding-inline: 1.5rem;
  border-inline-start: 4px solid #7c3aed;
  margin-inline: auto;
}

/* RTL layout: same CSS, mirrored result */
[dir="rtl"] .card {
  /* No overrides needed, logical properties handle it */
}

/* Vertical writing mode: same logical properties work */
.vertical-text {
  writing-mode: vertical-rl;
  padding-inline: 0.75rem;  /* now top and bottom in visual terms */
  padding-block: 1.5rem;    /* now left and right in visual terms */
  margin-inline-start: 1rem; /* top in visual terms */
}

10. Summary

CSS Logical Properties replace physical direction values with writing-direction-independent values based on the inline and block axes. The result: a single stylesheet works correctly for LTR languages like German, RTL languages like Arabic or Hebrew, and vertical writing modes like Japanese. margin-inline, padding-block, inset-inline-start and border-inline-start are the most important logical shorthands for everyday use.

The migration can happen step by step: build new components with logical properties right away, and migrate existing ones whenever they are being reworked. Browser support has been comprehensive since 2022. For teams with international products, the question is not "whether" but "when" they switch from physical to logical properties, and the ideal moment is always the next refactor.

11. FAQ: CSS Logical Properties