इस पृष्ठ का अनुवाद AI की सहायता से किया गया है। अंग्रेज़ी मूल ही प्रामाणिक है।
कर्निंग (kerning) दो विशिष्ट अक्षरों के बीच के स्थान का समायोजन है; वर्ड स्पेसिंग (word spacing) पूरी पंक्ति में शब्दों के बीच के अंतरालों की लय है। दोनों का लक्ष्य एक ही है: इतनी समरस बुनावट कि आँख गहरे गुच्छों और सफ़ेद छिद्रों पर ठोकर खाने के बजाय पाठ में सहज झपट्टों में आगे बढ़े। 2005 में इस अध्याय ने तर्क दिया था कि स्पेसिंग की गुणवत्ता बड़े पैमाने पर टाइपफ़ेस और रेंडरिंग इंजन की दया पर है, और स्क्रीन पर जस्टिफ़ाइड संरेखण पठनीयता को क्षीण करता है। बीस साल बाद पहले दावे को व्यापक संशोधन चाहिए। दूसरा, एक महत्वपूर्ण सावधानी के साथ, अब भी क़ायम है।
2005 के बाद क्या बदला
मूल संस्करण कर्निंग को ऐसी चीज़ मानता था जो वेब पर लगभग असंभव है। फ़ॉन्ट मोटे पिक्सेल-ग्रिड पर रास्टराइज़ होते थे, ब्राउज़र कर्निंग-जोड़ियों को अक्सर अनदेखा कर देते थे, और डिज़ाइनरों से कहा जाता था कि ऐसे फ़ेस चुनें जो इस उपेक्षा में भी बचे रहें। वह दुनिया जा चुकी है। हर आधुनिक ब्राउज़र OpenType कर्निंग को बॉडी टेक्स्ट पर डिफ़ॉल्ट रूप से लागू करता है — CSS प्रॉपर्टी font-kerning का डिफ़ॉल्ट auto है, जो टेक्स्ट आकारों पर कर्न-डेटा सक्षम करता है — और सबपिक्सेल पोज़िशनिंग का अर्थ है कि वे समायोजन वास्तव में रेंडर होते हैं। व्यावहारिक सलाह उलट गई है: अब आप कर्निंग के लिए लड़ते नहीं; वह आपको विरासत में मिलती है, और आपका काम है उसे तोड़ना नहीं।
दूसरा बड़ा परिवर्तन नियामक है। WCAG 2.1 ने सफलता मानदंड 1.4.12 Text Spacing (स्तर AA, WCAG 2.2 में यथावत) प्रस्तुत किया, जो अपेक्षा करता है कि उपयोगकर्ता के स्पेसिंग-ओवरराइड पर सामग्री कोई कार्यक्षमता या सामग्री न खोए — विशेष रूप से फ़ॉन्ट आकार के 0.12 गुना तक लेटर-स्पेसिंग और 0.16 गुना तक वर्ड-स्पेसिंग, साथ ही लाइन हाइट और अनुच्छेद-दूरी में वृद्धि। यह स्पेसिंग को पूरी तरह नए ढाँचे में रखता है। वह केवल एक सौंदर्य-निर्णय नहीं है जो डिज़ाइनर एक बार लेता है; वह एक चर है जिसे बदलना पाठक का अधिकार है। स्थिर-ऊँचाई कंटेनर, तंग बटन और काट-छाँट के शिकार लेबल, जो इन ओवरराइड पर कटते या ओवरलैप करते हैं, सुगम्यता-विफलताएँ हैं। शिप करने से पहले अपने लेआउट का किसी टेक्स्ट-स्पेसिंग बुकमार्कलेट या ब्राउज़र-एक्सटेंशन से परीक्षण करें।
तीसरा, CSS अब असली नियंत्रण देता है। word-spacing प्रॉपर्टी शब्दों के बीच के अंतराल सीधे समायोजित करती है, letter-spacing ट्रैकिंग संभालती है (अगला अध्याय देखें), और font-kerning व font-feature-settings OpenType व्यवहार तक स्पष्ट पहुँच देते हैं। उससे भी नया, text-wrap: pretty ब्राउज़र से पंक्ति-विच्छेद पर अतिरिक्त मेहनत माँगता है — अनाथ शब्दों और खराब विच्छेद-बिंदुओं से बचते हुए — जो रैग्ड-राइट पाठ की स्पेसिंग-बुनावट को बिना किसी हस्तचालित हस्तक्षेप के चुपचाप सुधार देता है।
व्यवहार में कर्निंग
चूँकि कर्निंग डिफ़ॉल्ट रूप से चालू है, बची हुई विफलताएँ अधिकतर स्वयं-आमंत्रित हैं। आक्रामक धनात्मक letter-spacing कर्न-जोड़ियों को जोड़े गए स्थान में डुबोकर प्रभावी रूप से निष्क्रिय कर देती है — बॉडी टेक्स्ट को ट्रैक करना जोखिम भरा होने का एक कारण यही है। घटिया बने डिस्प्ले फ़ॉन्ट अब भी विरल कर्न-तालिकाओं के साथ आते हैं, और शीर्षक-आकारों पर वे अंतराल खटकते हैं — क्लासिक समस्याग्रस्त जोड़ियाँ, जैसे कैपिटल T या V के बाद कोई लोअरकेस स्वर। डिस्प्ले आकारों में किसी एक जोड़ी को हाथ से ठीक करना उचित है, लेकिन यदि किसी फ़ेस को लगातार सुधार चाहिए, तो वह गलत फ़ेस है।
2005 की एक वास्तविक चिंता जीवित है: फ़ॉन्ट की गुणवत्ता अब भी मायने रखती है। वेरिएबल फ़ॉन्ट और पेशेवर रूप से निर्मित वेबफ़ॉन्ट प्रायः विस्तृत स्पेसिंग व कर्निंग डेटा रखते हैं; अनिश्चित मूल के मुफ़्त फ़ॉन्ट अक्सर नहीं। किसी उम्मीदवार फ़ेस का मूल्यांकन असली अनुच्छेद सेट करके करें, नमूना-पंक्ति से नहीं।
वर्ड स्पेसिंग और जस्टिफ़िकेशन
मूल निष्कर्ष — कि जस्टिफ़ाइड संरेखण स्क्रीन पर पठनीयता घटाता है — अपने सामान्य रूप में सही बना हुआ है, लेकिन तंत्र सटीकता का हक़दार है। पूर्ण जस्टिफ़िकेशन हर पंक्ति को शब्दों के बीच के स्थानों को खींचकर या दबाकर एक स्थिर माप पर बाध्य करता है। हाइफ़नेशन के बिना एल्गोरिद्म के पास काम करने को कम विच्छेद-बिंदु होते हैं, इसलिए कुछ पंक्तियाँ गुफानुमा शब्द-अंतरालों पर समाप्त होती हैं। जब वे अंतराल क्रमिक पंक्तियों में ऊर्ध्वाधर रूप से जमा होते हैं, तो अनुच्छेद के भीतर नीचे की ओर बहती सफ़ेद जगह की "नदियाँ" (rivers) बनाते हैं। नदियाँ केवल कुरूप नहीं हैं: वे क्षैतिज पठन-पथ से प्रतिस्पर्धा करती हैं, और जो पाठक स्थिर स्पेसिंग-संकेतों पर निर्भर हैं — जिनमें कई डिस्लेक्सिक पाठक शामिल हैं — वे असंगत रूप से प्रभावित होते हैं। असमान वर्ड-स्पेसिंग उस पैराफ़ोवियल पूर्वावलोकन को बाधित करती है जो आँख को अपनी अगली छलाँग की योजना बनाने देता है।
प्रिंट ने इसे सदियों पहले हाइफ़नेशन और जस्टिफ़िकेशन को साथ चलाकर हल किया था, और वेब अब सिद्धांततः वही कर सकता है: CSS की hyphens: auto अधिकांश ब्राउज़रों में शब्दकोश-आधारित हाइफ़नेशन सक्षम करती है, और वह जस्टिफ़ाइड टेक्स्ट की स्पेसिंग-विषमता नाटकीय रूप से घटाती है। लेकिन ब्राउज़र का जस्टिफ़िकेशन अब भी पंक्ति-दर-पंक्ति का एक सरल एल्गोरिद्म है, न कि पेशेवर पेज-लेआउट सॉफ़्टवेयर का अनुच्छेद-स्तरीय अनुकूलन, इसलिए वेब पर हाइफ़नेटेड जस्टिफ़ाइड टेक्स्ट भी सुसज्जित पुस्तक की समरसता की बराबरी विरले ही करता है। व्यावहारिक निष्कर्ष: स्क्रीन-पठन के लिए रैग्ड-राइट (बाएँ-संरेखित) पाठ को डिफ़ॉल्ट रखें। यदि किसी डिज़ाइन को वाक़ई जस्टिफ़िकेशन चाहिए, तो हाइफ़नेशन सक्षम करें, माप उदार रखें, और संकरी चौड़ाइयों पर परिणाम का निरीक्षण करें — संकरे स्तंभ का जस्टिफ़ाइड टेक्स्ट ही वह जगह है जहाँ नदियाँ पनपती हैं।
यह भी ध्यान दें कि WCAG 2.2 का सफलता मानदंड 1.4.8 Visual Presentation (स्तर AAA) पाठ-खंडों के लिए अपनी अपेक्षाओं में "text is not justified" को स्पष्ट रूप से सूचीबद्ध करता है। उस AA स्तर पर भी, जिसे अधिकांश टीमें लक्ष्य बनाती हैं, यह इस बात का प्रबल संकेत है कि मानक के लेखक किस निष्कर्ष पर पहुँचे।
डिज़ाइन-चर के रूप में वर्ड स्पेसिंग
बॉडी टेक्स्ट के लिए word-spacing का सीधा हेरफेर विरले ही चाहिए — टाइपफ़ेस का अंतर्निर्मित स्पेस-ग्लिफ़ प्रायः सही होता है — लेकिन किनारे के मामलों में वह अपनी कीमत वसूलता है: ऑल-कैप्स नेविगेशन-लेबलों में शब्द-अंतराल हल्के खोलना, या बड़ी डिस्प्ले सेटिंग्स में उन्हें कसना, जहाँ डिफ़ॉल्ट स्पेस बड़े दिखते हैं। कोई भी समायोजन em-सापेक्ष इकाइयों में निर्दिष्ट होना चाहिए ताकि वह पाठ के साथ स्केल हो, और उसे 1.4.12 द्वारा अनिवार्य उपयोगकर्ता-ओवरराइड सहने ही होंगे। यदि आपका लेआउट ठीक उसी स्पेसिंग पर काम करता है जो आपने चुनी थी, तो वह काम नहीं करता।
CSS में
body {
font-kerning: normal; /* on by default — never disable it */
text-align: left; /* justification without hyphenation makes rivers */
}
p { text-wrap: pretty; }
/* If justification is required, hyphenate: */
.justified { text-align: justify; hyphens: auto; }अनुशंसाएँ
- बॉडी टेक्स्ट डिफ़ॉल्ट रूप से रैग्ड-राइट सेट करें; पूर्ण जस्टिफ़िकेशन को अपवाद मानें, जिसे hyphens: auto और संकरी चौड़ाइयों पर परीक्षण चाहिए।
- font-kerning को उसके डिफ़ॉल्ट पर छोड़ें; कर्निंग अक्षम न करें, और ऐसी भारी letter-spacing से बचें जो कर्न-जोड़ियों को दबा दे।
- जहाँ समर्थित हो, बॉडी कॉपी पर text-wrap: pretty उपयोग करें — लगभग शून्य लागत पर बेहतर विच्छेद-बिंदु और स्पेसिंग-बुनावट।
- word-spacing या letter-spacing का कोई भी समायोजन em इकाइयों में निर्दिष्ट करें, पिक्सेल में कभी नहीं।
- सत्यापित करें कि लेआउट WCAG 1.4.12 के ओवरराइड — लेटर-स्पेसिंग 0.12em, वर्ड-स्पेसिंग 0.16em, लाइन हाइट 1.5 — बिना कटाव, ओवरलैप या सामग्री-हानि के झेलते हैं।
- पूर्ण कर्निंग व स्पेसिंग तालिकाओं वाले टाइपफ़ेस चुनें; उन्हें सेट अनुच्छेदों से आँकें, नमूनों से नहीं।