वेबसाइटों को डिजाइन करते समय, दोनों बाएं-से-दाएं (LTR) और राइट-टू-लेफ्ट (RTL) भाषाओं को खानपान वैश्विक दर्शकों के लिए आवश्यक है। जबकि अधिकांश डेवलपर्स लेआउट समायोजन के लिए मार्जिन-लेफ्ट और मार्जिन-राइट का उपयोग करने से परिचित हैं, ये गुण उन वातावरणों में कम हो जाते हैं जहां पाठ दिशा बदल जाती है। मार्जिन-इनलाइन-स्टार्ट और इसके तार्किक समकक्षों को दर्ज करें-आधुनिक सीएसएस गुण जो बहुभाषी और द्विदिश सामग्री के लिए डिजाइनिंग को आसान बनाते हैं।

] ] ] यह अंग्रेजी जैसी LTR भाषाओं के लिए ठीक काम करता है, लेकिन जब पृष्ठ दिशा आरटीएल पर स्विच करती है, जैसे कि अरबी या हिब्रू में

तार्किक गुण, CSS3 में पेश किए गए, दिशा-अज्ञेय हैं। वे दस्तावेज़ या तत्व के लेखन मोड के आधार पर अनुकूलित करते हैं। प्रमुख तार्किक मार्जिन गुणों में शामिल हैं:

] • मार्जिन-इनलाइन-एंड: एलटीआर के लिए मार्जिन-राइट और आरटीएल के लिए मार्जिन-लेफ्ट को बदल देता है। ] ] 1 - निर्बाध आरटीएल समर्थन

जब आप मार्जिन-लेफ्ट का उपयोग करते हैं, तो यह हमेशा एक तत्व के बाईं ओर मार्जिन को लागू करता है, पाठ दिशा की परवाह किए बिना। यह व्यवहार तब भी नहीं बदलता है जब पृष्ठ RTL पर स्विच करता है, जिससे गलत लेआउट हो जाता है। इसके विपरीत, पाठ दिशा के आधार पर मार्जिन-इनलाइन-स्टार्ट एडाप्ट्स, मार्जिन को उपयुक्त पक्ष पर लागू करना:

/ * तार्किक संपत्ति */ ।तत्व { मार्जिन-इनलाइन-स्टार्ट: 20px; } / * के बराबर */ : रूट [dir = "ltr"] .element { मार्जिन-लेफ्ट: 20px; } : रूट [dir = "rtl"] .element { मार्जिन-राइट: 20px; }

2 - क्लीनर कोड
तार्किक गुणों के बिना, LTR और RTL दोनों का समर्थन करने के लिए दिशा-विशिष्ट शैलियों की आवश्यकता होगी, त्रुटियों के लिए जटिलता और क्षमता को जोड़ना होगा। यहाँ एक तुलना है:

पारंपरिक दृष्टिकोण:

: रूट [dir = "ltr"] .element { मार्जिन-लेफ्ट: 20px; } : रूट [dir = "rtl"] .element { मार्जिन-राइट: 20px; }

आधुनिक दृष्टिकोण:

।तत्व { मार्जिन-इनलाइन-स्टार्ट: 20px; }

/* Logical property */
.element {
 margin-inline-start: 20px;
}
/* Equivalent to */
:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

तार्किक गुण सीएसएस के अनुकूली और लचीले लेआउट की ओर चल रहे विकास का हिस्सा हैं। मार्जिन-इनलाइन-स्टार्ट को अपनाकर, आप अपने डिजाइनों को आधुनिक मानकों के साथ संरेखित करते हैं, जिससे वे अधिक स्केलेबल और बनाए रखने योग्य हो जाते हैं।

] ] पहले: मार्जिन-लेफ्ट
का उपयोग करना

। कार्ड { मार्जिन-लेफ्ट: 1REM; पैडिंग-लेफ्ट: 2rem; }
] के बाद: मार्जिन-इनलाइन-स्टार्ट का उपयोग करना

:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

। कार्ड { मार्जिन-इनलाइन-स्टार्ट: 1REM; पैडिंग-इनलाइन-स्टार्ट: 2rem; }

]

ब्राउज़र सपोर्ट

.element {
 margin-inline-start: 20px;
}

। कार्ड { मार्जिन-लेफ्ट: 1REM; /* मैदान छोड़ना */ मार्जिन-इनलाइन-स्टार्ट: 1REM; }

अंतिम विचार

] जैसा कि वेब तेजी से वैश्विक हो जाता है, इन संपत्तियों को अपनाने से यह सुनिश्चित होता है कि आपके डिजाइन दुनिया भर में उपयोगकर्ताओं के लिए समावेशी और अनुकूलनीय हैं।

] संभावना है, यह होगा।
]