अब सीएसएस में, संतुलित टेक्स्ट ब्लॉक के लिए लाइन ब्रेक को हाथ से लिखने की क्लासिक टाइपोग्राफ़ी तकनीक का इस्तेमाल किया जा सकता है.
text-wrap के लिए balance वैल्यू, सीएसएस टेक्स्ट लेवल 4 का हिस्सा है. इस पोस्ट में दिए गए उदाहरण देखें और जानें कि
सीएसएस की यह एक लाइन, आपके टेक्स्ट लेआउट को कैसे बेहतर बना सकती है.
text-wrap: balance न होने पर, डिज़ाइनर, कॉन्टेंट एडिटर, और पब्लिशर के पास संतुलन बनाने का तरीका बदलने के लिए कुछ टूल होते हैं. <wbr> या ­ का इस्तेमाल करना सबसे सही विकल्प है. इससे टेक्स्ट लेआउट के लिए गाइड करने में मदद मिलती है, ताकि यह तय किया जा सके कि लाइनों और शब्दों को कहां ब्रेक करना है.
डेवलपर के तौर पर, आपको किसी हेडलाइन या पैराग्राफ़ का फ़ाइनल साइज़, फ़ॉन्ट साइज़ या यहां तक कि भाषा भी नहीं पता होती. टेक्स्ट रैपिंग को असरदार और शानदार बनाने के लिए ज़रूरी सभी वैरिएबल, ब्राउज़र में मौजूद होते हैं. इसलिए, जैसा कि हमें इस इमेज में हेडलाइन रैपिंग के तौर पर दिखती है:
.unbalanced {
max-inline-size: 50ch;
}
सीएसएस टेक्स्ट 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% से शुरू करता है.