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

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

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, सीएसएस की तुलना में अलग है orphans प्रॉपर्टी जो सीएसएस मल्टी-कॉलम का इस्तेमाल करते समय काम की होती है लेआउट भी सेट अप किया जा सकता है. साथ ही, pretty सिर्फ़ अनाथ बच्चों की जानकारी दिखाता है, विधवाओं की नहीं.

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

आपको अपने शरीर के टेक्स्ट से ऑर्फ़न को क्यों हटाना चाहिए, से ली गई इमेज.

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

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

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