`text-wrap: pretty` के साथ बेहतर टाइपोग्राफी पाना

 (webkit.org)
4 पॉइंट द्वारा GN⁺ 2025-04-09 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • वेब टाइपोग्राफी को और सुंदर बनाने वाला text-wrap: pretty पेश किया गया
  • Safari Technology Preview 216 में नया जोड़ा गया यह फीचर वेब टाइपोग्राफी को अधिक परिष्कृत और पढ़ने में आसान बनाता है
  • पहले वेब टेक्स्ट लेआउट हर पंक्ति को अलग-अलग प्रोसेस करता था, लेकिन pretty पूरे पैराग्राफ को ध्यान में रखकर लाइन ब्रेक की जगह तय करता है
  • यह फीचर पठनीयता और accessibility को बेहतर बनाता है, और पारंपरिक typesetting तरीकों से प्रेरित है

पारंपरिक टाइपोग्राफी से अच्छे लाइन ब्रेक सीखना

  • बहुत छोटी आखिरी पंक्ति से बचना: आखिरी पंक्ति में सिर्फ एक शब्द रह जाना सौंदर्य की दृष्टि से अच्छा नहीं माना जाता
  • पैराग्राफ के खुरदरे किनारे सुधारना: जब पंक्तियों के अंत बहुत असमान दिखते हैं तो पठनीयता घटती है, इसलिए उन्हें जितना संभव हो संतुलित रखना चाहिए
  • खराब hyphen के उपयोग से बचना: लगातार दो पंक्तियों में hyphen आना या शब्दों को जरूरत से ज्यादा तोड़ना पढ़ने में कठिन बनाता है
  • टाइपोग्राफी river को रोकना: पंक्तियों के बीच खाली जगह का लंबवत जुड़ जाना, जो नज़र को भटका देता है, उससे बचना चाहिए

वेब लाइन ब्रेकिंग का इतिहास

  • वेब 1991 से "पहली पंक्ति से एक-एक पंक्ति करके प्रोसेस करने" वाली पद्धति का उपयोग करता आया है
  • इस तरीके में हर पंक्ति की टेक्स्ट लंबाई अलग से गिनी जाती है और पंक्तियों के बीच सामंजस्य पर ध्यान नहीं दिया जाता
  • InDesign या LaTeX जैसे टूल पूरे पैराग्राफ को देखकर लाइनें सेट करते हैं, लेकिन वेब हाल तक ऐसा नहीं कर पाता था
  • Safari Technology Preview 216 में पहली बार पूरे पैराग्राफ को ध्यान में रखने वाली लाइन ब्रेकिंग पद्धति लाई गई है

text-wrap: pretty किन समस्याओं को हल करता है

  • यह पूरे पैराग्राफ का मूल्यांकन करके सबसे उपयुक्त लाइन ब्रेक चुनता है
  • यह छोटी आखिरी पंक्ति को रोकता है, पंक्तियों के अंत के आकार (rag) को सुधारता है, और अनावश्यक hyphen को कम करता है
  • Chromium आधारित ब्राउज़र पैराग्राफ की सिर्फ आखिरी 4 पंक्तियों को सुधारते हैं, जबकि WebKit पूरे पैराग्राफ पर इसे लागू करता है
  • river प्रभाव को यह अभी तक नहीं सुधारता, लेकिन आगे इसे जोड़ने की योजना है

अलग-अलग ब्राउज़रों में implementation का अंतर

  • pretty CSS Working Group की परिभाषा के अनुसार ब्राउज़र दर ब्राउज़र अलग तरह से काम कर सकता है
  • WebKit इसे पूरे पैराग्राफ पर लागू करता है, जबकि Chromium केवल आखिरी 4 पंक्तियों पर
  • इसलिए डेवलपर इसे सिर्फ आखिरी पंक्ति सुधारने के लिए नहीं, बल्कि पूरी टाइपोग्राफी बेहतर करने के लिए उपयोग कर सकते हैं

डेमो देखें

  • CodePen डेमो में pretty, balance, hyphen, alignment आदि के संयोजन को आज़माया जा सकता है
  • "show guides" और "show ghosts" चालू करके बदलाव से पहले और बाद की तुलना की जा सकती है
  • अलग-अलग भाषाओं (अंग्रेज़ी, अरबी, जर्मन, चीनी, जापानी) में इसका असर देखा जा सकता है

प्रदर्शन को लेकर चिंता दूर करना

  • बहुत अधिक पंक्तियों वाले कंटेंट में प्रदर्शन पर असर पड़ सकता है, लेकिन सामान्य पैराग्राफ में कोई प्रदर्शन समस्या नहीं है
  • जब तक पैराग्राफ सैकड़ों या हजारों पंक्तियों का न हो, इसे आराम से इस्तेमाल किया जा सकता है
  • जरूरत पड़ने पर WebKit लंबे पैराग्राफ को हिस्सों में बाँटकर प्रोसेस करेगा ताकि प्रदर्शन बना रहे

pretty और balance में अंतर

  • pretty टेक्स्ट को कंटेनर की चौड़ाई भरने देता है, लेकिन लाइन ब्रेक को अधिक स्वाभाविक बनाता है
  • balance का ध्यान सभी पंक्तियों की लंबाई समान करने पर होता है, इसलिए कंटेनर कम भरता है
  • आम तौर पर pretty मुख्य लेखन के लिए उपयुक्त है, जबकि balance शीर्षक, caption और teaser टेक्स्ट के लिए बेहतर है
  • दोनों का उपयोग छोटे टेक्स्ट पर किया जा सकता है, लेकिन लंबे मुख्य टेक्स्ट में balance से बचना बेहतर है

