snippetcssModeratepending

CSS logical properties -- writing-mode-aware layout

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

logical propertiesinlineblockmargin-inlinepadding-blockRTLwriting-mode

browser

Problem

margin-left, padding-right, text-align: left assume left-to-right text. RTL languages (Arabic, Hebrew) and vertical writing modes require flipping all directional properties.

Solution

CSS logical properties use inline/block instead of left/right/top/bottom. They automatically adapt to writing direction.

Code Snippets

Logical properties for direction-agnostic layout

/* Physical (breaks in RTL) */
.card {
  margin-left: 1rem;
  padding-right: 2rem;
  border-bottom: 1px solid;
  text-align: left;
}

/* Logical (works in any direction) */
.card {
  margin-inline-start: 1rem;
  padding-inline-end: 2rem;
  border-block-end: 1px solid;
  text-align: start;
}

/* Shorthand */
.box {
  margin-inline: 1rem 2rem;  /* start end */
  padding-block: 1rem;       /* top+bottom in LTR */
  inset-inline: 0;           /* left+right in LTR */
}

/* Sizing */
.container {
  inline-size: 100%;   /* width in LTR */
  block-size: 50vh;    /* height in LTR */
  max-inline-size: 800px;
}

Revisions (0)

No revisions yet.