Logikai tulajdonságok az elrendezést a tartalom folyási iránya (start/end, inline/block) alapján írják le, nem pedig a fizikai irányok (bal/jobb/felül/alul) alapján. Ez lehetővé teszi egy stylesheet számára, hogy automatikusan alkalmazkodjon a jobbról balra (arab, héber) vagy felülről lefelé írott nyelvekhez.
{ : ; : ; : left; : solid; }
{
: ;
: ;
: start;
: solid;
}
margin-inline: 1rem; /* left + right in LTR (both inline sides) */
margin-block: 2rem; /* top + bottom */
margin-inline-start: 1rem; /* the "start" inline edge (left LTR / right RTL) */
padding-block-end: 1rem; /* bottom in horizontal writing */
inset-inline-start: 0; /* logical version of left/right for positioning */
Fizikai tulajdonságokkal az arab támogatása egy egész második tükrözött stíluskészlet írását jelenti (margin-left → margin-right, stb.) a [dir="rtl"] mögött. Logikai tulajdonságokkal az ugyanaz a CSS egyszerűen működik — állítsa be a dir="rtl"] értéket az html-en és a margin-inline-start automatikusan a jobb oldalra kapcsol:
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
A logikai tulajdonságok függőleges írási módokat is kezelnek (pl. néhány kelet-ázsiai tipográfia) és az margin-inline: auto tiszta módszere a centrálásnak az iránytól függetlenül.
Bármely több nyelven kiadott termék esetén a logikai tulajdonságok szükségtelenné teszik a tükrözött RTL stilustáblák karbantartásának szükségességét — egy szabálykészlet alkalmazkodik az írás irányához.
Még az LTR-csak helyekre is tisztább mentális modell (start/end, inline/block), és egyre inkább az ajánlott alapértelmezés a modern CSS-ben.