सीएसएस पॉडकास्ट - 008: साइज़िंग यूनिट
वेब एक रिस्पॉन्सिव मीडियम है, लेकिन कभी-कभी आप इंटरफ़ेस की क्वालिटी को बेहतर बनाने के लिए, इसके डाइमेंशन को कंट्रोल करना चाहते हैं. इसका एक अच्छा उदाहरण है, पढ़ने में आसानी के लिए लाइन की लंबाई को सीमित करना. वेब जैसे आसान प्लैटफ़ॉर्म पर ऐसा कैसे किया जा सकता है?
इस मामले में,
ch
यूनिट का इस्तेमाल किया जा सकता है, जो रेंडर किए गए फ़ॉन्ट में "0" वर्ण की चौड़ाई के बराबर होती है.
यह तय किए गए साइज़ के हिसाब से होता है.
इस यूनिट की मदद से, टेक्स्ट की चौड़ाई को किसी ऐसी यूनिट से सीमित किया जा सकता है जिसे टेक्स्ट का साइज़ तय करने के लिए डिज़ाइन किया गया है. इससे, टेक्स्ट के साइज़ के बावजूद, उसे कंट्रोल किया जा सकता है.
ch
यूनिट, उन कुछ यूनिट में से एक है जो इस उदाहरण जैसे खास संदर्भों के लिए मददगार होती हैं.
Numbers
संख्याओं का इस्तेमाल opacity
, line-height
, और rgb
में कलर चैनल की वैल्यू तय करने के लिए भी किया जाता है.
संख्याएं, यूनिट के बिना पूर्णांक (1, 2, 3, 100) और दशमलव (.1, .2, .3) होती हैं.
कॉन्टेक्स्ट के आधार पर संख्याओं का मतलब होता है.
उदाहरण के लिए, line-height
तय करते समय,
अगर किसी संख्या को मापने की इकाई के बिना तय किया जाता है, तो वह संख्या किसी अनुपात को दिखाती है:
p {
font-size: 24px;
line-height: 1.5;
}
इस उदाहरण में, 1.5
, p
एलिमेंट के कंप्यूट किए गए पिक्सल के फ़ॉन्ट साइज़ के 150% के बराबर है.
इसका मतलब है कि अगर p
का font-size
24px
है, तो लाइन की ऊंचाई का हिसाब 36px
के तौर पर लगाया जाएगा.
नंबरों का इस्तेमाल इन जगहों पर भी किया जा सकता है:
- फ़िल्टर के लिए वैल्यू सेट करते समय:
filter: sepia(0.5)
, एलिमेंट पर50%
सेपिया फ़िल्टर लागू करता है. - ओपैसिटी सेट करते समय:
opacity: 0.5
,50%
ओपैसिटी लागू करता है. - कलर चैनलों में:
rgb(50, 50, 50)
, जहां कलर वैल्यू सेट करने के लिए, 0-255 वैल्यू का इस्तेमाल किया जा सकता है. रंगों के बारे में जानकारी देने वाला लेसन देखें. - किसी एलिमेंट को बदलने के लिए:
transform: scale(1.2)
, एलिमेंट को उसके शुरुआती साइज़ के 120% तक स्केल करता है.
प्रतिशत
सीएसएस में प्रतिशत का इस्तेमाल करते समय, आपको यह जानना होगा कि प्रतिशत का हिसाब कैसे लगाया जाता है.
उदाहरण के लिए, width
का हिसाब, पैरंट एलिमेंट में उपलब्ध चौड़ाई के प्रतिशत के तौर पर लगाया जाता है.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%;
}
ऊपर दिए गए उदाहरण में, div p
की चौड़ाई 150px
है. ऐसा इसलिए है, क्योंकि लेआउट में डिफ़ॉल्ट box-sizing: content-box
का इस्तेमाल किया गया है.
अगर margin
या padding
को प्रतिशत के तौर पर सेट किया जाता है, तो वे पैरंट एलिमेंट की चौड़ाई का हिस्सा होंगे.
div {
width: 300px;
height: 100px;
}
div p {
margin-top: 50%; /* calculated: 150px */
padding-left: 50%; /* calculated: 150px */
}
ऊपर दिए गए स्निपेट में, margin-top
और padding-left
, दोनों का हिसाब 150px
के तौर पर लगाया जाएगा.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%; /* calculated: 150px */
transform: translateX(10%); /* calculated: 15px */
}
अगर transform
वैल्यू को प्रतिशत के तौर पर सेट किया जाता है,
तो यह ट्रांसफ़ॉर्म सेट वाले एलिमेंट पर आधारित होता है.
इस उदाहरण में, p
की translateX
वैल्यू 10%
और width
की वैल्यू 50%
है.
सबसे पहले, यह हिसाब लगाएं कि चौड़ाई कितनी होगी: 150px
, क्योंकि यह पैरंट की चौड़ाई का 50% है.
इसके बाद, 150px
में से 10%
लें, जो कि 15px
है.
डाइमेंशन और लंबाई
किसी संख्या में इकाई जोड़ने पर, वह डाइमेंशन बन जाता है.
उदाहरण के लिए, 1rem
एक डाइमेंशन है.
इस संदर्भ में, किसी संख्या से जुड़ी इकाई को स्पेसिफ़िकेशन में डाइमेंशन टोकन कहा जाता है.
लंबाई, डाइमेंशन होते हैं जो दूरी के बारे में बताते हैं. ये ऐब्सोल्यूट या रिलेटिव हो सकते हैं.
एब्सोल्यूट लंबाई
सभी लम्बाई को एक ही आधार पर फ़िल्टर किया जाता है
जिससे उनका अनुमान लगाया जा सकता है, भले ही उनका इस्तेमाल आपकी सीएसएस में किया जाए.
उदाहरण के लिए, अगर आपने अपने एलिमेंट का साइज़ तय करने के लिए cm
का इस्तेमाल किया है और फिर उसे प्रिंट किया है, तो उसकी तुलना एक रूलर से करने पर, आपको सटीक साइज़ दिखेगा.
div {
width: 10cm;
height: 5cm;
background: black;
}
अगर आपने इस पेज को प्रिंट किया था, तो div
10x5 सेंटीमीटर के काले रेक्टैंगल के तौर पर प्रिंट होगा.
ध्यान रखें कि सीएसएस का इस्तेमाल सिर्फ़ डिजिटल कॉन्टेंट के लिए नहीं, बल्कि प्रिंट कॉन्टेंट को स्टाइल देने के लिए भी किया जाता है.
प्रिंट के लिए डिज़ाइन करते समय, ऐब्सलूट लंबाई वाली फ़ोटो काफ़ी कारगर साबित हो सकती हैं.
इकाई | नाम | इसके बराबर |
---|---|---|
cm | सेंटीमीटर | 1 सेंटीमीटर = 96 पिक्सल/2.54 |
मिलीमीटर | मिलीमीटर | 1मि॰मी॰ = 1 सें॰मी॰ का 1/10वां हिस्सा |
सवाल | चौथाई मिलीमीटर | 1 क्विंटाइल = 1 सेंटीमीटर का 1/40th |
in | इंच | 1 इंच = 2.54 सें॰मी॰ = 96 पिक्सल |
pc | पिकास | 1pc = 1 इंच का 1/6 हिस्सा |
pt | पॉइंट | 1 पॉइंट = 1 इंच का 1/72 हिस्सा |
px | पिक्सल | 1 पिक्सल = 1 इंच का 1/96वां हिस्सा |
रिलेटिव लंबाई
तुलनात्मक लंबाई की गणना आधार मान के आधार पर की जाती है, जो प्रतिशत की तरह ही होती है.
इनके और प्रतिशत में यह अंतर होता है कि एलिमेंट के साइज़ को कॉन्टेक्स्ट के हिसाब से सेट किया जा सकता है.
इसका मतलब है कि सीएसएस में ch
जैसी यूनिट होती हैं, जो टेक्स्ट साइज़ को आधार के तौर पर इस्तेमाल करती हैं और vw
, जो व्यूपोर्ट (आपकी ब्राउज़र विंडो) की चौड़ाई पर आधारित होती है.
रिस्पॉन्सिव होने की वजह से, वेब पर रिलेटिव लंबाई का इस्तेमाल करना खास तौर पर फ़ायदेमंद होता है.
फ़ॉन्ट-साइज़ की मिलती-जुलती इकाइयां
सीएसएस, रेंडर किए गए टाइपोग्राफ़ी के एलिमेंट के साइज़ के हिसाब से मददगार यूनिट उपलब्ध कराती है. जैसे, टेक्स्ट का साइज़ (em
यूनिट) या टाइपफ़ेस के वर्णों की चौड़ाई (ch
यूनिट).
यूनिट | इनके हिसाब से: |
---|---|
em | फ़ॉन्ट साइज़ के हिसाब से, 1.5em अपने पैरंट के हिसाब से तय किए गए फ़ॉन्ट साइज़ से 50% बड़ा होगा. (इतिहास के हिसाब से, कैपिटल लेटर "M" की ऊंचाई). |
ex | एलिमेंट के मौजूदा फ़ॉन्ट साइज़ में, x-height, अक्षर "x" या `.5em` में से किसका इस्तेमाल करना है, यह तय करने के लिए हेरिस्टिक. |
cap | एलिमेंट के मौजूदा फ़ॉन्ट साइज़ में, कैपिटल लेटर की ऊंचाई. |
च | एलिमेंट के फ़ॉन्ट में, छोटे ग्लिफ़ का औसत वर्ण अडवांस (इसे "0" ग्लिफ़ से दिखाया जाता है). |
ic | एलिमेंट के फ़ॉन्ट में, पूरी चौड़ाई वाले ग्लिफ़ का औसत वर्ण अडवांस है. इसे "水" (CJK वॉटर आइडियोग्राफ़, U+6C34) ग्लिफ़ से दिखाया गया है. |
rem | रूट एलिमेंट का फ़ॉन्ट साइज़ (डिफ़ॉल्ट रूप से 16 पिक्सल). |
एलएच | एलिमेंट की लाइन की ऊंचाई. |
rlh | रूट एलिमेंट की लाइन की ऊंचाई. |
व्यूपोर्ट के हिसाब से इकाइयां
आपके पास व्यूपोर्ट (ब्राउज़र विंडो) के डाइमेंशन का इस्तेमाल, रिलेटिव बेसिस के तौर पर करने का विकल्प है. ये यूनिट, व्यूपोर्ट के उपलब्ध स्पेस को बांटती हैं.
यूनिट | के हिसाब से |
---|---|
vw | व्यूपोर्ट की चौड़ाई का 1%. लोग इस यूनिट का इस्तेमाल, फ़ॉन्ट से जुड़ी शानदार ट्रिक करने के लिए करते हैं. जैसे, पेज की चौड़ाई के आधार पर हेडर फ़ॉन्ट का साइज़ बदलना, ताकि उपयोगकर्ता जब साइज़ बदले, तो फ़ॉन्ट का साइज़ भी बदल जाए. |
vh | व्यूपोर्ट की ऊंचाई का 1%. इसका इस्तेमाल करके, यूज़र इंटरफ़ेस (यूआई) में आइटम व्यवस्थित किए जा सकते हैं. उदाहरण के लिए, अगर आपके पास फ़ुटर टूलबार है. |
vi | रूट एलिमेंट के इनलाइन ऐक्सिस में, व्यूपोर्ट के साइज़ का 1%. ऐक्सिस का मतलब, लिखने के मोड से है. अंग्रेज़ी जैसे हॉरिज़ॉन्टल लेखन मोड में, इनलाइन ऐक्सिस हॉरिज़ॉन्टल होता है. कुछ जैपनीज़ टाइपफ़ेस जैसे वर्टिकल राइटिंग मोड में, इनलाइन ऐक्सिस ऊपर से नीचे की ओर चलता है. |
vb | रूट एलिमेंट के ब्लॉक ऐक्सिस में, व्यूपोर्ट के साइज़ का 1%. ब्लॉक अक्ष के लिए, यह भाषा की दिशा होगी. अंग्रेज़ी जैसी एलटीआर भाषाओं में वर्टिकल ब्लॉक ऐक्सिस होगा, क्योंकि अंग्रेज़ी भाषा के रीडर, पेज को ऊपर से नीचे तक पार्स करते हैं. वर्टिकल राइटिंग मोड में, हॉरिज़ॉन्टल ब्लॉक ऐक्सिस होता है. |
vmin | व्यूपोर्ट के छोटे डाइमेंशन का 1%. |
vmax | व्यूपोर्ट के बड़े डाइमेंशन का 1%. |
div {
width: 10vw;
}
p {
max-width: 60ch;
}
इस उदाहरण में, div
व्यूपोर्ट की चौड़ाई का 10% होगा, क्योंकि 1vw
व्यूपोर्ट की चौड़ाई का 1% है.
p
एलिमेंट का max-width
60ch
है
इसका मतलब है कि यह एलिमेंट, कैलकुलेट किए गए फ़ॉन्ट और साइज़ में 60 "0" वर्णों से ज़्यादा चौड़ा नहीं हो सकता.
अन्य इकाइयां
कुछ अन्य इकाइयां भी हैं, जिन्हें खास तरह की वैल्यू के साथ इस्तेमाल करने के लिए तय किया गया है.
ऐंगल की इकाइयां
रंग मॉड्यूल में, हमने ऐंगल यूनिट पर गौर किया. ये डिग्री वैल्यू, जैसे कि hsl
का रंग तय करने में मदद करती हैं.
ये ट्रांसफ़ॉर्म फ़ंक्शन में एलिमेंट को घुमाने के लिए भी काम के होते हैं.
div {
width: 150px;
height: 150px;
transform: rotate(60deg);
}
deg
ऐंगल यूनिट का इस्तेमाल करके, div
को उसके सेंटर ऐक्सिस पर 90° घुमाया जा सकता है.
div {
background-image: url('a-low-resolution-image.jpg');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
div {
background-image: url('a-high-resolution-image.jpg');
}
}
रिज़ॉल्यूशन की इकाइयां
पिछले उदाहरण में, min-resolution
की वैल्यू 192dpi
है.
dpi
इकाई का मतलब डॉट प्रति इंच होता है.
इसके लिए, बहुत ज़्यादा रिज़ॉल्यूशन वाली स्क्रीन का पता लगाना एक काम का कॉन्टेक्स्ट है. जैसे, मीडिया क्वेरी में रेटिना डिसप्ले और ज़्यादा रिज़ॉल्यूशन वाली इमेज दिखाना.
देखें कि आपको क्या समझ आया
साइज़ बदलने के बारे में अपनी जानकारी को परखें
इनमें से कौनसे डाइमेंशन मान्य हैं?
एब्सोलूट और रिलेटिव यूनिट में क्या अंतर है?
व्यूपोर्ट यूनिट, एब्सोलूट होती हैं.