सीएसएस टेक्स्ट-रैप: बैलेंस

अब सीएसएस में, संतुलित टेक्स्ट ब्लॉक के लिए, हाथ से लिखने की तकनीक की मदद से लाइन ब्रेक किया जा सकता है.

Adam Argyle

text-wrap के लिए balance वैल्यू, सीएसएस टेक्स्ट लेवल 4 का हिस्सा है. इस पोस्ट में दिए गए उदाहरणों को देखें और जानें कि सीएसएस की यह एक लाइन, आपके टेक्स्ट लेआउट को बेहतर कैसे बना सकती है.

text-wrap: balance के बिना; डिज़ाइनर, कॉन्टेंट एडिटर, और पब्लिशर के पास कुछ टूल लाइनों के संतुलन को बनाए रखने के लिए.. <wbr> या ­ का इस्तेमाल करना सबसे बेहतर विकल्प है. इससे टेक्स्ट लेआउट को बेहतर तरीके से तय करने में मदद मिलती है. जैसे, लाइन और शब्दों को कहां बांटना है.

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

.unbalanced {
  max-inline-size: 50ch;
}

CSS Text 4 में मौजूद text-wrap: balance का इस्तेमाल करके, ब्राउज़र से अनुरोध किया जा सकता है कि वह टेक्स्ट के लिए, लाइन रैपिंग का सबसे सही तरीका तय करे. ब्राउज़र को फ़ॉन्ट साइज़, भाषा, और तय किए गए एरिया जैसे सभी फ़ैक्टर पता होते हैं. ब्राउज़र में टेक्स्ट को बराबर-बराबर बांटने की सुविधा के नतीजे आज कुछ इस तरह दिखते हैं:

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

उन्हें अगल-बगल में, स्थिर और डीबग की जानकारी को ओवरले किए बिना देखना ज़्यादा मददगार होता है.

संतुलित टेक्स्ट ब्लॉक आपकी आंखों को और ज़्यादा अच्छा लगेगा. यह ज़रूरी है कि ध्यान लगता है और उसे पढ़ना आसान होता है.

संतुलन बनाए रखना

लोगों को सबसे पहले हेडलाइन दिखती है; वे देखने में आकर्षक और पढ़ने में आसान. इससे उपयोगकर्ताओं का ध्यान खींचा जा सकता है. साथ ही, उन्हें प्रॉडक्ट की क्वालिटी और भरोसे के बारे में जानकारी मिलती है. अच्छी टाइपोग्राफ़ी से पाठकों का आत्मविश्वास बढ़ता है. इससे उन्हें पढ़ना जारी रखें.

आम तौर पर, यह काम हाथ से या ऑप्टिकल तरीके से किया जाता था, क्योंकि टेक्स्ट को संतुलित करने वाला डिज़ाइनर, आंखों को खुश करना चाहता है, न कि गणित को. इस विषय को अक्सर मेट्रिक बनाम ऑप्टिकल अलाइनमेंट कहा जाता है. New York Times जैसे बड़े पब्लिकेशन के लिए, हेडलाइन को संतुलित रखना, उपयोगकर्ता अनुभव के लिहाज़ से बहुत ज़रूरी है.

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

हालांकि, वेब पर दस्तावेज़ के साइज़ और रंगों को कंट्रोल करने की सुविधा कम होती है. ऐसा इसलिए होता है, क्योंकि दस्तावेज़ का साइज़ और रंग, उपयोगकर्ताओं के डिवाइस के हिसाब से बदलता रहता है. text-wrap: balance, प्रिंट इंडस्ट्री के डिज़ाइनर के काम और परंपराओं के आधार पर, टेक्स्ट को अपने-आप संतुलित करने की सुविधा को वेब पर उपलब्ध कराता है.

हेडलाइन के बीच संतुलन बनाएं

text-wrap: balance के इस्तेमाल का मुख्य उदाहरण यही होना चाहिए. आंख को सही साइज़ में बनाएं और उसे सममित और साफ़ तौर पर पढ़ने लायक बनाएं. नीचे दी गई सीएसएस का इस्तेमाल करके, सभी हेडलाइन को बैलेंस किए गए टेक्स्ट रैपिंग पर सेट करें:

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

