Direction-aware layouts without left and right
You used margin-left, padding-right, border-left, then overrode everything for RTL with [dir="rtl"]. Logical properties are direction-aware so one set of rules works for both.
2 margin-inline-start: 1rem;
3 padding-inline-end: 1rem;
4 border-block-start: 1px solid;
5}
6/* RTL: no extra rules */
2 margin-left: 1rem;
3 padding-right: 1rem;
4}
5
6[dir="rtl"] .box {
7 margin-left: 0;
8 margin-right: 1rem;
9}
10/* Duplicate and flip for RTL */
Browser Support for Logical properties
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.
Your first month is free
Managed WordPress hosting for faster sites.
One set of rules
inline-start and block-start follow writing direction. No [dir="rtl"] overrides.
Less code
Drop the RTL override block. Logical properties flip automatically when direction changes.
Future-proof
Works for vertical writing modes too. block and inline mean the same in any direction.
How it works
The old approach was to use physical properties like margin-left, padding-right, border-left, then add a [dir="rtl"] block that reset and flipped them. That meant maintaining two sets of values and missing one caused layout bugs in RTL.
Logical properties map to the writing mode. margin-inline-start is left in LTR and right in RTL. border-block-start is top in horizontal writing mode. Use inline for start/end (left/right in LTR) and block for block-start/block-end (top/bottom). Set dir on the document or a container and the same CSS works for both directions.