2026-09-08 · 8 min read
- css
- internationalization
- accessibility
Physical CSS properties assume top, right, bottom, and left directions. Logical properties describe block and inline axes derived from writing-mode and direction, allowing the same component rules to adapt to left-to-right, right-to-left, and vertical text flows.
Logical properties are not a global search-and-replace task. Some requirements are intentionally physical, and direction must reflect content and document semantics rather than a visual mirroring effect.
Map requirements to flow-relative axes
Use inline-start and inline-end for positions tied to text progression, and block-start and block-end for positions tied to line stacking. Keep top or viewport-left when the requirement truly refers to the screen or physical device.
- Use margin-inline and padding-block for flow spacing.
- Use inline-size and block-size for adaptable dimensions.
- Use border-inline-start for leading-edge emphasis.
- Use inset-inline-end for a trailing positioned control.
Set direction at semantic boundaries
Set the document language and direction from the active locale, and isolate embedded content whose direction differs. User-generated strings can contain mixed scripts, numbers, punctuation, and bidirectional control characters that require semantic markup and safe text handling.
Do not reverse DOM order solely for RTL presentation when reading, focus, and accessibility order should remain logical. Use layout systems that preserve a predictable interaction sequence.
Control cascade and asset mirroring
Physical and logical declarations targeting the same used edge can override one another according to cascade order. Keep fallbacks explicit and test computed styles instead of assuming the logical declaration always wins.
- Mirror directional arrows only when their meaning reverses.
- Do not mirror logos, clocks, media controls, or text glyphs blindly.
- Check gradients, shadows, and animations for directional meaning.
- Preserve visible focus and contrast in every layout direction.
Test content, interaction, and overflow
Use Flashman's CSS formatter to review declarations, diff for computed-style evidence, units converter for logical dimensions, color tool for state contrast, and HTML entities tool for harmless mixed-direction fixtures.
Test LTR, RTL, vertical modes, nested direction changes, mixed scripts, long labels, zoom, keyboard traversal, selection, scrolling, sticky and absolute positioning, grid and flex layouts, printing, and browser fallbacks.