सीएसएस टेक्स्ट-रैप: सुंदर

तेज़ी के बजाय बेहतरीन दिखने के लिए, ऑप्ट-इन करके टेक्स्ट रैपिंग को ऑप्टिमाइज़ करें.

Adam Argyle
Adam Argyle

Chrome 117 में, टेक्स्ट रैपिंग की नई सुविधा का इस्तेमाल किया जा सकता है. यह सुविधा, सीएसएस टेक्स्ट लेवल 4 में उपलब्ध है.

p {
  text-wrap: pretty;
}
https://codepen.io/web-dot-dev/pen/yLGmzLJ

टाइपोग्राफ़िक विडो और अनाथ, ऐसे एकल शब्द होते हैं जो पैराग्राफ़ या टेक्स्ट ब्लॉक के आखिर में अकेले होते हैं. विडो ऐसे शब्द होते हैं जो टेक्स्ट ब्लॉक में सबसे ऊपर होते हैं और टेक्स्ट ब्लॉक के आखिर में ऑर्फ़न वाले शब्द होते हैं. ये हमारी आंखों को टेक्स्ट को स्किम करने में रुकावट डाल सकते हैं. इससे कॉन्टेंट को पढ़ना मुश्किल हो जाता है. कुछ डिज़ाइनर इनसे हर कीमत पर बचते हैं और इन्हें रोकने के लिए बहुत मेहनत करते हैं.

किसी पैराग्राफ़ की शुरुआत में विधवा और अंत में कोई अनाथ दिखाया गया है. वहीं, पैराग्राफ़ की शुरुआत में विधवा या विधवाओं को नहीं दिखाया गया है.
Google Fonts—Widows &Orphans से ली गई इमेज

Chrome 117 में, सीएसएस की एक लाइन की मदद से अनाथ एलिमेंट से बचा जा सकता है: text-wrap: pretty.

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

एक पैराग्राफ़ में ऑर्फ़न एलिमेंट हैं और दूसरे में नहीं. दोनों पैराग्राफ़ के लिए, 'खराब' या 'अच्छा' बैज दिखाया गया है.
इमेज का सोर्स आपको मुख्य टेक्स्ट से अनाथ फ़ॉन्ट को क्यों हटाना चाहिए.

text-wrap: balance विकल्प भी है. इससे ऑरफ़न पैराग्राफ़ नहीं बनते. हालांकि, यह पक्का करता है कि टेक्स्ट इस तरह से रैप हो कि एक टेक्स्ट ब्लॉक बन जाए. मैं हेडलाइन के लिए balance और पैराग्राफ़ के लिए pretty का इस्तेमाल करता/करती हूं.

अगर आपको लाइनों की सही संख्या तय करने या परफ़ॉर्मेंस से जुड़ी बातों के लिए इस्तेमाल किए गए एल्गोरिदम के बारे में जानना है, तो इस सुविधा के पीछे काम करने वाले इंजीनियर कोजी इशी ने डिज़ाइन दस्तावेज़ बनाया है. यहां उसका लिंक दिया गया है.

अगर आपके पास लाइन ब्रेक करने की सुविधा को बेहतर बनाने या उससे जुड़े सुझाव हैं, तो हमें बताएं! Chromium बग ट्रैकर में समस्या दर्ज करें. इसमें, अच्छी और खराब लाइन ब्रेक के उदाहरणों के साथ जानकारी दें. हम आपसे संपर्क करेंगे.