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

सीएसएस पॉडकास्ट - 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 में 24px का font-size है, लाइन की ऊंचाई का आकलन 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 हिस्सा
सवाल तिमाही-मिलीमीटर 1Q = 1 सेंटीमीटर का 1/40वां
इंच इंच 1 इंच = 2.54 सें॰मी॰ = 96 पिक्सल
पीसी पिकास 1pc = 1 इंच का 1/6वां
pt पॉइंट 1pt = 1 इंच का 1/72वां
px पिक्सल 1px = 1 इंच का 1/96वां

रिलेटिव लंबाई

रिलेटिव लंबाई का हिसाब, प्रतिशत की तरह ही किसी बुनियादी वैल्यू के आधार पर लगाया जाता है. इन और प्रतिशत के बीच का अंतर यह है कि आपके पास एलिमेंट का साइज़, संदर्भ के हिसाब से तय करने का विकल्प होता है. इसका मतलब है कि सीएसएस में ch जैसी यूनिट हैं, जो टेक्स्ट के साइज़ का इस्तेमाल आधार के तौर पर करती हैं, और vw, जो व्यूपोर्ट (आपकी ब्राउज़र विंडो) की चौड़ाई पर आधारित है. रिस्पॉन्सिव होने की वजह से, वेब पर रिलेटिव लंबाई का इस्तेमाल करना खास तौर पर फ़ायदेमंद होता है.

फ़ॉन्ट-साइज़ की मिलती-जुलती इकाइयां

सीएसएस, रेंडर किए गए टाइपोग्राफ़ी के एलिमेंट के साइज़ के हिसाब से मददगार यूनिट उपलब्ध कराती है. जैसे, टेक्स्ट का साइज़ (em यूनिट) या टाइपफ़ेस के वर्णों की चौड़ाई (ch यूनिट).

यूनिट इनके हिसाब से:
ईएम फ़ॉन्ट साइज़ के हिसाब से, इसका मतलब है कि 1.5em का साइज़, पैरंट कंप्यूट किए गए फ़ॉन्ट साइज़ से 50% ज़्यादा होगा. (पुराने दौर में, कैपिटल लेटर "M" की ऊंचाई.
उदाहरण एलिमेंट के मौजूदा फ़ॉन्ट साइज़ में, x-height, अक्षर "x" या `.5em` में से किसका इस्तेमाल करना है, यह तय करने के लिए हेरिस्टिक.
cap एलिमेंट के मौजूदा फ़ॉन्ट साइज़ में, कैपिटल लेटर की ऊंचाई.
ch एलिमेंट के फ़ॉन्ट में, छोटे ग्लिफ़ का औसत वर्ण अडवांस (इसे "0" ग्लिफ़ से दिखाया जाता है).
ic एलिमेंट के फ़ॉन्ट में, पूरी चौड़ाई वाले ग्लिफ़ का औसत वर्ण अडवांस है. इसे "水" (CJK वॉटर आइडियोग्राफ़, U+6C34) ग्लिफ़ से दिखाया गया है.
rem रूट एलिमेंट का फ़ॉन्ट साइज़ (डिफ़ॉल्ट तौर पर यह 16 पिक्सल होता है).
lh एलिमेंट की लाइन की ऊंचाई.
एलएलएच रूट एलिमेंट की लाइन की ऊंचाई.
टेक्स्ट, सीएसएस, ऐसेंडर हाइट, डिसेंडर हाइट, और एक्स-हाइट के लेबल के साथ 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' इकाइयां, एक मान्य मिलता-जुलता डाइमेंशन होता है.
उदाहरण
अक्षर 'x' यूनिट, एक मान्य रिलेटिव डाइमेंशन.

निरपेक्ष और सापेक्ष इकाइयां अलग कैसे होती हैं?

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

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

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

संसाधन