फ़्रंटएंड इंटरव्यू: फ़ॉन्ट-मेट्रिक वर्टिकल अलाइनमेंट को ठीक करने के लिए आप text-box-trim का उपयोग कैसे करेंगे?

प्रॉम्प्ट और उपयोग का परिदृश्य (Use case)

डिज़ाइन सिस्टम में बटन, बैज और हेडिंग अक्सर विज़ुअल सेंटर में अलाइन किए जाते हैं, जबकि CSS लाइन बॉक्स फ़ॉन्ट के ऊपरी और निचले half-leading को बनाए रखते हैं। समझाइए कि टेक्स्ट बॉक्स को नियंत्रित करने के लिए text-box-trim और text-box-edge का उपयोग कैसे करें, सीमित ब्राउज़र सपोर्ट होने पर इसे प्रोडक्शन में कैसे लागू करें, और फ़ॉन्ट लोडिंग, राइटिंग मोड्स और एक्सेसिबिलिटी को कैसे ध्यान में रखें।

इंटरव्यूअर क्या जांच रहा है

• ग्लिफ़्स (glyphs), फ़ॉन्ट मेट्रिक्स, लाइन बॉक्स और एलिमेंट बॉक्स मॉडल में स्पष्ट अंतर करना।
• start, end और two-sided ट्रिमिंग को सटीकता से समझाना।
• text-box-edge के साथ cap, ex, text, alphabetic या leading एजेस का चयन करना।
• लॉजिकल ब्लॉक दिशा, फ़ॉन्ट फ़ॉलबैक और प्रोग्रेसिव एन्हांसमेंट को संभालना।
• वास्तविक ब्राउज़रों, फ़ॉन्ट्स और एक्सेसिबिलिटी साक्ष्यों के साथ परिणाम को सत्यापित करना।

पहले स्पष्ट करने योग्य प्रश्न

• क्या लक्ष्य ऑप्टिकल सेंटरिंग है, क्रॉस-फ़ॉन्ट स्थिरता है, या एक निश्चित line-height और बेसलाइन है?
• क्या कॉम्पोनेन्ट इस फ़ीचर को केवल सपोर्ट करने वाले ब्राउज़रों में सक्षम कर सकता है?
• दायरे (scope) में कौन-से फ़ॉन्ट, साइज़, भाषाएं, राइटिंग मोड्स और ज़ूम रेंज शामिल हैं?
• क्या टेक्स्ट रैप हो सकता है, और क्या फ़ोकस रिंग और हिट एरिया (hit area) अपरिवर्तित रहने चाहिए?

तीस सेकंड का उत्तर

पारंपरिक लाइन बॉक्स में फ़ॉन्ट का half-leading शामिल होता है, इसलिए समान पैडिंग होने पर भी अलग-अलग फ़ॉन्ट्स में वर्टिकल स्पेसिंग अलग दिख सकती है। text-box-trim ब्लॉक-एक्सिस किनारों को ट्रिम करता है और text-box-edge उस फ़ॉन्ट मेट्रिक का चयन करता है जिसे किनारे के रूप में उपयोग किया जाता है; text-box इसका शॉर्टहैंड है। मैं मौजूदा डायमेंशन्स को फ़ॉलबैक के रूप में रखूँगा, फ़ीचर क्वेरी के अंदर प्रोग्रेसिव एन्हांसमेंट का उपयोग करूँगा, न्यूनतम बटन हिट एरिया बनाए रखूँगा, और फ़ॉन्ट्स, भाषाओं, राइटिंग मोड्स, ज़ूम और एक्सेसिबिलिटी तकनीकों के साथ इसका परीक्षण करूँगा।

चरण-दर-चरण विस्तृत उत्तर

1. पहले चार बॉक्स बनाएं

पेंट किए गए ग्लिफ़ क्षेत्र, फ़ॉन्ट मेट्रिक्स, लाइन बॉक्स, और एलिमेंट की पैडिंग और बॉर्डर को अलग-अलग समझें। टेक्स्ट बॉक्स को ट्रिम करने से ब्लॉक एक्सिस पर कंटेंट का स्थान बदलता है; इसे ग्लिफ़ की आउटलाइन काटने या हिट एरिया को छोटा करने के रूप में नहीं बताया जाना चाहिए।

