सीएसएस पॉडकास्ट - 008: साइज़ यूनिट
वेब एक रिस्पॉन्सिव मीडियम है, लेकिन कभी-कभी आप इंटरफ़ेस की क्वालिटी को बेहतर बनाने के लिए इसके डाइमेंशन कंट्रोल करना चाहते हैं. इसका एक अच्छा उदाहरण यह है कि टेक्स्ट को आसानी से पढ़ा जा सके, इसके लिए लाइन की लंबाई को सीमित करना. वेब जैसे सुविधाजनक माध्यम में आप यह कैसे करेंगे?
इस मामले में,
ch
यूनिट का इस्तेमाल किया जा सकता है, जो रेंडर किए गए फ़ॉन्ट में, उसके कंप्यूट किए गए साइज़ के हिसाब से "0" वर्ण की चौड़ाई के बराबर है.
इस इकाई की मदद से टेक्स्ट की चौड़ाई को, टेक्स्ट के साइज़ के हिसाब से डिज़ाइन की गई इकाई के ज़रिए सीमित किया जा सकता है. इससे टेक्स्ट के साइज़ की परवाह किए बिना, अनुमान लगाने लायक कंट्रोल किया जा सकता है.
ch
यूनिट उन बड़ी इकाइयों में से एक है जो इस उदाहरण जैसे खास कॉन्टेक्स्ट के लिए मददगार हैं.
संख्याएं
संख्याओं का इस्तेमाल 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%;
}
ऊपर दिए गए उदाहरण में यह मानते हुए कि लेआउट डिफ़ॉल्ट box-sizing: content-box
का इस्तेमाल करता है, div p
की चौड़ाई 150px
है.
अगर 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 सेंटीमीटर के काले आयत के रूप में प्रिंट होगा.
ध्यान रखें, सीएसएस का इस्तेमाल सिर्फ़ डिजिटल कॉन्टेंट के लिए ही नहीं, बल्कि प्रिंट कॉन्टेंट को स्टाइल देने के लिए भी किया जाता है.
प्रिंट के लिए डिज़ाइन करते समय, तय की गई फ़ोटो का इस्तेमाल किया जा सकता है.
इकाई | नाम | इसके बराबर |
---|---|---|
सें॰मी॰ | सेंटीमीटर | 1 सेंटीमीटर = 96 पिक्सल/2.54 |
मि॰मी॰ | मिलीमीटर | 1mm = 1 सेंटीमीटर का 1/10वां |
सवाल | क्वॉर्टर-मिलीमीटर | 1Q = 1 सेंटीमीटर का 1/40वां हिस्सा |
में | इंच | 1in = 2.54 सेंटीमीटर = 96 पिक्सल |
pc | पिकस | 1pc = 1 इंच का 1/6वां |
पॉइंट | पॉइंट | 1pt = 1in का 1/72वां |
पिक्सल | पिक्सल | 1px = 1in का 1/96वां |
तुलनात्मक लंबाई
मिलती-जुलती लंबाई का हिसाब, बेस वैल्यू के हिसाब से लगाया जाता है. यह वैल्यू, प्रतिशत की तरह होती है.
इनमें और प्रतिशत में अंतर यह है कि आपके पास एलिमेंट का साइज़ बदलने का विकल्प होता है.
इसका मतलब है कि सीएसएस में ch
जैसी इकाइयां हैं, जो टेक्स्ट के साइज़ को आधार के तौर पर इस्तेमाल करती हैं. साथ ही, vw
जो व्यूपोर्ट (आपकी ब्राउज़र विंडो) की चौड़ाई पर आधारित होती है.
सापेक्ष लंबाई, खास तौर पर वेब पर अपनी रिस्पॉन्सिव प्रकृति की वजह से उपयोगी होती है.
फ़ॉन्ट-साइज़-रिलेटिव यूनिट
सीएसएस मददगार यूनिट देता है जो रेंडर किए गए टाइपोग्राफ़ी के एलिमेंट के साइज़ के हिसाब से होती है.
जैसे, टेक्स्ट का साइज़ (em
यूनिट) या टाइपफ़ेस वर्णों की चौड़ाई (ch
यूनिट).
यूनिट | इसके सापेक्ष: |
---|---|
ईएम | फ़ॉन्ट साइज़ के मुकाबले, यानी 1.5em, अपने पैरंट के मूल कंप्यूट किए गए फ़ॉन्ट साइज़ से 50% ज़्यादा होगा. (पुराने समय से, बड़े अक्षर "M" की ऊंचाई). |
उदाहरण | यह तय करने का अनुमान है कि एलिमेंट के कंप्यूट किए गए मौजूदा फ़ॉन्ट साइज़ में, x-height, अक्षर "x" या `.5em` में से किसका इस्तेमाल किया जाए. |
कैप | एलिमेंट के कंप्यूट किए गए मौजूदा फ़ॉन्ट साइज़ में बड़े अक्षरों की ऊंचाई. |
ch | एलिमेंट के फ़ॉन्ट में छोटे ग्लिफ़ का औसत कैरेक्टर एडवांस ("0" ग्लिफ़ से दिखाया गया है). |
ic | एलिमेंट के फ़ॉन्ट में पूरी चौड़ाई वाले ग्लिफ़ का औसत कैरेक्टर ऐडवांस, जैसा कि "水" (CJK वॉटर आइडियोग्राफ़, U+6C34) ग्लिफ़ से दिखाया जाता है. |
रेम | रूट एलिमेंट का फ़ॉन्ट साइज़ (डिफ़ॉल्ट तौर पर 16 पिक्सल होता है). |
lh | एलिमेंट की लाइन की ऊंचाई. |
आरएलएच | रूट एलिमेंट की लाइन की ऊंचाई. |
व्यूपोर्ट-रिलेटिव इकाइयां
व्यूपोर्ट (ब्राउज़र विंडो) के डाइमेंशन का इस्तेमाल रिलेटिव के तौर पर किया जा सकता है. ये इकाइयां, उपलब्ध व्यूपोर्ट स्पेस का हिस्सा होती हैं.
यूनिट | इसके सापेक्ष |
---|---|
vw | व्यूपोर्ट की चौड़ाई का 1%. लोग इस यूनिट का इस्तेमाल फ़ॉन्ट का साइज़ बदलने के लिए करते हैं. जैसे, पेज की चौड़ाई के हिसाब से हेडर के फ़ॉन्ट का साइज़ बदलना, ताकि उपयोगकर्ता के साइज़ बदलने पर फ़ॉन्ट का साइज़ भी बदल जाए. |
वीएच | व्यूपोर्ट की ऊंचाई का 1%. इसका इस्तेमाल यूज़र इंटरफ़ेस (यूआई) में आइटम व्यवस्थित करने के लिए किया जा सकता है. उदाहरण के लिए, अगर आपके पास फ़ुटर टूलबार है. |
vi | रूट एलिमेंट के इनलाइन ऐक्सिस में व्यूपोर्ट के साइज़ का 1%. ऐक्सिस का मतलब है लिखने के मोड. अंग्रेज़ी जैसे हॉरिज़ॉन्टल राइटिंग मोड में, इनलाइन ऐक्सिस हॉरिज़ॉन्टल होता है. कुछ जैपनीज़ टाइपफ़ेस जैसे वर्टिकल राइटिंग मोड में, इनलाइन ऐक्सिस सबसे ऊपर से नीचे की ओर चलता है. |
vb | रूट एलिमेंट के ब्लॉक ऐक्सिस में व्यूपोर्ट के साइज़ का 1%. ब्लॉक ऐक्सिस के लिए, यह भाषा की दिशा होगी. अंग्रेज़ी जैसी एलटीआर भाषाओं में वर्टिकल ब्लॉक ऐक्सिस दिया जाता है, क्योंकि अंग्रेज़ी भाषा के पाठक पेज को ऊपर से नीचे पार्स करते हैं. वर्टिकल राइटिंग मोड में हॉरिज़ॉन्टल ब्लॉक ऐक्सिस है. |
वीमिन | व्यूपोर्ट के छोटे डाइमेंशन का 1% हिस्सा. |
वीमैक्स | व्यूपोर्ट के बड़े डाइमेंशन का 1%. |
div {
width: 10vw;
}
p {
max-width: 60ch;
}
इस उदाहरण में, div
, व्यूपोर्ट की चौड़ाई का 10% होगा, क्योंकि 1vw
, व्यूपोर्ट की चौड़ाई का 1% है.
p
एलिमेंट में 60ch
का max-width
है. इसका मतलब है कि आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए फ़ॉन्ट और साइज़ में, 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
यूनिट का मतलब है डॉट प्रति इंच.
बहुत हाई रिज़ॉल्यूशन वाली स्क्रीन का पता लगाना इसका एक उपयोगी संदर्भ है,
जैसे कि रेटिना को मीडिया क्वेरी में डिसप्ले करके हाई रिज़ॉल्यूशन वाली इमेज दिखाना.
आपने जो सीखा है उसकी जांच करें
साइज़ तय करने के बारे में अपनी जानकारी को परखें
इनमें से कौनसे डाइमेंशन मान्य हैं?
निरपेक्ष और सापेक्ष इकाइयां कैसे भिन्न हैं?
व्यूपोर्ट इकाइयों का कुल मान होता है.