किसी तंग अक्षर-युग्म को अलग करने के लिए, पहले हेडिंग की ट्रैकिंग और फ़ॉन्ट कर्निंग जाँचें। छोटे लैटिन लेबल में, किसी एक सीमा को खोलने के लिए स्थानीय इनलाइन मार्जिन दिया जा सकता है, लेकिन इससे वहाँ शेपिंग बाधित होती है। यह Mac वर्कफ़्लो बताता है कि यह समझौता कब उचित है।

क्या समस्या ट्रैकिंग, कर्निंग या किसी स्थानीय टकराव की है?

यह गाइड Mac पर वेब हेडिंग समायोजित करने वाले ऐसे व्यक्ति के लिए है, जो उसका HTML और CSS संपादित कर सकता है। उद्देश्य बाकी टेक्स्ट को सामान्य ब्राउज़र फ़्लो में रखते हुए एक असहज अक्षर-युग्म को बेहतर बनाना है। कृत्रिम हेडिंग NOVA STUDIO एक ठोस उदाहरण देती है; इसका अर्थ यह नहीं कि हर फ़ॉन्ट में वे अक्षर टकराते हैं।

ट्रैकिंग किसी चुने हुए टेक्स्ट में सभी अक्षरों के बीच की दूरी नियंत्रित करती है। CSS में इसके लिए letter-spacing है: धनात्मक मान दूरी बढ़ाते हैं, जबकि ऋणात्मक मान उसे घटाते हैं। इसलिए पूरी हेडिंग पर इस गुण का मान बढ़ाने से समस्या वाले युग्म के अलावा भी कई जगह बदलाव होगा। पहले जाँचें कि कहीं विरासत में मिला ऋणात्मक मान तो समस्या का कारण नहीं है। MDN: letter-spacing

कर्निंग फ़ॉन्ट में मौजूद स्पेसिंग जानकारी का उपयोग करती है। CSS गुण font-kerning में auto, normal या none मान स्वीकार होते हैं; यह किसी नामित अक्षर-युग्म के लिए मनचाही दूरी स्वीकार नहीं करता। इसे normal पर सेट करने से फ़ॉन्ट की कर्निंग जानकारी का उपयोग करने का अनुरोध होता है, लेकिन इससे अनुपलब्ध युग्म समायोजन नहीं मिलता और न ही यह सुनिश्चित होता है कि कोई खास संयोजन सही दिखेगा। MDN: font-kerning

मार्कअप जोड़ने से पहले इस निर्णय-सहायक का उपयोग करें:

आपको क्या दिखता है पहली कार्रवाई आगे कब बढ़ें
ज़्यादातर अंतराल बहुत तंग लगते हैं हेडिंग की तुलना letter-spacing: normal से करें तभी आगे बढ़ें जब किसी एक युग्म पर अब भी ध्यान देना हो
टेक्स्ट ऐनिमेशन शुरू होने के बाद हेडिंग अलग दिखती है इसकी तुलना मूल, अविभाजित टेक्स्ट से करें सुधार करने से पहले स्प्लिट करने की व्यवस्था की जाँच करें
बाकी छोटा लैटिन शब्द ठीक लगता है, लेकिन एक सीमा तंग दिखती है स्थानीय स्पेसिंग समायोजन पर विचार करें यह स्वीकार करें कि उस सीमा पर शेपिंग बदल जाएगी
मूल शेपिंग को हूबहू बनाए रखना ज़रूरी है टेक्स्ट रन को एकसाथ रखें और किसी दूसरे उपयुक्त फ़ॉन्ट या फ़ॉन्ट संस्करण की तुलना करें ऐसा रेंडरिंग चुनें जो सीमा डाले बिना ठीक काम करे

Chrome में जिस पेज की जाँच कर रहे हैं, वहाँ Command–Option–C दबाएँ, फिर हेडिंग पर क्लिक करें। Elements पैनल उसका मार्कअप चुनता है और Styles टैब लागू CSS दिखाता है। हेडिंग के नियम, विरासत में मिली ट्रैकिंग और अलग-अलग अक्षरों के चारों ओर बने रैपर देखें। ये निरीक्षण चरण Chrome के दस्तावेज़ित Mac वर्कफ़्लो के अनुसार हैं। Open Chrome DevTools

