CSS Logical Properties Explained

CSS Logical Properties — flow-relative alternatives to left/right/top/bottom that adapt across writing modes and directions.

Content tagged logical-properties

• Tutorial:Viewport Inline & Block Units: vi and vb

  Viewport units that follow text flow, not fixed axes.

  vi and vb behave like vw and vh in the default horizontal-tb writing mode, but unlike vw/vh they aren't tied to a fixed screen direction — switch to a vertical writing mode and the two swap, with vi tracking height and vb tracking width. They also resolve against the root element's writing-mode specifically, never a locally-scoped one, which is the detail most likely to trip someone up.

• Post:CSS Logical Properties: Writing Modes, RTL, and Direction-Aware Layouts

  Design once, adapt everywhere.

  CSS Logical Properties adapt your layout to any language, direction, or writing mode from one stylesheet — no more RTL hacks or duplicated styles.