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

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

Adam Argyle
Adam Argyle

Chrome 117 में, टेक्स्ट रैपिंग की नई सुविधा का इस्तेमाल किया जा सकता है—text-wrap: pretty सीएसएस टेक्स्ट लेवल 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 गड़बड़ी के ट्रैकर में अपनी समस्या के बारे में बताएं. साथ ही, अच्छे और खराब लाइन ब्रेक के उदाहरणों के बारे में बताएं. हम आपसे संपर्क करेंगे.