टेक्स्ट के लेआउट और उसे पढ़ने की सुविधा को बेहतर बनाना

टेक्स्ट का लेआउट, खास तौर पर लाइनों और पैराग्राफ़ के आखिर में, पेज को पढ़ने में आसान और आकर्षक बना सकता है. सीएसएस में टेक्स्ट रैपिंग के कई विकल्प उपलब्ध हैं. इनसे, इस्तेमाल के कुछ खास मामलों को बेहतर बनाया जा सकता है.

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

text-wrap: pretty सीएसएस प्रॉपर्टी की मदद से, बॉडी टेक्स्ट की टाइपोग्राफ़िक क्वालिटी को बेहतर बनाया जा सकता है. इसके लिए, ज़्यादा बेहतर रैपिंग एल्गोरिदम को चालू करना होगा. इसे खास तौर पर, "ऑर्फ़न" (पैराग्राफ़ की आखिरी लाइन में मौजूद सिंगल शब्द) को रोकने के लिए डिज़ाइन किया गया है. साथ ही, टेक्स्ट के लंबे ब्लॉक के लिए, ज़्यादा आकर्षक विज़ुअल "रैग" बनाने के लिए डिज़ाइन किया गया है.

लागू करना

1. टेक्स्ट एलिमेंट की पहचान करना:

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

text-wrap: pretty के लिए, ऐसे एलिमेंट चुनें जिनमें टेक्स्ट की लंबी लाइनें हो सकती हैं. इनमें अनाथ शब्द (रंट) या खराब लाइन ब्रेक सबसे ज़्यादा ध्यान देने लायक होते हैं. इसमें ये एलिमेंट शामिल हैं:

• <p>
• <blockquote>
• <li>
• कोई भी अन्य एलिमेंट, जिसमें टेक्स्ट की लंबी लाइनें हो सकती हैं.

रैप करने का सही तरीका चुनना

2. चुनी गई रैपिंग लागू करना:

text-wrap: balance को खास तौर पर छोटे, कई लाइनों वाले एलिमेंट पर लागू करें. जैसे, हेडिंग (h1-h6), सबहेडिंग या पुलकोट.

/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
  /* Enables balanced line-breaking logic */
  text-wrap: balance;
}

text-wrap: pretty का इस्तेमाल करके, ऑप्टिमाइज़ किए गए एल्गोरिदम को चालू करें. यह एल्गोरिदम, पैराग्राफ़ की आखिरी कुछ लाइनों का आकलन करके, ब्रेक पॉइंट के लिए सबसे सही जगह ढूंढता है.

/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
  /* Enables pretty line-breaking logic for body copy */
  text-wrap: pretty;
}

ज़रूरी पाबंदियां और परफ़ॉर्मेंस

text-wrap: balance

• लाइनों की सीमा: ब्राउज़र, लाइनों की संख्या पर सीमा लागू करते हैं. इससे, परफ़ॉर्मेंस को बेहतर बनाए रखने में मदद मिलती है. आम तौर पर, Chromium में छह लाइनें और Firefox में 10 लाइनें होती हैं. अगर टेक्स्ट इस सीमा से ज़्यादा है, तो ब्राउज़र स्टैंडर्ड wrap के मुताबिक काम करता है. ऐसे टेक्स्ट ब्लॉक पर text-wrap: balance का इस्तेमाल करने से बचें जो इन सीमाओं को पार कर सकते हैं.
• टारगेट किया गया ऐप्लिकेशन: text-wrap: balance को ग्लोबल तौर पर लागू न करें (उदाहरण के लिए, * { text-wrap: balance; }). ब्राउज़र में इस्तेमाल किया जाने वाला बार-बार होने वाला "बाइनरी सर्च" एल्गोरिदम, कंप्यूटेशनल तौर पर महंगा होता है. इसका इस्तेमाल, खास और छोटे टेक्स्ट एलिमेंट तक ही सीमित रखें.
• चौड़ाई के साथ इंटरैक्शन: text-wrap: balance से कंटेनर की चौड़ाई (inline-size) में कोई बदलाव नहीं होता. इससे सिर्फ़ यह तय होता है कि उस चौड़ाई के अंदर टेक्स्ट रैपिंग कैसे होगी. इस वजह से, कंटेनर के आखिर में खाली जगह रह सकती है. इससे उन लेआउट पर असर पड़ सकता है जो पूरी चौड़ाई वाले टेक्स्ट ब्लॉक पर निर्भर करते हैं.

text-wrap: pretty

• परफ़ॉर्मेंस बनाम क्वालिटी: ज़रूरी: text-wrap: pretty, डिफ़ॉल्ट wrap (ग्रीडी) एल्गोरिदम की तुलना में ज़्यादा कंप्यूटेशनल पावर का इस्तेमाल करता है. इसकी वजह यह है कि यह ब्रेक पॉइंट को ऑप्टिमाइज़ करने के लिए, कई लाइनों (आम तौर पर आखिरी चार) का आकलन करता है. अगर आपके पेज पर बहुत ज़्यादा टेक्स्ट कॉन्टेंट है, तो इसे हर एलिमेंट पर ग्लोबल तौर पर लागू करने से बचें.
• कई लाइनों वाले टेक्स्ट के लिए सबसे सही: pretty के फ़ायदे, तीन या इससे ज़्यादा लाइनों वाले पैराग्राफ़ में सबसे ज़्यादा दिखते हैं. इसका असर, छोटे और एक लाइन वाले टेक्स्ट पर बहुत कम या बिलकुल नहीं पड़ता.
• ब्राउज़र के हिसाब से अलग-अलग व्यवहार: ध्यान रखें कि लागू करने की जानकारी अलग-अलग होती है. Chromium पर आधारित ब्राउज़र, आम तौर पर आखिरी की चार लाइनों पर फ़ोकस करते हैं. वहीं, अन्य इंजन पूरे पैराग्राफ़ का आकलन कर सकते हैं.

फ़ॉलबैक रणनीतियां

text-wrap: balance या text-wrap: pretty के साथ काम न करने वाले ब्राउज़र में, प्रॉपर्टी को अनदेखा कर दिया जाता है. साथ ही, टेक्स्ट को डिफ़ॉल्ट wrap के मुताबिक रैप किया जाएगा. यह एक परतदार वृद्धि है, जो स्टैंडर्ड टाइपोग्राफ़ी के हिसाब से अनुकूल गिरावट करती है. इससे यह पक्का होता है कि आपका कॉन्टेंट सभी ब्राउज़र पर आसानी से पढ़ा जा सके. साथ ही, उन ब्राउज़र पर बेहतर अनुभव मिले जो इसे सपोर्ट करते हैं.

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