हो सकता है कि इस शैली को लागू करने से आपको उम्मीद के मुताबिक नतीजे न मिलें, क्योंकि टेक्स्ट को रैप किया जाना चाहिए और इसलिए अधिकतम पंक्ति लंबाई कहीं. आपको दिखेगा कि max-inline-size इस पोस्ट में दिए गए उदाहरणों के मुताबिक, यह स्टाइल max-width की तरह है. हालांकि, इसे सेट किया जा सकता है का इस्तेमाल करें.

सीमाएं

टेक्स्ट के बीच संतुलन बनाने का काम मुफ़्त नहीं है. ब्राउज़र को सबसे सही रैपिंग का समाधान ढूंढने के लिए, कई बार दोहराव करना पड़ता है. परफ़ॉर्मेंस पर पड़ने वाले इस असर को कम करने के लिए, एक नियम बनाया गया है. यह नियम सिर्फ़ छह लाइन और उससे कम लाइनों के लिए काम करता है.

प्रदर्शन संबंधी विचार

अपने पूरे डिज़ाइन पर टेक्स्ट-रैप बैलेंसिंग सुविधा का इस्तेमाल करना सही नहीं है. यह है बर्बाद हो सकता है. छह लाइन की सीमा की वजह से अनुरोध पर काफ़ी असर पड़ सकता है. इससे पेज रेंडर होने की स्पीड पर असर पड़ सकता है.

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

इस सुविधा की सबसे बड़ी बात यह है कि आपको इंतज़ार करने और टेक्स्ट रैप करने की ज़रूरत नहीं है फ़ॉन्ट लोडिंग के साथ संतुलन बनाए रखना, जैसा कि शायद आज JavaScript का इस्तेमाल किया जा रहा है. ब्राउज़र इसका ध्यान रखता है!

white-space प्रॉपर्टी के साथ इंटरैक्शन

टेक्स्ट को अलाइन करने की सुविधा, white-space प्रॉपर्टी के साथ काम करती है. ऐसा इसलिए है, क्योंकि एक प्रॉपर्टी में टेक्स्ट को अलाइन नहीं करने के लिए कहा जाता है और दूसरी प्रॉपर्टी में टेक्स्ट को अलाइन करने के लिए कहा जाता है. व्हाइट स्पेस प्रॉपर्टी को अनसेट करके, इस समस्या को ठीक करें. इसके बाद, बैलेंस्ड रैपिंग फिर से लागू की जा सकती है.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

बैलेंस करने से एलिमेंट का इनलाइन साइज़ नहीं बदलेगा

टेक्स्ट को दोनों तरफ़ से रैप करने के लिए, JavaScript के कुछ समाधानों का फ़ायदा होता है. ऐसा इसलिए, क्योंकि ये समाधान, टेक्स्ट वाले एलिमेंट के max-width को बदल देते हैं. इससे, बैलेंस किए गए ब्लॉक में "छोटा करके लपेटा गया" होने का एक अतिरिक्त फ़ायदा मिलता है. text-wrap: balance पर यह इफ़ेक्ट लागू नहीं होता है. इसकी जानकारी इस उदाहरण में दी गई है:

देखें कि DevTools में दिखाई गई चौड़ाई के आखिर में, अतिरिक्त स्पेस कैसे है? ऐसा इसलिए होता है, क्योंकि यह सिर्फ़ रैपिंग स्टाइल है, साइज़ बदलने वाला स्टाइल नहीं. इस वजह से कुछ मामलों में, ऐसा भी हो सकता है कि text-wrap: balance को कम से कम मेरी राय में. उदाहरण के लिए, कार्ड (या किसी कंटेनर) के अंदर मौजूद हेडिंग सीमाओं या शैडो के साथ).

टेक्स्ट को दोनों तरफ़ बराबर-बराबर रैप करने से, एलिमेंट में असंतुलन पैदा होता है.

ब्राउज़र जिस तकनीक का इस्तेमाल कर रहा है उसके बारे में कम शब्दों में जानकारी

ब्राउज़र, सबसे छोटी चौड़ाई के लिए बाइनरी सर्च करता है, जिससे कोई अतिरिक्त लाइन नहीं बनती. यह एक सीएसएस पिक्सल (डिसप्ले पिक्सल नहीं) पर रुक जाता है. बाइनरी खोज में चरणों को और छोटा करने के लिए ब्राउज़र इससे शुरू होता है लाइन की औसत चौड़ाई का 80%.