टेक्स्ट को सटीक तरीके से अलाइन करना

समस्या

ब्राउज़र, टेक्स्ट वर्णों के ऊपर और नीचे अपने-आप अतिरिक्त खाली सफ़ेद जगह जोड़ते हैं. इससे लाइन की ऊंचाई और फ़ॉन्ट से जुड़ी मेट्रिक, जैसे कि असेंडर और डिसेंडर को अडजस्ट किया जा सकता है. इस "घोस्ट स्पेस" की वजह से, स्टैंडर्ड सीएसएस का इस्तेमाल करके पिक्सल-परफ़ेक्ट वर्टिकल अलाइनमेंट हासिल करना नामुमकिन हो जाता है.

सामान्य समस्याओं में ये शामिल हैं:

• गलत तरीके से अलाइन किए गए आइकॉन: align-items: center का इस्तेमाल करने पर भी, टेक्स्ट बगल के आइकॉन से विज़ुअल तौर पर नीचे या ऊपर दिखता है.
• गलत पैडिंग: padding: 12px वाले बटन में, फ़ॉन्ट की इंटरनल लीडिंग की वजह से, ऊपर या नीचे ज़्यादा जगह दिखती है.
• फ़्लश अलाइनमेंट: "मैजिक नंबर" नेगेटिव मार्जिन का इस्तेमाल किए बिना, कैपिटल लेटर के ऊपरी हिस्से को कंटेनर या बगल में मौजूद इमेज के ऊपरी हिस्से के साथ अलाइन नहीं किया जा सकता.

समस्या का हल

text-box-trim और text-box-edge प्रॉपर्टी (शॉर्टहैंड text-box) की मदद से, फ़ॉन्ट की खास मेट्रिक के आधार पर, इस इंटरनल लीडिंग को ट्रिम किया जा सकता है. टेक्स्ट बॉक्स को कैप-हाइट (कैपिटल लेटर का ऊपरी हिस्सा) और ऐल्फ़ाबेटिक बेसलाइन (ज़्यादातर लेटर का निचला हिस्सा) तक ट्रिम करके, यह पक्का किया जा सकता है कि एलिमेंट का बाउंडिंग बॉक्स, उसके विज़ुअल कॉन्टेंट से मैच करता हो.

लागू करने की रणनीति

1. ज़रूरी: टेक्स्ट वाले एलिमेंट पर text-box-trim: trim-both (या text-box शॉर्टहैंड) लागू करें.
2. ज़रूरी: text-box-edge का इस्तेमाल करके, यह बताएं कि ट्रिम करने के लिए किन मेट्रिक का इस्तेमाल करना है. यूज़र इंटरफ़ेस (यूआई) के ज़्यादातर अलाइनमेंट के लिए, cap alphabetic का इस्तेमाल करें.
3. फ़्लेक्स या ग्रिड कंटेनर में विज़ुअल को वर्टिकल तौर पर सेंटर में लाने के लिए, इसका इस्तेमाल करें.
4. ज़रूर इस्तेमाल करें, ताकि यह पक्का किया जा सके कि आपकी सीएसएस padding वैल्यू, टेक्स्ट और कंटेनर के किनारे के बीच के विज़ुअल गैप से मेल खाती हों.
5. इसे लंबे बॉडी टेक्स्ट पर इस्तेमाल न करें. ऐसे टेक्स्ट को पढ़ने में आसानी हो, इसके लिए लाइनों के बीच सामान्य स्पेसिंग ज़रूरी है. यह हेडिंग, बटन, और यूज़र इंटरफ़ेस (यूआई) लेबल के लिए सबसे सही है.

लागू करने के बारे में जानकारी

इस्तेमाल का पहला उदाहरण: बैज के लिए इंटरनल लीडिंग को ट्रिम करना

अलग-अलग फ़ॉन्ट में, टेक्स्ट के ऊपर और नीचे पहले से मौजूद स्पेस की मात्रा अलग-अलग होती है. इस वजह से, किसी डिज़ाइन को मैच करने या बैज में टेक्स्ट को विज़ुअल तौर पर बीच में रखने में समस्याएं आ सकती हैं. जब आपको किसी कंटेनर की पैडिंग को टेक्स्ट के हिसाब से सेट करना हो, तो text-box: trim-both cap alphabetic का इस्तेमाल करें. यह सुविधा, बैज या टैग जैसे डेंस यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट के लिए खास तौर पर मददगार है. इससे पैडिंग, टेक्स्ट के किनारे से शुरू होती है.

