लॉजिकल प्रॉपर्टीज लेआउटला सामग्रीच्या प्रवाह दिशा (सुरुवात/शेवट, इनलाइन/ब्लॉक) या दृष्टिकोनातून वर्णन करतात, भौतिक दिशांच्या (डावे/उजवे/वर/खाली) अगोदर. हे एक स्टाइलशीटला उजवे-डावे लिहिलेल्या भाषा (अरबी, हिब्रू) किंवा वर-खाली लिहिलेल्या भाषांसाठी आपोआप अनुकूल करण्यास सक्षम करते.
{ : ; : ; : 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 */
भौतिक प्रॉपर्टीजसह, अरबीला समर्थन देणे म्हणजे [dir="rtl"] मागे आरशित शैलीचा संपूर्ण दुसरा संच लिहिणे (margin-left → margin-right, इ.). लॉजिकल प्रॉपर्टीजसह, समान CSS फक्त कार्य करते — html वर dir="rtl" सेट करा आणि margin-inline-start आपोआप उजवीकडे फ्लिप करते:
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
लॉजिकल प्रॉपर्टीज उभ्या लेखन पद्धती (उदा. काही पूर्व-आशियाई टाइपोसेटिंग) देखील हाताळतात आणि margin-inline: auto ला दिशा-निरपेक्ष मध्यभागी करण्याचा स्वच्छ मार्ग बनवतात.
कोणत्याही उत्पादनासाठी जे एकाधिक भाषांमध्ये पाठवले जाते, लॉजिकल प्रॉपर्टीज आरशित RTL स्टाइलशीट राखण्याची आवश्यकता दूर करतात — नियमांचा एक संच लेखन दिशेला अनुकूल करतो.
अगदी LTR-केवळ साइट्ससाठीही ते हे एक स्वच्छ मानसिक मॉडेल आहेत (सुरुवात/शेवट, इनलाइन/ब्लॉक), आणि ते आधुनिक CSS मध्ये सर्वधिक शिफारस केलेले मानक आहेत.