znazz75.de

CSS Logical Properties and Writing RTL-Friendly Layouts

Claude

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.

, ,

Recommended

Categories