v135 · css / i18n

i18n Scroll Demo

Compare overflow-inline/overflow-block (logical) vs overflow-x/overflow-y (physical) across three writing modes: horizontal LTR, horizontal RTL, and vertical. Physical properties break the layout when writing mode changes; logical properties follow the text flow.

checking overflow-inline / overflow-block…
overflow-inline maps to overflow-x in horizontal writing modes and overflow-y in vertical. overflow-block is the reverse. Using logical properties means a single stylesheet works correctly in Arabic (RTL), Japanese (vertical), and English (LTR) without per-language overrides.

Writing mode

Side-by-side comparison

CSS used