2. half-leading का स्रोत समझाइए

जब line-height फ़ॉन्ट की अपनी लाइन हाइट से अधिक हो जाती है, तो अतिरिक्त स्थान आमतौर पर लाइन बॉक्स के दोनों तरफ समान रूप से वितरित हो जाता है। एसेंडर्स (ascenders), डिसेंडर्स (descenders), कैप हाइट (cap height), और x-हाइट फ़ॉन्ट के अनुसार भिन्न होते हैं, इसलिए समान line-height भी एक अलग ऑप्टिकल सेंटर बना सकती है।

3. ट्रिम एज (Trim edge) चुनें

text-box-trim इन वैल्यूज को स्वीकार करता है: none, trim-start, trim-end, और trim-both। एक बटन को अक्सर दोनों तरफ ट्रिम करने की आवश्यकता होती है; हेडिंग में पिछले पैराग्राफ़ के साथ रिदम बनाए रखने के लिए केवल block-start किनारे को ट्रिम किया जा सकता है।

4. फ़ॉन्ट मेट्रिक चुनें

text-box-edge किनारों का चयन कर सकता है जैसे कि cap, ex, text, alphabetic, या leading। cap अपरकेस हेडिंग के विज़ुअल संदर्भ के अनुकूल हो सकता है, जबकि text फ़ॉन्ट टेक्स्ट सीमा के अधिक निकट होता है। वास्तविक फ़ॉन्ट और भाषा के साथ परीक्षण करें; कोई भी मेट्रिक हर फ़ॉन्ट के लिए सार्वभौमिक सत्य नहीं है।

5. शॉर्टहैंड का स्थानीय रूप से उपयोग करें

.button {
  text-box: trim-both cap alphabetic;
  padding: 0.625rem 1rem;
}

यह शॉर्टहैंड ट्रिम और एज दोनों को एक साथ व्यक्त करता है। इसे केवल उन्हीं कॉम्पोनेन्ट्स तक सीमित रखें जिन्हें इसकी आवश्यकता है, ताकि ग्लोबल ट्रिमिंग से पैराग्राफ़ रिदम, आइकन अलाइनमेंट या मल्टी-लाइन कंटेंट प्रभावित न हो।

6. लॉजिकल राइटिंग दिशाओं को संभालें

start और end लॉजिकल ब्लॉक-एक्सिस किनारे हैं और writing-mode के साथ बदलते हैं। अलग-अलग direction वैल्यूज़ के साथ हॉरिजॉन्टल और वर्टिकल लेआउट्स को मापें; लॉजिकल परिभाषा की जगह फिजिकल टॉप/बॉटम की धारणा का उपयोग न करें।

7. प्रोग्रेसिव एन्हांसमेंट डिज़ाइन करें

डिफ़ॉल्ट रूप से मौजूदा line-height, पैडिंग और न्यूनतम ऊंचाई बनाए रखें, फिर @supports (text-box-trim: trim-both) में एन्हांसमेंट को सक्षम करें। यदि कोई ब्राउज़र इस डिक्लेरेशन को अनदेखा करता है, तब भी टेक्स्ट पढ़ने योग्य रहना चाहिए और बटन को टच व कीबोर्ड डायमेंशन्स बनाए रखने चाहिए।

8. फ़ॉन्ट लोडिंग और एक्सेसिबिलिटी सत्यापित करें

लक्षित फ़ॉन्ट लोड होने के बाद मापें, जिसमें फ़ॉलबैक फ़ॉन्ट्स, धीमे नेटवर्क, ज़ूम, सिस्टम फ़ॉन्ट्स और बहुभाषी स्ट्रिंग्स शामिल हों। फ़ोकस इंडिकेशन, क्लिपिंग, स्क्रीन-रीडर क्रम और वास्तविक हिट रेक्टैंगल की जांच करें; ऑप्टिकल सेंटरिंग के चक्कर में संचालन क्षमता (operability) से समझौता नहीं किया जा सकता।

