सीएसएस पॉडकास्ट - 012: लॉजिकल प्रॉपर्टी
यूज़र इंटरफ़ेस का एक आम पैटर्न, टेक्स्ट लेबल है. इसमें इनलाइन आइकॉन को सपोर्ट किया जाता है.
यह आइकॉन, टेक्स्ट की बाईं ओर होता है और दोनों के बीच थोड़ा सा अंतर होता है. यह आइकॉन, आइकॉन पर margin-right के ज़रिए दिया जाता है.
हालांकि, कोई समस्या है, क्योंकि यह सिर्फ़ तब काम करेगा, जब टेक्स्ट की दिशा बाएं से दाएं होगी.
अगर टेक्स्ट की दिशा दाएं से बाएं बदल जाती है और ऐरेबिक जैसी भाषाओं में इसे पढ़ा जाता है, तो आइकॉन टेक्स्ट के सामने दिखेगा.
आपको सीएसएस में इसकी जानकारी कैसे देनी है? लॉजिकल प्रॉपर्टी की मदद से, इन स्थितियों को हल किया जा सकता है. कई अन्य फ़ायदों में से, वे अंतरराष्ट्रीयकरण के लिए मुफ़्त और अपने आप सहायता देते हैं. इनकी मदद से, सभी लोगों के लिए एक बेहतर फ़्रंट-एंड तैयार किया जा सकता है.
शब्दावली
ऊपर, दाएं, नीचे, और बाएं दिखने से जुड़े फ़िज़िकल प्रॉपर्टी, व्यूपोर्ट के फ़िज़िकल डाइमेंशन के बारे में बताते हैं. आप इन्हें मैप पर मौजूद कंपास गुलाब की तरह समझ सकते हैं. वहीं दूसरी ओर, लॉजिकल प्रॉपर्टी, बॉक्स के किनारों का हवाला देती हैं, क्योंकि वे कॉन्टेंट के फ़्लो से जुड़ी होती हैं. इसलिए, टेक्स्ट की दिशा या लिखने का मोड बदलने पर, ये बदलाव हो सकते हैं. यह दिशा-निर्देश देने वाली स्टाइल की तुलना में एक बड़ा बदलाव है. इससे हमें अपने इंटरफ़ेस को स्टाइल देते समय ज़्यादा सहूलियत मिलती है.
फ़्लो ब्लॉक करें
ब्लॉक फ़्लो वह दिशा है जिसमें कॉन्टेंट के ब्लॉक रखे जाते हैं. उदाहरण के लिए, अगर दो पैराग्राफ़ हैं, तो ब्लॉक फ़्लो वह होगा जहां दूसरा पैराग्राफ़ जाएगा. अंग्रेज़ी दस्तावेज़ में, ब्लॉक फ़्लो ऊपर से नीचे होता है. इसे ऊपर से नीचे टेक्स्ट के पैराग्राफ़ के हिसाब से बनाएं.
इनलाइन फ़्लो
इनलाइन फ़्लो से पता चलता है कि किसी वाक्य में टेक्स्ट किस तरह फ़्लो करता है.
अंग्रेज़ी दस्तावेज़ में इनलाइन फ़्लो बाएं से दाएं होता है.
अगर आपको अपने वेबपेज की दस्तावेज़ की भाषा को ऐरेबिक (<html lang="ar">) में बदलना है, तो इनलाइन फ़्लो दाईं से बाईं ओर होगा.
दस्तावेज़ के राइटिंग मोड में सेट की गई दिशा में टेक्स्ट फ़्लो करता है.
writing-mode प्रॉपर्टी की मदद से, टेक्स्ट के दिखने की दिशा बदली जा सकती है.
इसे पूरे दस्तावेज़ या अलग-अलग एलिमेंट पर लागू किया जा सकता है.
फ़्लो रिलेटिव
पहले कभी सीएसएस में,
हम सिर्फ़ उनके किनारों के हिसाब से मार्जिन जैसी प्रॉपर्टी ही लागू करते थे.
उदाहरण के लिए, margin-top को एलिमेंट के फ़िज़िकल टॉप पर लागू किया जाता है.
लॉजिकल प्रॉपर्टी का इस्तेमाल करने पर, margin-top margin-block-start हो जाता है.
इसका मतलब है कि भाषा और टेक्स्ट की दिशा चाहे जो भी हो, ब्लॉक फ़्लो में मार्जिन से जुड़े सही नियम होते हैं.
साइज़ बदलना
किसी एलिमेंट की तय चौड़ाई या ऊंचाई से ज़्यादा होने से रोकने के लिए, ऐसा नियम लिखें:
.my-element {
max-width: 150px;
max-height: 100px;
}
फ़्लो-रिलेटिव max-inline-size और max-block-size एक जैसे हैं.
min-height और min-width के बजाय, min-block-size और min-inline-size का भी इस्तेमाल किया जा सकता है.
लॉजिकल प्रॉपर्टी के साथ, ज़्यादा से ज़्यादा चौड़ाई और ऊंचाई का नियम ऐसा दिखेगा:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
शुरू और खत्म होने की तारीख
ऊपर, दाएं, नीचे और बाएं जैसे निर्देशों के बजाय, शुरू और खत्म होने की सुविधा का इस्तेमाल करें. इससे आपको ब्लॉक-स्टार्ट, इनलाइन-एंड, ब्लॉक-एंड, और इनलाइन-स्टार्ट की सुविधा मिलती है. इसकी मदद से, ऐसी सीएसएस प्रॉपर्टी को लागू किया जा सकता है जो राइटिंग मोड में हुए बदलावों के हिसाब से काम करती हैं.
उदाहरण के लिए, टेक्स्ट को दाईं ओर अलाइन करने के लिए, इस सीएसएस का इस्तेमाल किया जा सकता है:
p {
text-align: right;
}
अगर आपका मकसद पढ़ने के बजाय पेज को दाईं ओर दिखाना है,
तो यह काम का नहीं है.
लॉजिकल वैल्यू का इस्तेमाल करने पर, ज़्यादा काम की start और end वैल्यू मिलती हैं, जो टेक्स्ट की दिशा को मैप करती हैं.
टेक्स्ट अलाइनमेंट नियम अब ऐसा दिखता है:
p {
text-align: end;
}
स्पेस और पोज़िशन
margin, padding, और inset के लिए लॉजिकल प्रॉपर्टी, पोज़िशनिंग एलिमेंट की पोज़िशन तय करती हैं. साथ ही, इनसे यह तय किया जाता है कि राइटिंग मोड में ये एलिमेंट एक-दूसरे के साथ कैसे इंटरैक्ट करते हैं, आसान और ज़्यादा असरदार.
मार्जिन और पैडिंग से जुड़ी प्रॉपर्टी, अब भी निर्देशों के लिए डायरेक्ट मैपिंग हैं. हालांकि, मुख्य अंतर यह है कि जब राइटिंग मोड बदलता है, तो वे उसी के साथ बदल जाते हैं.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
यह padding के साथ स्पेस के अंदर कुछ वर्टिकल जोड़ता है और उसे margin के बाईं ओर से बाहर धकेल देता है.
top प्रॉपर्टी भी इसे नीचे की ओर शिफ़्ट करती है.
मिलती-जुलती लॉजिकल प्रॉपर्टी के साथ, यह ऐसा दिखेगा:
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
इससे padding के साथ स्पेस में कुछ इनलाइन जुड़ जाती है और margin के साथ इनलाइन-स्टार्ट से यह बाहर निकल जाती है.
inset-block प्रॉपर्टी इसे ब्लॉक-स्टार्ट से अंदर की ओर ले जाती है.
लॉजिकल प्रॉपर्टी वाला inset-block प्रॉपर्टी ही शॉर्टहैंड विकल्प नहीं है.
इस नियम को छोटा करने के लिए, मार्जिन और पैडिंग प्रॉपर्टी के शॉर्टहैंड वर्शन का इस्तेमाल किया जा सकता है.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
सीमाएं
लॉजिकल प्रॉपर्टी की मदद से भी border और border-radius को जोड़ा जा सकता है.
नीचे और दाईं ओर, दाईं ओर के दायरे के साथ एक बॉर्डर जोड़ने के लिए, आप इस तरह का नियम लिख सकते हैं:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
इसके अलावा, लॉजिकल प्रॉपर्टी को इस तरह से इस्तेमाल किया जा सकता है:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
border-end-end-radius में end-end, ब्लॉक एंड और इनलाइन एंड है.
इकाइयां
लॉजिकल प्रॉपर्टी में दो नई यूनिट मिलती हैं: vi और vb.
vi यूनिट, इनलाइन दिशा में व्यूपोर्ट के साइज़ का 1% होता है.
vw प्रॉपर्टी के बराबर नॉन-लॉजिकल प्रॉपर्टी है.
ब्लॉक की दिशा में, vb यूनिट, व्यूपोर्ट का 1% हिस्सा है.
vh प्रॉपर्टी के बराबर नॉन-लॉजिकल प्रॉपर्टी है.
ये यूनिट हमेशा पढ़ने की दिशा में मैप होंगी.
उदाहरण के लिए, अगर आपको किसी एलिमेंट को व्यूपोर्ट के उपलब्ध इनलाइन स्पेस का 80% हिस्सा लेना है, तो vi यूनिट का इस्तेमाल करने से, राइटिंग मोड वर्टिकल होने पर, उस साइज़ को ऊपर से नीचे अपने-आप स्विच कर देगा.
तार्किक गुणों का व्यावहारिक रूप से उपयोग करना
लॉजिकल प्रॉपर्टी और लिखने के मोड, सिर्फ़ अंतरराष्ट्रीय स्तर पर काम करने के लिए नहीं हैं. इनका इस्तेमाल करके, अलग-अलग तरह का यूज़र इंटरफ़ेस बनाया जा सकता है.
अगर आपके पास कोई ऐसा चार्ट है जिसमें X ऐक्सिस और Y ऐक्सिस पर लेबल हैं, तो Y लेबल पर मौजूद टेक्स्ट को वर्टिकल तौर पर पढ़ा जा सकता है.
डेमो के Y ऐक्सिस लेबल में vertical-rl का writing-mode है. इसलिए, दोनों लेबल पर एक ही margin वैल्यू का इस्तेमाल किया जा सकता है.
margin-block-start की वैल्यू दोनों लेबल पर लागू होती है, क्योंकि ब्लॉक स्टार्ट, Y ऐक्सिस पर दाईं ओर और X ऐक्सिस पर सबसे ऊपर होता है.
ब्लॉक-स्टार्ट साइड में लाल बॉर्डर होता है, ताकि आप उन्हें देख सकें.
आइकॉन से जुड़ी समस्या हल करना
अब हमने लॉजिकल प्रॉपर्टी के बारे में बात कर ली है. इस जानकारी को डिज़ाइन से जुड़ी उस समस्या में लागू किया जा सकता है जिसकी शुरुआत हमने की थी.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
मार्जिन को आइकॉन एलिमेंट के दाईं ओर लागू किया गया है.
आइकॉन और टेक्स्ट के बीच की स्पेसिंग के हिसाब से पढ़ने के लिए, margin-inline-end प्रॉपर्टी का इस्तेमाल करना ज़रूरी है.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
अब, पढ़ने की दिशा चाहे जो भी हो, आइकॉन सही जगह पर अपने-आप और स्पेस में सही जगह डालेगा.
आपने जो सीखा है उसकी जांच करें
लॉजिकल प्रॉपर्टी के बारे में अपनी जानकारी की जांच करें
आपके हाथ से लिखते समय, आपकी कलाई किस लॉजिकल ऐक्सिस पर चलती है?
inlineblockलॉजिकल प्रॉपर्टी से फ़ायदा पाने वाले सभी विकल्पों को चुनें
flex-start, block-end, और inline-startblock-start और inline.inline-size और max-block-size.border-end-end-radius.किसी शब्द के किस लॉजिकल हिस्से को अंडरलाइन किया जाता है?