तुलना सही फ़ॉन्ट, वज़न और हेडिंग आकार में करें। उदाहरण के Arial टेक्स्ट के लिए चुना गया सुधार केवल प्रदर्शन के लिए है; वास्तविक हेडिंग देखते हुए सही समायोजन चुनें। मूल घोषणाएँ दर्ज कर लें, ताकि एक बार में एक बदलाव की तुलना कर सकें।

स्थानीय समायोजन से क्या-क्या सुरक्षित रखा जा सकता है?

एक सादा span ऐसा स्टाइलिंग हुक देता है जिसका अपना कोई अर्थ नहीं होता। यह अपने चाइल्ड एलिमेंट दर्शाता है, इसलिए हेडिंग में NOVA STUDIO टेक्स्ट बरकरार रखा जा सकता है, जबकि एक क्लास उस उपसर्ग की पहचान कर सकती है जो समस्या वाली सीमा पर समाप्त होता है। WHATWG HTML Standard: The span element

हालाँकि, इनलाइन रैपर और स्पेसिंग समायोजन के नतीजे अलग होते हैं। W3C के मौजूदा CSS Text Level 3 Candidate Recommendation Draft के अनुसार, जब इनलाइन सीमा पर फ़ॉर्मैटिंग में कोई प्रभावी बदलाव न हो, तो शेपिंग उस सीमा के पार लगातार बनी रहनी चाहिए। यह यह भी बताता है कि वर्णों को अलग करने वाला गैर-शून्य इनलाइन मार्जिन, बॉर्डर या पैडिंग उस सीमा पर शेपिंग तोड़ देता है। इसलिए स्थानीय मार्जिन यह सुनिश्चित नहीं कर सकता कि समायोजित युग्म के पार मूल कर्निंग बनी रहेगी। CSS Text Module Level 3: Shaping Across Element Boundaries

इस उदाहरण में NOV को एक इनलाइन स्पैन के अंदर रखें और उसके तुरंत बाद A रखें। उस उपसर्ग पर अंत का मार्जिन जोड़ने से V–A की सीमा खुलती है। बाकी अक्षर सामान्य इनलाइन टेक्स्ट रहते हैं; हर अक्षर को अलग बॉक्स देने की ज़रूरत नहीं है। क्षैतिज, बाएँ-से-दाएँ टेक्स्ट में margin-inline-end दायाँ मार्जिन दर्शाता है। MDN: margin-inline-end

नतीजे का मूल्यांकन करते समय इस सीमा को ध्यान में रखें: दिखने वाला बदलाव उस सीमा पर शेपिंग समायोजन के खोने और जोड़े गए मार्जिन, दोनों से बनता है। यह ज़रूरी नहीं कि मूल युग्म स्पेसिंग में ठीक निर्दिष्ट दूरी जोड़ने जितना ही हो। अगर मूल शेपिंग को बनाए रखना ज़रूरी है, तो टेक्स्ट रन को एकसाथ रखें और फ़ॉन्ट विकल्पों की तुलना करें।

अपने Mac पर पूरा स्थानीय उदाहरण आज़माएँ

इस तकनीक को अपनी देखरेख वाली हेडिंग पर लागू करने से पहले अलग प्रीव्यू बनाएँ। TextEdit में File → New चुनें, फिर Format → Make Plain Text चुनें। नीचे दिया पूरा दस्तावेज़ पेस्ट करें, इसे pair-preview.html नाम से सहेजें और पूछे जाने पर Use .html चुनें। Apple HTML फ़ाइलें बनाने की इस प्रक्रिया का दस्तावेज़ देता है। Work with HTML documents in TextEdit on Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local pair spacing preview</title>
  <style>
    body {
      margin: 2rem;
      background: #fafafa;
      color: #222;
    }

    main {
      max-width: 48rem;
    }

    h1 {
      --pair-gap: 0.02em;
      font-family: Arial, sans-serif;
      font-size: 64px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: normal;
      font-kerning: normal;
    }

    .keep-word {
      white-space: nowrap;
    }

    .pair-prefix {
      margin-inline-end: var(--pair-gap);
    }
  </style>
</head>
<body>
  <main>
    <p>Heading preview</p>
    <h1><span class="keep-word"><span class="pair-prefix">NOV</span>A</span> STUDIO</h1>
    <p>Change the pair gap, save, and reload to compare.</p>
  </main>
</body>
</html>