ट्रेड-ऑफ़ और सीमाएं

यह फ़ीचर मनमाने नेगेटिव मार्जिन और प्रति-फ़ॉन्ट ऑफसेट को हटा सकता है, लेकिन ब्राउज़र सपोर्ट अभी भी सीमित है और फ़ॉन्ट मेट्रिक्स में अभी भी भिन्नता होती है। यह line-height, पैडिंग, फ्लेक्स अलाइनमेंट, या एक उचित न्यूनतम ऊंचाई का विकल्प नहीं है। मल्टी-लाइन बॉडी टेक्स्ट, डायनेमिक फ़ॉन्ट्स और जटिल इनलाइन कंटेंट के साथ सावधानी बरतें। डिज़ाइन पैरिटी के लिए, केवल स्क्रीनशॉट रखने के बजाय लक्षित फ़ॉन्ट, मेट्रिक, ब्राउज़र वर्ज़न और टॉलरेंस को रिकॉर्ड करें।

रोलआउट योजना और साक्ष्य

1. कॉम्पोनेन्ट फ़ॉन्ट, साइज़, भाषा, राइटिंग मोड और टॉलरेंस को रिकॉर्ड करें।
2. वर्तमान स्टाइल को बेसलाइन के रूप में बनाए रखें, एक फ़ीचर-क्वेरी ब्रांच जोड़ें, और न्यूनतम इंटरैक्टिव साइज़ को लॉक करें।
3. Chrome 133 और प्रोजेक्ट मैट्रिक्स के अन्य ब्राउज़रों में परीक्षण करें; MDN इस प्रॉपर्टी को Baseline के बजाय सीमित उपलब्धता (limited availability) के रूप में चिह्नित करता है।
4. वास्तविक और फ़ॉलबैक फ़ॉन्ट्स के साथ ऑप्टिकल ऑफसेट, फ़ोकस रिंग, रैपिंग और ज़ूम को मापें।
5. कॉम्पोनेन्ट स्वीकृति रिकॉर्ड में स्क्रीनशॉट, माप, ब्राउज़र वर्ज़न और फ़ॉलबैक नीति को स्टोर करें।

सामान्य गलतियां और फ़ॉलो-अप

गलती 1: ट्रिम को ग्लिफ़ क्लिपिंग समझना

यह मुख्य रूप से टेक्स्ट-बॉक्स के किनारे को समायोजित करता है; यह पिक्सेल द्वारा ग्लिफ़ की आउटलाइन को नहीं काटता है। फ़ॉन्ट मेट्रिक्स, लाइन बॉक्स और एलिमेंट बॉक्स मॉडल के संदर्भ में समझें।

गलती 2: विश्व स्तर पर trim-both सेट करना

पैराग्राफ़, लिस्ट और मल्टी-लाइन कंटेंट को सामान्य रिदम की आवश्यकता होती है। कॉम्पोनेन्ट का स्कोप और फ़ॉलबैक सीमा निर्दिष्ट करें।

गलती 3: केवल डिफ़ॉल्ट फ़ॉन्ट कैप्चर करना

फ़ॉन्ट लोड न होने, भाषा बदलने या सिस्टम फ़ॉन्ट लागू होने पर मेट्रिक्स बदल जाते हैं। इसमें फ़ॉलबैक और धीमे नेटवर्क के परीक्षण शामिल करें।

गलती 4: लॉजिकल एक्सेस को अनदेखा करना

trim-start हमेशा भौतिक शीर्ष (physical top) नहीं होता है। वर्टिकल राइटिंग और अलग-अलग डायरेक्शन वैल्यूज़ में ब्लॉक-एक्सिस व्यवहार को सत्यापित करें।

गलती 5: केवल विज़ुअल्स की जांच करना, ऑपरेशन की नहीं

ट्रिमिंग से टच, कीबोर्ड फ़ोकस या पठनीय क्षेत्र कम नहीं होना चाहिए। न्यूनतम आकार, फ़ोकस रिंग और सहायक तकनीक की जांच प्रदान करें।