.badge {
  padding: 10px;
  background: hotpink;
  border-radius: 10px;
  /* 
    Trims the top to the cap-height and 
    the bottom to the alphabetic baseline.
  */
  text-box: trim-both cap alphabetic;
}

इस्तेमाल का दूसरा उदाहरण: आइकॉन के साथ टेक्स्ट को बीच में अलाइन करना

टेक्स्ट और आइकॉन को अलाइन करने के लिए फ़्लेक्सबॉक्स का इस्तेमाल करने पर, "घोस्ट स्पेस" की वजह से टेक्स्ट अक्सर थोड़ा सा ऑफ़-सेंटर दिखता है. बॉक्स को ट्रिम करने से यह पक्का होता है कि लेआउट इंजन, अलाइनमेंट के लिए लेटर की असल ऊंचाई का इस्तेमाल करे.

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
/* 
  text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
  /* 
    The flex container now centers against the 
    visible letters, not the invisible font box.
  */
  text-box: trim-both cap alphabetic;
}

इस्तेमाल का तीसरा उदाहरण: टेक्स्ट को ऊपरी किनारों के साथ अलाइन करना

किसी हेडिंग को उसके बगल में मौजूद इमेज या सजावटी एलिमेंट के सबसे ऊपरी हिस्से के साथ अलाइन करने के लिए, trim-start cap alphabetic का इस्तेमाल करें. भले ही, वीडियो के आखिर के हिस्से को ट्रिम न किया जाए, लेकिन आखिर के हिस्से की जानकारी देना ज़रूरी है.

.hero {
  display: flex;
  align-items: flex-start;
}

h1 {
  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
  text-box: trim-start cap alphabetic;
}

सबसे सही तरीके

• text-box को कम शब्दों में लिखने के लिए, text-box: <trim-direction> <edges> का इस्तेमाल करें.
• हमेशा दोनों किनारों की जानकारी दें. भले ही, सिर्फ़ एक किनारे को ट्रिम किया जा रहा हो. हालांकि, डिफ़ॉल्ट text किनारे का इस्तेमाल करने पर ऐसा करना ज़रूरी नहीं है.
• स्पेसिंग को कंट्रोल करने के लिए, line-height के साथ इस्तेमाल करें. ट्रिम करने से, टेक्स्ट की पहली और आखिरी लाइन से पहले की लीडिंग हट जाती है. हालांकि, line-height अब भी कई लाइनों वाले टेक्स्ट में, लाइनों के बीच की दूरी पर असर डालता है.
• हर एलिमेंट पर लागू न करें. इसका इस्तेमाल सिर्फ़ तब करें, जब सटीक अलाइनमेंट की ज़रूरत हो.

फ़ॉलबैक रणनीतियां

text-box एक परतदार वृद्धि है. जिन ब्राउज़र में यह सुविधा काम नहीं करती उनमें टेक्स्ट, डिफ़ॉल्ट लीडिंग के साथ रेंडर होगा. आपका लेआउट अब भी काम करेगा, लेकिन यह थोड़ा कम सटीक होगा. इसके लिए, किसी खास फ़ॉलबैक कोड की ज़रूरत नहीं होती, क्योंकि पुराने ब्राउज़र इन प्रॉपर्टी को अनदेखा कर देते हैं.

ध्यान में रखने लायक अन्य बातें

1. फ़ॉन्ट मेट्रिक: अलग-अलग फ़ॉन्ट की इंटरनल मेट्रिक अलग-अलग होती हैं. cap alphabetic एक भरोसेमंद डिफ़ॉल्ट है. हालांकि, कुछ फ़ॉन्ट या इस्तेमाल के उदाहरणों में, लोअरकेस के बेहतर अलाइनमेंट के लिए ex (x-हाइट) की ज़रूरत हो सकती है.
2. मल्टी-लाइन टेक्स्ट: ट्रिमिंग की सुविधा, ब्लॉक की पहली और आखिरी लाइन पर लागू होती है. इंटरनल लाइन पर कोई असर नहीं पड़ता.