वेब लेबल में किसी एक लिगेचर के उपयोग को बंद करने के लिए, उसके अक्षरों को इनलाइन span में लपेटें और वहाँ संबंधित लिगेचर फ़ीचर बंद करें। बाकी टेक्स्ट की सेटिंग्स बनी रहती हैं। CSS में ऐसा कोई सामान्य स्विच नहीं है जो पूरे फ़ॉन्ट में किसी एक नामित लिगेचर को बंद कर दे। MDN के लिगेचर नियंत्रण अलग-अलग प्रतिस्थापनों के बजाय फ़ीचर की श्रेणियाँ परिभाषित करते हैं।

यह गाइड उस Mac उपयोगकर्ता के लिए है जो किसी वेब पेज का HTML और CSS संपादित कर रहा है। ठोस काम सिंथेटिक लेबल fine flake office fine में पहले fi को अलग करना है, जबकि बाकी टेक्स्ट में लिगेचर बने रहें। एक छोटा स्थानीय परीक्षण, किसी एक उपयोग को बदलने और पूरे फ़ीचर को बदलने के बीच का अंतर स्पष्ट करता है।

CSS चुनिंदा रूप से क्या बंद कर सकता है?

किसी लिगेचर फ़ीचर में कई प्रतिस्थापन हो सकते हैं। liga बंद करने का अर्थ है प्रभावित टेक्स्ट के लिए वह फ़ीचर बंद करना; इसका अर्थ किसी खास अक्षर-युग्म को चुनना नहीं है। इसी तरह, font-variant-ligatures: no-common-ligatures liga और clig के ज़रिए सामान्य लिगेचर नियंत्रित करता है। वास्तविक प्रतिस्थापन फ़ॉन्ट पर निर्भर करते हैं। MDN: font-variant-ligatures

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

इच्छित परिणाम उपयुक्त तरीका शर्त
fi के एक उपयोग को अलग करना उस उपयोग को लपेटें और उसका फ़ीचर स्थानीय रूप से बंद करें आप मार्कअप संपादित कर सकते हैं
सामान्य लिगेचर बनाए रखते हुए विवेकाधीन लिगेचर हटाना इच्छित एलिमेंट पर no-discretionary-ligatures का उपयोग करें अवांछित प्रतिस्थापन dlig से संबंधित हो
बाकी हर सामान्य लिगेचर बनाए रखते हुए हर fi हटाना यदि उपलब्ध हो, तो फ़ॉन्ट-विशिष्ट दस्तावेज़ित फ़ीचर का उपयोग करें फ़ॉन्ट में आवश्यक नियंत्रण होना चाहिए
ऐसे ऐप्लिकेशन में एक उपयोग बदलना जिसे आप संपादित नहीं कर सकते उस ऐप्लिकेशन के दस्तावेज़ित अक्षर-स्तरीय फ़ॉर्मैटिंग विकल्प देखें वेब CSS से यह तय नहीं होता कि डेस्कटॉप ऐप्लिकेशन क्या कर सकता है

जिन श्रेणियों के लिए font-variant-ligatures उपलब्ध है, उनके लिए उसे प्राथमिकता दें। MDN उपलब्ध होने पर उच्च-स्तरीय फ़ॉन्ट गुणों की सलाह देता है; अन्य मामलों में font-feature-settings निचले-स्तर के OpenType फ़ीचरों तक पहुँच देता है। font-feature-settings: \"liga\" off लिखने से अक्षर-युग्म के अनुसार नियंत्रण नहीं मिलता। MDN: font-feature-settings

अपने Mac पर स्थानीय तुलना करें

पहले एक स्वतंत्र फ़ाइल का उपयोग करें, ताकि असंबंधित पेज शैलियों के बिना परिणाम की तुलना कर सकें। TextEdit में File > New चुनें, फिर Format > Make Plain Text चुनें। नीचे दिया पूरा उदाहरण दर्ज करें, उसे ligature-demo.html नाम से सहेजें, और पूछे जाने पर Use .html चुनें। TextEdit में HTML फ़ाइल बनाने के लिए Apple के दस्तावेज़ित चरण यही हैं। Apple: Mac पर TextEdit में HTML दस्तावेज़ों के साथ काम करना

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ligature comparison</title>
  <style>
    body {
      margin: 2rem;
      color: #222;
      background: #fff;
      font-family: system-ui, sans-serif;
    }

    main {
      max-width: 42rem;
    }

    .sample {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 2.5rem;
      line-height: 1.5;
      letter-spacing: normal;
      font-variant-ligatures: common-ligatures;
    }

    .separate-pair,
    .all-common-off {
      font-variant-ligatures: no-common-ligatures;
    }
  </style>
