Properti logis mendeskripsikan tata letak miturut arah alur konten (wiwit/pungkasan, inline/blok) tinimbang arah fisik (kiwa/tengen/ndhuwur/ngisor). Iki ndadekake siji lembar gaya otomatis nyesuaike karo basa sing ditulis saka tengen menyang kiwa (Arab, Ibrani) utawa saka ndhuwur menyang ngisor.
{ : ; : ; : 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 */
Karo properti fisik, ndhukung Arab tenan iki kudu nulis set lengkap gaya sing dicerminake (margin-left → margin-right, lsp.) ana [dir="rtl"]. Karo properti logis, CSS sing padha bisa dienggo wae — tetapake dir="rtl" ing html lan margin-inline-start otomatis bali menyang sisih tengen:
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
Properti logis uga nangani mode teks vertikal (cth. sawetara pengetikan Asia Timur) lan nggawe margin-inline: auto cara sing rapi kanggo pusat tanpa pitungan arah.
Kanggo produk apa wae sing dikirim ing macem-macem basa, properti logis ngilangake kebutuhan kanggo njaga lembar gaya RTL sing dicerminake — siji set aturan nyesuaike karo arah tuli.
Sakpira kanggo situs LTR wae, iki model pikiran sing luwih resik (wiwit/pungkasan, inline/blok), lan saya tambah iki standar sing disaranake ing CSS modern.