CSS logical properties describe layout in terms of flow direction (start/end) rather than physical direction (left/right) — essential for supporting right-to-left languages without maintaining a separate stylesheet.
/* Physical properties: always mean the same physical side,
wrong for RTL languages like Arabic or Hebrew */
.old-way {
margin-left: 1rem;
padding-right: 2rem;
text-align: left;
}
/* Logical properties: adapt automatically based on writing direction */
.new-way {
margin-inline-start: 1rem;
padding-inline-end: 2rem;
text-align: start;
}
/* Automatically flips in RTL contexts */
html[dir="rtl"] .new-way {
/* margin-inline-start now applies to the RIGHT side automatically -
no override needed */
}
Before logical properties, supporting RTL meant maintaining an entire mirrored stylesheet or complex overrides. With logical properties, the same CSS automatically adapts correctly when dir="rtl" is set on the page — genuinely valuable for any site with an international audience.