</head>
<body>
  <main>
    <h2>Baseline</h2>
    <p class="sample">fine flake office fine</p>

    <h2>First pair separated</h2>
    <p class="sample"><span class="separate-pair">fi</span>ne flake office fine</p>

    <h2>All common ligatures disabled</h2>
    <p class="sample all-common-off">fine flake office fine</p>
  </main>
</body>
</html>

बीच वाली पंक्ति में span में लक्षित fi के दोनों अक्षर हैं। उस पंक्ति के बाकी हिस्से में सामान्य लिगेचर सेटिंग लागू रहती है। केवल शैली के लिए इस समूह को दर्शाने हेतु span उपयुक्त है: WHATWG के अनुसार, यह ऐसा एलिमेंट है जो अपने बच्चों को दर्शाता है, पर स्वयं कोई अर्थ नहीं जोड़ता। WHATWG: span एलिमेंट

तुलना को तीन चरणों में देखें:

  1. पहली और बीच वाली पंक्ति में पहले fine की तुलना करें। कुल चौड़ाई पर ही नहीं, अक्षरों के आकार पर ध्यान दें।
  2. इन दोनों पंक्तियों में flake, office और अंतिम fine की तुलना करें। ये अपवाद के बाहर हैं, इसलिए इनकी मूल फ़ीचर सेटिंग बनी रहनी चाहिए।
  3. नीचे वाली पंक्ति की बाकी पंक्तियों से तुलना करें। यह व्यापक नियंत्रण है: उस पूरी पंक्ति में सामान्य लिगेचर बंद हैं।

अगर तीनों पंक्तियाँ एक जैसी दिखें, तो तुलना से कोई निष्कर्ष नहीं निकलता। नमूना फ़ॉन्ट को उस फ़ॉन्ट से बदलें जिसका आप वास्तव में उपयोग करना चाहते हैं, और ऐसे अक्षर-क्रम चुनें जिनके लिए उस फ़ॉन्ट में लिगेचर दस्तावेज़ित हों। CSS घोषणा ऐसे प्रतिस्थापन को नहीं दिखा सकती जो चुना गया फ़ॉन्ट देता ही न हो।

टेक्स्ट प्रवाह बिगाड़े बिना अपवाद लागू करें

छोटे लेबल के लिए span को ठीक उस पूरे अक्षर-क्रम के चारों ओर रखें जिसे आप अलग करना चाहते हैं। स्रोत में उसके पहले और बाद के अक्षरों को पास-पास रखें, जैसा उदाहरण में fi और ne के साथ किया गया है। केवल मार्कअप पढ़ने में आसान बनाने के लिए शब्द के भीतर स्पेस या नई पंक्ति न डालें।

Span में फ़ीचर-सेटिंग का बदलाव होना चाहिए। बिना शैली वाले span में केवल एक अक्षर रखना भरोसेमंद लिगेचर-विभाजक नहीं है: W3C के टेक्स्ट विनिर्देश के अनुसार, जब कोई प्रभावी फ़ॉर्मैटिंग बदलाव न हो, तो इनलाइन सीमाओं के पार भी शेपिंग जारी रहती है। यह विनिर्देश उन परिस्थितियों को भी परिभाषित करता है जिनमें मार्जिन, बॉर्डर, पैडिंग या अन्य फ़ॉर्मैटिंग शेपिंग को तोड़ती है। W3C: एलिमेंट सीमाओं के पार शेपिंग

इस अपवाद को साधारण इनलाइन span ही रखें। inline-block, स्पेसिंग या लेआउट रैपर जोड़ने से ऐसी अतिरिक्त लेआउट संबंधी बातें जुड़ती हैं जिनकी इस काम में ज़रूरत नहीं है। टाइपोग्राफ़ी सेटिंग लागू करने के बाद ब्राउज़र विंडो को संकरा करें और इच्छित कंटेनर में लेबल देखें। लाइन का वही जगह पर टूटना एक जाँचने योग्य बात है, क्योंकि ग्लिफ़ बदलने से टेक्स्ट द्वारा घेरा गया स्थान बदल सकता है।