text-wrap के दूसरे property values

text-wrap: avoid-short-last-lines

  • यह नया जोड़ा गया value है, जो केवल बहुत छोटी आखिरी पंक्ति से बचने पर केंद्रित है
  • अभी तक किसी भी ब्राउज़र में इसे implement नहीं किया गया है

text-wrap: auto

  • यह default value है, जो 1991 से इस्तेमाल हो रहे लाइन-आधारित "greedy line breaking" algorithm का उपयोग करती है
  • भविष्य में ब्राउज़र इस default behavior को भी बेहतर बना सकते हैं

text-wrap: stable

  • फिलहाल यह auto की तरह ही काम करता है, लेकिन editable टेक्स्ट के लिए स्थिर line breaking देता है
  • यह सुनिश्चित करता है कि animation या टेक्स्ट इनपुट के दौरान line break न बदलें

text-wrap की विस्तृत properties

  • text-wrap वास्तव में text-wrap-mode और text-wrap-style नाम की दो properties का shorthand है

  • text-wrap-mode: लाइन ब्रेक की अनुमति तय करता है (wrap / nowrap)

  • text-wrap-style: line breaking algorithm चुनता है (auto, stable, balance, pretty, avoid-short-last-lines)

    text-wrap-style: pretty;  
text-wrap-mode: wrap;

  • white-space property के साथ उपयोग करते समय whitespace handling भी देखनी चाहिए

संक्षिप्त सार

  • text-wrap: pretty वेब टेक्स्ट line breaking को पहले की तुलना में कहीं अधिक परिष्कृत बनाता है
  • Safari Technology Preview 216 में इसे पूरे पैराग्राफ के मूल्यांकन वाले तरीके से लागू किया गया है
  • लंबे मुख्य टेक्स्ट पर भी इसका प्रदर्शन प्रभाव लगभग नहीं के बराबर है, जबकि पठनीयता और दृश्य गुणवत्ता में बड़ा सुधार मिलता है
  • balance से इसका अंतर समझकर, कंटेंट के प्रकार के अनुसार सही विकल्प चुनना ज़रूरी है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-04-09
Hacker News राय
  • यह सुनकर हँसी आती है कि कई डेवलपर "text-wrap: pretty" के performance को लेकर चिंतित हैं। यह मानना मुश्किल है कि इतने सारे डेवलपर वास्तव में text wrapping के performance के बारे में सोचते हैं
  • डेमो का content अंग्रेज़ी में है। अंग्रेज़ी अजीब है। यह विषय से संबंधित नहीं है, और जब तक उद्देश्य शब्दों को पुनर्व्यवस्थित करके line breaks को बेहतर बनाना न हो, तब तक इसका खास संबंध नहीं है
  • उम्मीद है कि यह feature ereader में जोड़ा जाएगा। ereader के layout engine अच्छे नहीं होते
  • ऑनलाइन text को सुंदर बनाने में बहुत कम मेहनत और ध्यान दिया गया है। वेब ने text को सदियों पीछे धकेल दिया है। यह feature स्वागत योग्य है
  • Safari Technology Preview में "text-wrap: pretty" support जोड़ा गया है, जिससे web typography में अभूतपूर्व स्तर की refinement आती है। caniuse.com के अनुसार Chrome सितंबर 2023 से इस feature को support कर रहा है। यह समझना कठिन है कि इसमें "अभूतपूर्व" क्या है
  • क्या कोई "text-align: justify" और "text-wrap: pretty" के बीच का अंतर जानता है? Chrome में "text-wrap: pretty" कहीं अधिक smooth effect देता है। मैंने देखा कि औसत blog के body text में दोनों का उपयोग करना अच्छा होगा या नहीं, और लगता है कि दोनों अलग-अलग तरह के बदलाव लाते हैं
  • यह feature शानदार है। छोटा आख़िरी line और unevenness पर ध्यान देना आश्चर्यजनक नहीं है। लेकिन यह अभी तक rivers को रोकने के लिए adjustment नहीं करता। यह कल्पना करना कठिन है कि rivers को परिभाषित करने वाला metric कैसे तय किया जाए। जिज्ञासा है कि क्या किसी ने वास्तव में काम करने वाला कोई चतुर metric बनाया है
  • orphan words से बचने की कोशिश करने वाला paragraph "large" शब्द को अकेला छोड़ देता है। "text-wrap: pretty" लागू करने पर यह ठीक हो जाता है
  • CSS Working Group ने "pretty" का उद्देश्य यह रखा है कि हर browser text wrapping को बेहतर बनाने के लिए जो कर सकता है, वह करे। इसका मतलब यह नहीं कि सभी browser को बिल्कुल एक जैसा चयन करना होगा। Chrome के implementation की वजह से कई web developer यह उम्मीद करते हैं that this value is for preventing short last lines. लेकिन यही इसका इरादा नहीं है
  • मैं पहले से headlines में "text-wrap: balance" इस्तेमाल कर रहा हूँ। खराब wrapping से बचने के लिए कुछ खास शब्दों को जोड़ने की कोशिश की थी। "text-wrap: pretty" body text में इसी तरह की समस्याएँ हल करेगा