CSS text-wrap: balance

टेक्स्ट के ब्लॉक को संतुलित करने के लिए, लाइन ब्रेक को मैन्युअल तरीके से सेट करने की क्लासिक टाइपोग्राफ़ी तकनीक, अब सीएसएस में भी उपलब्ध है.

Adam Argyle

balance वैल्यू, text-wrap का हिस्सा है सीएसएस टेक्स्ट लेवल 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% से शुरू होता है.