सहेजे गए दस्तावेज़ को अपने ब्राउज़र में खोलें। हेडिंग का टेक्स्ट स्रोत की दिखाई गई एक ही पंक्ति में रखें: NOV और A के बीच कोई स्पेस नहीं है, और STUDIO से पहले एक सामान्य स्पेस है। इससे लेबल के शब्द जस के तस रहते हैं और कोई दिखाई देने वाला या विशेष स्पेसिंग कैरेक्टर नहीं जुड़ता।

कस्टम प्रॉपर्टी --pair-gap चुनी गई सीमा पर मार्जिन नियंत्रित करती है। इसका शुरुआती मान केवल उदाहरण के लिए है। 64px फ़ॉन्ट आकार पर 0.02em, 1.28 CSS पिक्सेल मार्जिन के बराबर है; 40px पर यह 0.8 CSS पिक्सेल के बराबर है। मार्जिन टेक्स्ट आकार के साथ बढ़ता है, हालाँकि दृश्य सुधार का निरीक्षण करना फिर भी ज़रूरी है। MDN बताता है कि em मार्जिन टेक्स्ट आकार के सापेक्ष होते हैं। MDN: margin-inline-end

बाहरी .keep-word स्पैन white-space: nowrap केवल NOVA पर लागू करता है। इससे वह छोटा शब्द एकसाथ रहता है, जबकि STUDIO से पहले का सामान्य स्पेस वहाँ लाइन तोड़ने देता है। इसे पूरी हेडिंग पर लागू करने से बचें, जब तक आपको जान-बूझकर उसे एक ही न टूटने वाली पंक्ति में रखना न हो। MDN: white-space

अगर TextEdit बाद में फ़ाइल को फ़ॉर्मैट किए गए कंटेंट की तरह खोले, तो File → Open चुनें, फ़ाइल चुनें, Show Options चुनें और Ignore rich text commands चुनें। या TextEdit → Settings → Open and Save में Display HTML files as HTML code instead of formatted text चालू करें। Apple’s TextEdit HTML guide

सबसे छोटा उपयोगी सुधार कैसे चुनें?

जब तक अंतराल ध्यान खींचने न लगे, उसे बार-बार बढ़ाने के बजाय नियंत्रित तुलना करें:

  1. --pair-gap को 0em पर सेट करें, सहेजें और फिर से लोड करें। पहले बिना समायोजन वाली हेडिंग देखें।
  2. 0.01em, फिर 0.02em आज़माएँ; हर तुलना के बीच सहेजें और फिर से लोड करें। ये आज़माने के मान हैं, टाइपोग्राफ़ी के सुझाए गए मानक नहीं।
  3. युग्म को उसके ठीक पास के अक्षरों के साथ देखें। जब वह शब्द की समग्र लय में फिट हो जाए, तब रुकें।
  4. ब्राउज़र विंडो को इतना संकरा करें कि हेडिंग अगली पंक्ति में जाए। केवल समायोजित अक्षरों को नहीं, पूरी हेडिंग को जाँचें।
  5. आपके लेआउट में इस्तेमाल होने वाले हर हेडिंग आकार और वज़न पर यह प्रक्रिया दोहराएँ।

शून्य और गैर-शून्य मार्जिन के बीच की तुलना सावधानी से करें। यह सीमा पार करने पर पहले बताई गई शेपिंग सीमा बनती है, इसलिए पहला बदलाव संख्यात्मक मार्जिन से बड़ा लग सकता है। अगर थोड़ा-सा धनात्मक मान भी युग्म को बहुत ढीला कर देता है, तो यह उपाय हटा दें और फ़ॉन्ट या हेडिंग की मौजूदा स्टाइलिंग पर फिर से विचार करें।

यह समायोजन लेआउट में जगह भी लेता है। सीमा के बाद के अक्षर टेक्स्ट के साथ आगे खिसकते हैं, और उपलब्ध चौड़ाई के करीब की हेडिंग अलग तरह से अगली पंक्ति में जा सकती है। स्थानीय स्पेसिंग हर अंतराल में ट्रैकिंग जोड़ने से बचाती है; इससे लाइन का अंत जस का तस रहने की गारंटी नहीं मिलती। बदलाव रखने से पहले संकरे और चौड़े, दोनों रूपों में लेआउट जाँचें।