लंबे अक्षर-क्रमों के लिए इच्छित सीमा स्पष्ट रूप से तय करें। यदि अवांछित प्रतिस्थापन में ffi शामिल है, तो केवल fi को लपेटने से बड़े अक्षर-क्रम के भीतर एक फ़ॉर्मैटिंग सीमा भी बनती है। यह मानकर न चलें कि हर एक-दूसरे पर चढ़ता प्रतिस्थापन स्वतंत्र रूप से काम करेगा; पूरे शब्द और आस-पास के अक्षरों का परीक्षण करें।

किसी मौजूदा पेज में इस उदाहरण को लागू करते समय, संबंधित लेबल को उसके स्रोत या कंपोनेंट में संपादित करें। एक अपवाद जोड़ने के लिए किसी अनुच्छेद को उसके दिखने वाले टेक्स्ट से दोबारा बनाने से बचें; उसके मौजूदा लिंक, ज़ोर देने की शैली और एलिमेंट संरचना बनाए रखें। यह उदाहरण जानबूझकर एक ज्ञात उपयोग को संभालता है, किसी मनमाने पेज पर अपने-आप बदलाव करने की कोशिश नहीं करता।

अगर लिगेचर बना रहे—या दूसरे लिगेचर गायब हो जाएँ तो?

तुरंत और ओवरराइड जोड़ने के बजाय, तुलना को समस्या की जाँच के क्रम के रूप में इस्तेमाल करें।

पहले, फ़ीचर श्रेणी जाँचें। उदाहरण सामान्य लिगेचर को लक्षित करता है। यदि फ़ॉन्ट में अवांछित प्रतिस्थापन dlig के अंतर्गत दस्तावेज़ित है, तो अपवाद पर इसके बजाय no-discretionary-ligatures लागू करें। कॉन्टेक्स्ट के अनुसार होने वाले किसी प्रतिस्थापन में calt शामिल हो सकता है, जिसे no-contextual नियंत्रित करता है; यह सेटिंग चुने गए टेक्स्ट के अन्य कॉन्टेक्स्ट-आधारित रूपों को भी प्रभावित कर सकती है। MDN की फ़ीचर-श्रेणी परिभाषाएँ

इसके बाद, टकराने वाली सेटिंग्स जाँचें। मौजूदा font-feature-settings घोषणा, font-variant-ligatures से निहित फ़ीचर विकल्पों को ओवरराइड कर सकती है। W3C के अनुसार, फ़ीचर समाधान के दौरान निचले-स्तर की फ़ीचर सेटिंग्स बाद में लागू होती हैं। Span वाले तरीके को असमर्थित मानने से पहले उस घोषणा की समीक्षा करें। W3C: फ़ॉन्ट फ़ीचर और वैरिएशन का समाधान

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

आख़िर में, वैकल्पिक टाइपोग्राफ़ी और अनिवार्य शेपिंग में अंतर करें। font-variant-ligatures: none इस काम की ज़रूरत से अधिक व्यापक है, और अनिवार्य लिगेचर इसके बंद करने वाले नियंत्रणों के दायरे से बाहर हैं। W3C स्पष्ट करता है कि यह गुण अनिवार्य लिगेचर बनाए रखता है। W3C: लिगेचर

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

क्या शेपिंग लाइब्रेरी अधिक सूक्ष्म नियंत्रण देती है?

HarfBuzz hb_feature_t के ज़रिए फ़ीचर रेंज उपलब्ध कराता है: किसी फ़ीचर में टैग, मान, शामिल शुरुआती स्थान और शामिल न होने वाला अंतिम स्थान होता है, जिन्हें क्लस्टर मानों के रूप में व्यक्त किया जाता है। इससे शेपिंग लाइब्रेरी को कॉल करने वाला ऐप्लिकेशन किसी सीमित रेंज पर फ़ीचर सेटिंग लागू कर सकता है। फिर भी यह रेंज किसी फ़ीचर के लिए होती है, किसी एक नामित लिगेचर को चुनने वाला सार्वभौमिक चयनकर्ता नहीं। HarfBuzz: hb_feature_t

यह API सामान्य पेज CSS से अलग स्तर पर काम करती है। HarfBuzz का दस्तावेज़ित तरीका फ़ीचर अनुरोध hb_shape() को भेजता है। इसके उदाहरण शेपिंग बफ़र और फ़ॉन्ट खोज के नियम बताते हैं, ब्राउज़र स्टाइलशीट में जोड़ने का कोई विकल्प नहीं। Mac पर इस वेब-लेबल वाले काम के लिए, कस्टम शेपिंग पाइपलाइन शुरू करने से इनलाइन अपवाद की तुलना में ज़्यादा काम बढ़ेगा। HarfBuzz: OpenType फ़ीचर

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

स्रोत