प्रॉम्प्ट और संदर्भ
एक अंतरराष्ट्रीय कंटेंट साइट में कार्ड के शीर्षक हैं जो एक संकीर्ण लाइन पर केवल एक शब्द छोड़ देते हैं, जबकि लंबे पैराग्राफ अक्सर एक ऑर्फ़न (अकेले शब्द) के साथ समाप्त होते हैं। डिज़ाइन टीम एक-लाइन का CSS फिक्स चाहती है, लेकिन पेज को एडिटिंग, पुराने ब्राउज़रों और डायनेमिक फ़ॉन्ट्स का भी समर्थन करना होगा। text-wrap: balance, text-wrap: pretty, सामान्य wrap और stable की तुलना करें, फिर एक रोलआउट योजना प्रस्तावित करें।
यह प्रश्न फ्रंटएंड, डिज़ाइन-सिस्टम और कंटेंट-प्लेटफ़ॉर्म इंटरव्यू के लिए उपयुक्त है। मुख्य बात यह है कि टेक्स्ट रैपिंग को एक निश्चित चौड़ाई या जावास्क्रिप्ट माप परिणाम के बजाय लेआउट व्यवहार के रूप में माना जाए।
इंटरव्यूअर क्या जांच रहा है
एक बेहतरीन उत्तर छोटे शीर्षकों और उद्धरणों के लिए balance का उपयोग करता है, अधिक कम्प्यूटेशन लागत को स्वीकार करते हुए लंबे गद्य (prose) के लिए pretty पर विचार करता है, और यह स्पष्ट करता है कि इनमें से कोई भी मान किसी एलिमेंट के इनलाइन आकार को नहीं बदलता है और न ही white-space: nowrap को ओवरराइड करता है। यह contenteditable के लिए stable, बहुभाषी परीक्षण, स्थिर फ़ॉलबैक और एक्सेसिबिलिटी को भी कवर करता है।
पहले पूछने योग्य स्पष्टीकरण प्रश्न
- क्या टेक्स्ट एक शीर्षक है, कार्ड सारांश है, बॉडी कॉपी है, या संपादन योग्य (editable) फ़ील्ड है, और कितनी लाइनों की अपेक्षा है?
- क्या हम ऑर्फ़न्स को रोक रहे हैं, या लाइन की लंबाई को अधिक समान दिखाने का प्रयास कर रहे हैं?
- क्या कंटेनर शैलियों में
white-space, एक निश्चित ऊंचाई (fixed height), क्लिपिंग, याline-clampशामिल हैं? - कौन सी भाषाएं, फ़ॉन्ट-लोडिंग स्थितियां और ब्राउज़र संस्करण दायरे में हैं?
- क्या लेगेसी ब्राउज़रों को बिल्कुल समान लाइन ब्रेक बनाए रखने चाहिए, या सामान्य रैपिंग एक स्वीकार्य फ़ॉलबैक है?
30-सेकंड उत्तर ढांचा
"मैं सामग्री के प्रकार के आधार पर चुनाव करूंगा: छोटे शीर्षकों के लिए text-wrap: balance, गद्य के लिए pretty का मूल्यांकन केवल तभी करूंगा जब ऑर्फ़न नियंत्रण महत्वपूर्ण हो, सामान्य सामग्री को wrap पर रखूंगा, और संपादन योग्य क्षेत्रों के लिए stable पर विचार करूंगा। ये मान सॉफ्ट रैपिंग को बदलते हैं, एलिमेंट की चौड़ाई को नहीं; white-space: nowrap, निश्चित ऊंचाई और क्लिपिंग के लिए अभी भी अलग निर्णयों की आवश्यकता होती है। मैं एक पठनीय डिफ़ॉल्ट रखूंगा, समर्थित ब्राउज़रों को बेहतर बनाऊंगा, और विज़ुअल और प्रदर्शन दोनों के लिए भाषाओं, फ़ॉन्ट्स, रिस्पॉन्सिव आकारों और संपादन व्यवहार का परीक्षण करूंगा।"
चरण-दर-चरण विस्तृत उत्तर
चरण 1: चारों रणनीतियों को अलग करें
wrap सामान्य लाइन-ब्रेकिंग नियमों का पालन करता है, जबकि nowrap सॉफ्ट रैपिंग को अक्षम करता है। balance शीर्षकों और उद्धरणों जैसे छोटे टेक्स्ट के लिए अधिक समान लाइन लंबाई प्राप्त करने का प्रयास करता है। pretty लंबे टेक्स्ट को बेहतर बनाने और ऑर्फ़न्स को कम करने के लिए एक धीमे एल्गोरिदम का उपयोग करता है। stable का लक्ष्य contenteditable है, जो उपयोगकर्ता द्वारा संपादित करते समय पिछली लाइनों को अधिक स्थिर रखता है।
चरण 2: शीर्षकों को एक नियंत्रणीय सीमा दें
संतुलन (balancing) के लिए वास्तविक रैप अवसरों की आवश्यकता होती है। text-wrap: balance लागू करने से पहले max-inline-size या एक उचित कंटेनर चौड़ाई सेट करें; एक-लाइन वाले स्ट्रिंग में संतुलित करने के लिए कुछ नहीं होता है। अंग्रेज़ी या चीनी के लिए मैन्युअल <br> ब्रेक से बचें क्योंकि अनुवाद, फ़ॉन्ट और व्यूपोर्ट की चौड़ाई परिणाम को बदल देती है।
.card-title {
max-inline-size: 24ch;
text-wrap: balance;
}चरण 3: pretty का सोच-समझकर उपयोग करें
pretty बॉडी कॉपी, स्पष्टीकरणों और लंबे उद्धरणों के लिए उपयुक्त है, लेकिन इसे सामान्य रैपिंग की तुलना में अधिक गणना (computation) की आवश्यकता होती है। इसका उपयोग वहां करें जहां टेक्स्ट की गुणवत्ता लागत को सही ठहराती है और यूनिवर्सल चयनकर्ता (universal selector) से बचें। एक या दो-लाइन वाले शीर्षकों के लिए, balance अधिक प्रत्यक्ष विकल्प है।
चरण 4: white-space और क्लिपिंग के टकरावों को हल करें
white-space: nowrap स्पष्ट रूप से नो-रैपिंग का अनुरोध करता है, जो बैलेंसिंग के साथ टकराता है। संतुलित लाइनों की अपेक्षा करने से पहले इसे हटाएं या ओवरराइड करें। निश्चित ऊंचाई, overflow: hidden, और line-clamp अभी भी टेक्स्ट को क्लिप कर सकते हैं, इसलिए उत्पाद को यह तय करना होगा कि इसे बड़ा करना है, एलिप्सिस (...) दिखाना है, या पूरा टेक्स्ट प्रदर्शित करना है।
चरण 5: प्रदर्शन सीमा को समझें
ब्राउज़र कई लाइन-ब्रेक समाधानों का प्रयास करता है। MDN और Chrome दस्तावेज़ छोटे टेक्स्ट पर balance रखने और लंबे गद्य के लिए pretty पर विचार करने की सलाह देते हैं; यह दावा न करें कि इनमें से कोई भी हमेशा जावास्क्रिप्ट से तेज़ होता है। वास्तविक उपकरणों पर लेआउट, फ़ॉन्ट लोडिंग और लंबी सूचियों के रेंडरिंग को मापें।
चरण 6: भाषाओं और फ़ॉन्ट परिवर्तनों को कवर करें
एक ही शीर्षक में चीनी, अंग्रेज़ी, जर्मन और अरबी में अलग-अलग ब्रेक के अवसर होते हैं। भाषा स्विच, फ़ॉलबैक फ़ॉन्ट्स, ज़ूम, संकीर्ण स्क्रीन और चौड़ी स्क्रीन का परीक्षण करें। अनुबंध नो-ओवरफ्लो, पठनीय पदानुक्रम और पूर्ण सामग्री होना चाहिए, न कि किसी एक भाषा का सटीक लाइन स्नैपशॉट।
चरण 7: संपादन योग्य सामग्री के लिए stable चुनें
जब कोई उपयोगकर्ता contenteditable के बीच में संपादन करता है, तो रीफ्लो (reflow) कैरेट के पास की लाइनों को स्थानांतरित कर सकता है। text-wrap: stable संपादन से पहले की लाइनों को अधिक स्थिर रख सकता है, लेकिन यह शीर्षक सौंदर्यीकरण रणनीति नहीं है और फ़ील्ड की ऊंचाई का प्रबंधन नहीं करता है। इसका उपयोग केवल वहीं करें जहां संपादन स्थिरता वास्तविक समस्या हो।
चरण 8: प्रोग्रेसिव एन्हांसमेंट और सत्यापन डिज़ाइन करें
साधारण wrap और बढ़ने में सक्षम ऊंचाई के साथ शुरुआत करें; जहां समर्थित हो वहां balance या pretty जोड़ें। क्षमता-जागरूक CSS के साथ एन्हांसमेंट को लेयर करें और इसके बिना भी महत्वपूर्ण सामग्री को उपयोग योग्य बनाए रखें। परिकलित शैलियों (computed styles), ओवरफ्लो, CLS, लंबी-सूची लागत, फ़ॉन्ट पथ और स्क्रीन-रीडर क्रम को सत्यापित करें।
ट्रेड-ऑफ़ और सीमाएं
balance छोटे टेक्स्ट के विज़ुअल रिदम को बेहतर बनाता है लेकिन एलिमेंट को सिकोड़ता नहीं है; कार्ड बॉर्डर, शैडो और अलाइनमेंट अभी भी कंटेनर से आते हैं। pretty लेआउट कार्य जोड़ते हुए गद्य में सुधार कर सकता है। इनमें से कोई भी संपादकीय विकल्पों, लाइन-ब्रेकिंग नियमों, overflow-wrap, या एक सुलभ पूर्ण-टेक्स्ट विस्तार का विकल्प नहीं है।
वर्तमान ब्राउज़र समर्थन को स्थायी गारंटी न मानें। CSS Text Level 4 में अभी भी कार्यान्वयन संबंधी अंतर हैं, इसलिए उत्पाद मैट्रिक्स का परीक्षण करें। महत्वपूर्ण शीर्षकों के लिए एक सामान्य-रैप पथ रखें और क्लिप की गई सामग्री के लिए एक सुलभ नाम या विस्तार प्रदान करें।
रोलआउट योजना और साक्ष्य
एक शीर्षक, सारांश और बॉडी-कॉपी घटक का पायलट परीक्षण करें। भाषा, अधिकतम लाइनें, कंटेनर का आकार और फ़ॉन्ट स्थिति रिकॉर्ड करें। शीर्षक के लिए balance का उपयोग करें, केवल तभी pretty आज़माएं जब ऑर्फ़न समस्या को दोहराया जा सके, और एडिटर में stable का अलग से मूल्यांकन करें। Chromium, Firefox, Safari और आवश्यक लेगेसी ब्राउज़रों में ओवरफ्लो, लेआउट शिफ्ट और कैरेट स्थिरता की जांच करें।
सामग्री प्रकार, अधिकतम लाइनें, white-space पूर्वापेक्षाएँ, फ़ॉलबैक शैलियाँ और माप मेट्रिक्स का दस्तावेज़ीकरण करें। जब भी फ़ॉन्ट, कंटेनर चौड़ाई या अनुवाद बदलें, तो विज़ुअल रिग्रेशन चलाएं ताकि कोई एक स्नैपशॉट बहुभाषी ब्रेक रिग्रेशन को छिपा न सके।
सामान्य गलतियाँ और फॉलो-अप प्रश्न
प्रत्येक एलिमेंट पर balance लागू करना
वैश्विक उपयोग कम्प्यूटेशन को बर्बाद करता है और लंबे गद्य में सुधार नहीं करता है। इसे शीर्षकों, उद्धरणों और छोटे टेक्स्ट तक सीमित रखें जिन्हें संतुलन से लाभ होता है।
यह मान लेना कि balance एलिमेंट की चौड़ाई बदलता है
यह केवल सॉफ्ट रैपिंग को बदलता है; यह बॉक्स को श्रिंक-रैप (shrink-wrap) नहीं करता है। लेआउट और max-inline-size अभी भी कार्ड के इनलाइन आकार को नियंत्रित करते हैं।
nowrap या निश्चित ऊंचाई को अनदेखा करना
वे नियम टेक्स्ट को ओवरफ्लो या क्लिप कर सकते हैं। यह तय करने से पहले कि रैपिंग और ऊंचाई बढ़ने की अनुमति है या नहीं, कम्प्यूटेड शैलियों का निरीक्षण करें।
pretty को एक मुफ़्त ऑर्फ़न समाधान मानना
बेहतर रैपिंग के लिए अतिरिक्त कार्य की आवश्यकता होती है। केवल एकल डेमो पर भरोसा करने के बजाय लंबी सूचियों और कम क्षमता वाले उपकरणों पर मापें।
संपादन योग्य क्षेत्र में balance का उपयोग क्यों नहीं करना चाहिए?
संपादन के दौरान रीफ्लो कैरेट क्षेत्र को हिला सकता है। संपादन स्थिरता के लिए stable का मूल्यांकन करें और केवल-पढ़ने योग्य प्रस्तुति शीर्षकों के लिए balance सुरक्षित रखें।