सीएसएस में, संतुलित टेक्स्ट ब्लॉक के लिए लाइन ब्रेक लिखने की एक क्लासिक टाइपोग्राफ़ी तकनीक का इस्तेमाल किया जाता है.
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% से शुरू करता है.