साइज़ बदलने वाली यूनिट

सीएसएस पॉडकास्ट - 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 रूट एलिमेंट की लाइन की ऊंचाई.
सीएसएस, बढ़ते हुए क्रम में ऊंचाई, डिसेंडर ऊंचाई, और x-height के लिए लेबल के साथ 10 गुना बेहतर हो जाती है. x-height से 1ex और 0 से 1ch का पता चलता है

व्यूपोर्ट के हिसाब से इकाइयां

आपके पास व्यूपोर्ट (ब्राउज़र विंडो) के डाइमेंशन का इस्तेमाल, रिलेटिव बेसिस के तौर पर करने का विकल्प है. ये यूनिट, व्यूपोर्ट के उपलब्ध स्पेस को बांटती हैं.

यूनिट के हिसाब से
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 इकाई का मतलब डॉट प्रति इंच होता है. इसके लिए, बहुत ज़्यादा रिज़ॉल्यूशन वाली स्क्रीन का पता लगाना एक काम का कॉन्टेक्स्ट है. जैसे, मीडिया क्वेरी में रेटिना डिसप्ले और ज़्यादा रिज़ॉल्यूशन वाली इमेज दिखाना.

देखें कि आपको क्या समझ आया

साइज़ बदलने के बारे में अपनी जानकारी को परखें

इनमें से कौनसे डाइमेंशन मान्य हैं?

सेमी
सेंटीमीटर, यह एक मान्य डाइमेंशन है.
ui
यूज़र इंटरफ़ेस, सीएसएस में डाइमेंशन नहीं है.
में
इंच, एक मान्य डाइमेंशन है.
आठवां
सीएसएस डाइमेंशन नहीं है
पिक्सल
पिक्सल, एक मान्य ऐब्सलूट डाइमेंशन.
ch
वर्ण इकाइयां, कोई मान्य रिलेटिव डाइमेंशन.
ux
सीएसएस में, उपयोगकर्ता अनुभव एक डाइमेंशन नहीं होता.
em
अक्षर 'M' इकाइयां, एक मान्य सापेक्ष आयाम हैं.
ex
अक्षर 'x' यूनिट, एक मान्य रिलेटिव डाइमेंशन.

एब्सोलूट और रिलेटिव यूनिट में क्या अंतर है?

एब्सोलूट वैल्यू नहीं बदल सकतीं, लेकिन रिलेटिव यूनिट बदल सकती हैं
निरपेक्ष मान बदल सकते हैं, लेकिन उसके लिए जिस आधार का आकलन करते हैं उसे नहीं बदल सकते.
किसी एक शेयर की गई बेस वैल्यू के आधार पर, पूरी लंबाई का हिसाब लगाया जाता है. इसमें रिलेटिव यूनिट की तुलना, बदलने वाली बेस वैल्यू से की जाती है.
रिलेटिव यूनिट, संदर्भ के हिसाब से ज़्यादा अडैप्टिव और फ़्लुइड होती हैं. हालांकि, एब्सोलूट यूनिट में एक ऐसी ताकत और अनुमान लगाने की सुविधा होती है जो कुछ डिज़ाइन के लिए बुनियादी हो सकती है.

व्यूपोर्ट यूनिट, एब्सोलूट होती हैं.

सही
ये वैल्यू, किसी डिवाइस की स्क्रीन के साइज़ के हिसाब से नहीं होतीं. ये वैल्यू, किसी व्यूपोर्ट के हिसाब से होती हैं. व्यूपोर्ट, कोई iframe या वेबव्यू हो सकता है.
गलत
ये आंकड़े, उस दस्तावेज़ की विंडो के हिसाब से होते हैं जिसमें इन्हें बनाया गया था. यह हो सकता है कि यह विंडो, डिवाइस की स्क्रीन से अलग हो या फिर एक जैसी हो.

संसाधन