Frontend Interview: CSS baseline-shift का उपयोग करके इनलाइन टेक्स्ट और SVG को संरेखित करना

प्रांप्ट और संदर्भ

एक डिज़ाइन सिस्टम को बॉडी टेक्स्ट, बटन लेबल और गणितीय नोटेशन के साथ स्टेटस आइकन, यूनिट सिंबल और इनलाइन SVG को संरेखित करने की आवश्यकता है। डेवलपर्स ने ऋणात्मक top मानों या transform का उपयोग किया, लेकिन फ़ॉन्ट, लाइन हाइट और RTL लेआउट बदलने पर आइकन विचलित हो जाता है। baseline-shift, SVG बेसलाइन, फॉलबैक, एक्सेसिबिलिटी और विजुअल रिग्रेशन को कवर करते हुए एक CSS बेसलाइन-आधारित समाधान डिज़ाइन करें।

साक्षात्कारकर्ता क्या टेस्ट करता है

• इनलाइन फ़ॉर्मेटिंग संदर्भों, फ़ॉन्ट बेसलाइन, सुपरस्क्रिप्ट, सबस्क्रिप्ट और वैकल्पिक बेसलाइन की समझ।
• baseline-shift, vertical-align और transform के बीच अंतर करना।
• HTML टेक्स्ट और SVG सामग्री के बीच ब्राउज़र अंतरों को संभालना।
• केवल पिक्सेल के पीछे भागने के बजाय पठनीय टेक्स्ट, फ़ोकस क्रम और RTL सेमांटिक्स को संरक्षित करना।
• फ़ॉन्ट मैट्रिक्स, स्नैपशॉट और वास्तविक-ब्राउज़र कवरेज के साथ सत्यापन करना।

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

1. क्या आइकन सजावटी है या यह किसी स्थिति (state) को दर्शाता है? क्या कोई दृश्यमान टेक्स्ट और एक्सेसिबल नाम मौजूद है?
2. क्या लक्ष्य एक सामान्य इनलाइन आइकन, एक सुपरस्क्रिप्ट यूनिट, एक फ़ॉर्मूला, या SVG के अंदर टेक्स्ट है?
3. किन ब्राउज़रों, फ़ॉन्ट-लोडिंग विफलताओं और ज़ूम स्तरों का समर्थन किया जाना चाहिए?
4. क्या संदर्भ एक अल्फ़ाबेटिक बेसलाइन, गणितीय बेसलाइन, SVG dominant-baseline, या विजुअल सेंटर है?
5. क्या कंपोनेंट को RTL, डायनेमिक फ़ॉन्ट आकार और फ़ोर्स्ड हाई कंट्रास्ट का समर्थन करना चाहिए?

30-सेकंड का उत्तर

मैं पहले सेमांटिक बेसलाइन को परिभाषित करूँगा: बॉडी आइकन आमतौर पर अल्फ़ाबेटिक बेसलाइन का पालन करते हैं, जबकि फ़ॉर्मूलों और सुपरस्क्रिप्ट्स को एक स्पष्ट शिफ्ट की आवश्यकता होती है। आइकन को इनलाइन फ़ॉर्मेटिंग संदर्भ में रखें और संबंध व्यक्त करने के लिए baseline-shift का उपयोग करें; इनलाइन-बॉक्स संरेखण के लिए vertical-align का उपयोग करें, और transform को टाइपसेटिंग नियम न मानें। पुराने ब्राउज़रों के लिए एक सुरक्षित vertical-align या आकार फॉलबैक के साथ SVG viewBox और बेसलाइन व्यवहार को सामान्य (normalize) करें। सजावटी आइकन छिपाएँ, स्टेट आइकन का नाम रखें, और फ़ॉन्ट लोडिंग, ज़ूम, RTL, SVG और ब्राउज़र स्नैपशॉट का परीक्षण करें।

चरण-दर-चरण गहन विश्लेषण

1. बेसलाइन सेमांटिक्स स्थापित करना

