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

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

Adam Argyle

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%.