बिना लाइन टूटने वाला रैपर किसी छोटे शब्द तक सीमित रखें। अगर शब्द उपलब्ध चौड़ाई से बड़ा है, तो वह बाहर निकल सकता है। उस लेआउट के लिए हेडिंग का आकार घटाएँ या ओवरफ़्लो छिपाने के बजाय रैपर पर फिर से विचार करें। MDN white-space के ज़रिए लाइन-व्रैपिंग नियंत्रित करने और शब्दों के भीतर ब्रेक देने वाले गुणों के बीच अंतर बताता है। MDN: white-space

अगर हेडिंग में पहले से SplitType है तो?

SplitType एक ऐनिमेशन यूटिलिटी है जो पंक्तियों, शब्दों और अक्षरों को एलिमेंट में लपेटती है। इसके आधिकारिक दस्तावेज़ों में सलाह है कि स्प्लिट या वापस जोड़ते समय अक्षरों के हल्के खिसकाव को रोकने के लिए लक्षित एलिमेंट पर font-kerning: none रखें। यह सलाह इसके ऐनिमेशन वर्कफ़्लो के लिए है; इसे अपनाने से पूरी हेडिंग की स्पेसिंग बदल सकती है। SplitType documentation

अगर मौजूदा हेडिंग में SplitType है, तो एक और सुधार जोड़ने से पहले मूल टेक्स्ट से तुलना करें। लाइब्रेरी एक इंस्टेंस मेथड instance.revert() का दस्तावेज़ देती है, जो मूल कंटेंट बहाल करता है। जिस इम्प्लीमेंटेशन में पहले से SplitType इंस्टेंस मौजूद है, वहाँ मूल स्थिति देखने के लिए उसका दस्तावेज़ित लाइफ़साइकल इस्तेमाल करें। ऊपर दिए स्थानीय HTML उदाहरण को किसी लाइब्रेरी की ज़रूरत नहीं है। SplitType: Reverting Split Text

आकार बदलने पर व्यवहार भी जाँचें। SplitType के अनुसार, रिलेटिव पोज़िशन वाले शब्द और अक्षर स्प्लिट फिर से व्यवस्थित हो सकते हैं, जबकि लाइन स्प्लिट या एब्सोल्यूट पोज़िशनिंग के लिए कंटेनर का आकार बदलने के बाद दोबारा स्प्लिट करना पड़ता है। अगर टकराव केवल चौड़ाई बदलने पर दिखता है, तो जोड़ी के लिए स्थायी सुधार तय करने से पहले उस लेआउट व्यवहार की जाँच करें। SplitType: Responsive Text

इस एकल अक्षर-युग्म वाले काम के लिए व्यावहारिक निष्कर्ष यह है कि केवल स्पेसिंग समायोजित करने का हैंडल पाने के लिए अक्षरों को स्प्लिट न करें। इससे उदाहरण की ज़रूरत से अधिक लेआउट सीमाएँ जुड़ जाती हैं।

टेक्स्ट रन को कब एकसाथ रखना चाहिए?

स्थानीय मार्जिन वाला उदाहरण केवल सादे लैटिन अक्षरों के बीच सोच-समझकर चुनी गई सीमा पर इस्तेमाल करें। इसे ऐसा सामान्य नियम न बनाएँ जो हर स्ट्रिंग पोज़िशन के चारों ओर रैपर जोड़े। W3C चेतावनी देता है कि एलिमेंट सीमाओं से ग्रैफीम क्लस्टर या लिगेचर को बाँटने पर रेंडरिंग असंगत या अवांछित हो सकती है। स्ट्रिंग में अक्षर की कोई स्थिति अपने-आप शेपिंग बाधित करने के लिए सही जगह नहीं होती। CSS Text Module Level 3: Characters and Letters

जब शेपिंग को हूबहू बनाए रखना ज़रूरी हो, तो हेडिंग को लगातार टेक्स्ट के रूप में रखें, उसकी मूल कर्निंग सेटिंग की तुलना करें और ऐसा फ़ॉन्ट रेंडरिंग चुनें जिसमें युग्म संतोषजनक दिखे। जब नियंत्रित स्थानीय अपवाद स्वीकार्य हो, तो एक सीमा जोड़ें, सबसे छोटा उपयोगी मार्जिन रखें और बने हुए शब्द व लाइन ब्रेक को साथ में जाँचें।

स्रोत