बेसलाइन किसी बॉक्स का वर्टिकल केंद्र नहीं है। बॉडी आइकन आमतौर पर अल्फ़ाबेटिक बेसलाइन से संरेखित होते हैं; सुपरस्क्रिप्ट, सबस्क्रिप्ट और गणितीय प्रतीकों के संबंध अलग होते हैं। प्रत्येक फ़ॉन्ट के लिए एक मनमाना पिक्सेल मान निर्धारित करने के बजाय, CSS प्रॉपर्टी चुनने से पहले आवश्यकता को "वर्तमान लाइन बेसलाइन के सापेक्ष शिफ्ट" के रूप में लिखें।

.status-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: baseline;
  baseline-shift: 0.08em;
}

यह मान एक कंपोनेंट टोकन है, कोई सार्वभौमिक स्थिरांक नहीं; इसे वास्तविक फ़ॉन्ट और आकारों के साथ मापें।

2. baseline-shift, vertical-align, और transform को अलग करना

baseline-shift सुपरस्क्रिप्ट, सबस्क्रिप्ट और इनलाइन सामग्री के लिए बेसलाइन के सापेक्ष एक ऑफ़सेट व्यक्त करता है जिसे टेक्स्ट लेआउट को संरक्षित करना चाहिए। vertical-align इनलाइन बॉक्स, टेबल सेल या चयनित बेसलाइन में भाग लेता है। transform: translateY() लाइन-बॉक्स की गणना को बदले बिना पेंट स्थिति को बदलता है, जो हिट क्षेत्रों, ओवरफ्लो और बाद के टेक्स्ट को गलत तरीके से संरेखित कर सकता है।

3. SVG और फ़ॉन्ट ज्योमेट्री को संभालना

SVG को एक स्थिर viewBox दें; CSS सही होने पर भी पाथ का व्हाइटस्पेस विजुअल एरर उत्पन्न कर सकता है। इनलाइन SVG बेसलाइन व्यवहार में वैकल्पिक बेसलाइन और dominant-baseline भी शामिल होते हैं, इसलिए एक ब्राउज़र में विजुअल निरीक्षण पर्याप्त नहीं है। बार-बार कॉलर ओवरराइड के बजाय आइकन कंपोनेंट में बेसलाइन, सुपरस्क्रिप्ट और सबस्क्रिप्ट वेरिएंट प्रदान करें।

4. एक फॉलबैक लेयर डिज़ाइन करना

सटीक शिफ्ट लागू करने से पहले फ़ीचर-डिटेक्ट करें। असमर्थित ब्राउज़र एक सुरक्षित vertical-align, आकार, या line-height फॉलबैक का उपयोग करते हैं। फॉलबैक को पठनीय और क्लिक करने योग्य बना रहना चाहिए और छिपे हुए टेक्स्ट को स्क्रीन से बाहर नहीं धकेलना चाहिए। फ़ॉन्ट लोडिंग के दौरान, सिस्टम-फ़ॉन्ट बेसलाइन स्वीकार करें और फ़्रेम-दर-फ़्रेम स्क्रिप्ट सुधारों के बजाय लोड होने के बाद स्थिर टोकन का उपयोग करें।

5. एक्सेसिबिलिटी और अंतर्राष्ट्रीयकरण

सजावटी आइकन खाली वैकल्पिक टेक्स्ट प्राप्त करते हैं और उन्हें दो बार घोषित नहीं किया जाना चाहिए। स्टेट आइकन को दृश्यमान टेक्स्ट या एक एक्सेसिबल नाम की आवश्यकता होती है। स्थिति (position) सेमांटिक्स नहीं है; RTL लिखने की दिशा बदलता है, वर्टिकल बेसलाइन नहीं। ज़ूम, फ़ोर्स्ड हाई कंट्रास्ट और कम मोशन में भी कंपोनेंट को स्पष्ट और संचालन योग्य बनाए रखना चाहिए।

6. टेस्ट और रिग्रेशन गेट्स

सामान्य फ़ॉन्ट, फ़ॉन्ट-लोडिंग विफलता, 12–32px आकार, विविध line-height, SVG पाथ, सुपरस्क्रिप्ट, सबस्क्रिप्ट, RTL, ब्राउज़र और ज़ूम को कवर करें। स्क्रीनशॉट तुलनाओं को एक्सेसिबिलिटी जांच के साथ-साथ बेसलाइन त्रुटि, लाइन-हाइट परिवर्तन, क्लिपिंग और हिट क्षेत्रों की जांच करनी चाहिए। जब कोई बेमेल दिखाई दे, तो दूसरा ट्रांसफ़ॉर्म जोड़ने से पहले तय करें कि बेसलाइन मॉडल गलत है या एसेट ज्योमेट्री।

मॉडल उत्तर

मैं बॉडी आइकन, सुपरस्क्रिप्ट/सबस्क्रिप्ट और SVG टेक्स्ट को अलग करूँगा क्योंकि उनकी बेसलाइन भिन्न होती हैं। बॉडी आइकन को इनलाइन फ़ॉर्मेटिंग संदर्भ में रखें और सापेक्ष ऑफ़सेट के लिए baseline-shift का उपयोग करें; इनलाइन-बॉक्स संरेखण के लिए vertical-align का उपयोग करें, और transform का उपयोग केवल अंतिम विजुअल सुधार के रूप में करें जब लेआउट नहीं बदल सकता। SVG viewBox को सामान्य करें और वैकल्पिक बेसलाइन तथा पाथ व्हाइटस्पेस का परीक्षण करें।

मैं सिस्टम फ़ॉन्ट और पुराने ब्राउज़रों के लिए फ़ीचर-डिटेक्टेड फॉलबैक प्रदान करूँगा, जिससे हिट क्षेत्र और पठनीय टेक्स्ट सुरक्षित रहें। सजावटी आइकन छिपाए जाते हैं और स्टेट आइकन का नाम दिया जाता है। परीक्षणों में फ़ॉन्ट, आकार, लाइन हाइट, SVG, RTL, ज़ूम और स्क्रीनशॉट रिग्रेशन शामिल हैं; ड्रिफ्ट होने पर पहली प्रतिक्रिया बेसलाइन सेमांटिक्स और एसेट ज्योमेट्री की जांच करना है, न कि अधिक मैजिक नंबर जोड़ना।

सामान्य गलतियाँ

• बेसलाइन को बॉक्स सेंटर मानना और प्रत्येक फ़ॉन्ट के लिए एक ही translateY का उपयोग करना।
• यह मान लेना कि vertical-align, baseline-shift, और transform आपस में बदले जा सकते हैं।
• फ़ॉन्ट विफलता, ज़ूम और RTL की अनदेखी करते हुए केवल क्रोम में उसके डिफ़ॉल्ट फ़ॉन्ट के साथ परीक्षण करना।
• जब SVG viewBox में अतिरिक्त व्हाइटस्पेस हो तब CSS को दोष देना।
• सजावटी आइकन को दो बार बुलवाना या स्टेट आइकन को अनाम छोड़ देना।
• स्क्रिप्ट के साथ हर फ़्रेम को मापना, जिससे लेआउट जिटर और रखरखाव की लागत बढ़ती है।

फॉलो-अप प्रश्न और उत्तर

एक निश्चित top: -2px का उपयोग क्यों न करें?

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

यदि SVG पाथ अभी भी नीचे दिखाई दे तो क्या करें?

कंपोनेंट टोकन को समायोजित करने से पहले viewBox व्हाइटस्पेस, पाथ ज्योमेट्री और SVG वैकल्पिक बेसलाइन का निरीक्षण करें। हर आइकन में ट्रांसफ़ॉर्म न जोड़ें और सिस्टम-व्यापी स्थिरता न खोएं।

असमर्थित ब्राउज़र अनुभव को कैसे बनाए रखते हैं?

सुरक्षित vertical-align और आकार फॉलबैक का उपयोग करें जो पठनीय, क्लिक करने योग्य और अनक्लिप्ड रहें। सटीक शिफ्टिंग को एक एन्हांसमेंट के रूप में मानें और वास्तविक ब्राउज़रों में फॉलबैक की लाइन हाइट को सत्यापित करें।