रैप की गई हाइलाइट की हर पंक्ति के दोनों सिरों पर पैडिंग बनाए रखने के लिए, किसी इनलाइन एलिमेंट पर बैकग्राउंड और पैडिंग के साथ box-decoration-break: clone लागू करें। Safari के लिए WebKit-प्रीफ़िक्स वाला डिक्लेरेशन शामिल करें। MDN फ़्रैगमेंट डेकोरेशन समझाता है।

यह गाइड ऐसे व्यक्ति के लिए है जो Mac पर वेब पेज संपादित कर रहा है और चाहता है कि हाइलाइट किया गया वाक्यांश शीर्षक या अनुच्छेद के भीतर स्वाभाविक रूप से रैप हो। काम यह है कि ब्राउज़र को पंक्ति-विभाजन करने देते हुए, बनी हुई हर पंक्ति को अपना पैडेड बैकग्राउंड दिया जाए।

हाइलाइट रैप होने पर पैडिंग क्यों गायब हो जाती है?

box-decoration-break का शुरुआती मान slice है। जब कोई इनलाइन बॉक्स कई पंक्तियों में टूटता है, तो यह मान उसकी सजावट को एक निरंतर बॉक्स मानता है, जिसे फ़्रैगमेंट में काटा जाता है। टूटे हुए किनारों पर पैडिंग नहीं जोड़ी जाती। clone के साथ हर फ़्रैगमेंट को अपनी पैडिंग, बॉर्डर और बैकग्राउंड सजावट मिलती है। W3C दोनों फ़्रैगमेंटेशन व्यवहार परिभाषित करता है।

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

हाइलाइट को इनलाइन बॉक्स ही रखें। ब्लॉक बैकग्राउंड उसके कंटेनर आयत को सजाता है, जबकि इनलाइन हाइलाइट टेक्स्ट के प्रवाह का अनुसरण करता है। MDN ब्लॉक, इनलाइन और इनलाइन-ब्लॉक बॉक्स के आकार और स्पेसिंग के अलग-अलग व्यवहार का दस्तावेज़ देता है। MDN की बॉक्स मॉडल गाइड देखें।

अपने Mac पर पूरा उदाहरण बनाएँ

कोड एडिटर में wrapped-highlight.html नाम की सादा टेक्स्ट फ़ाइल बनाएँ, नीचे दिया गया पूरा उदाहरण उसमें पेस्ट करें और फ़ाइल सेव करें। उसे अपने डेस्कटॉप ब्राउज़र में खोलें। किसी पैकेज को इंस्टॉल करने, बाहरी स्टाइलशीट या JavaScript की ज़रूरत नहीं है।

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wrapped highlight example</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 2rem;
      background: #ffffff;
      color: #202020;
      font-family: system-ui, sans-serif;
    }

    .sample {
      max-width: 26rem;
      margin: 0 auto;
    }

    .sample-title {
      margin: 0;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.65;
    }

    .highlight {
      display: inline;
      background-color: #ffe6a6;
      padding: 0.08em 0.3em;
      border-radius: 0.15em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  </style>
</head>
<body>
  <main class="sample">
    <h1 class="sample-title"><span class="highlight">Amber tiles and silver circles arranged across a sample page</span></h1>
  </main>
</body>
</html>

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

यहाँ दिए गए आयाम केवल उदाहरण के लिए चुने गए हैं। यदि सिरों पर जगह बहुत तंग या बहुत चौड़ी लगे, तो क्षैतिज पैडिंग 0.3em बदलकर शुरू करें। ऊर्ध्वाधर पैडिंग 0.08em को अलग से बदलें। दोनों में से किसी भी मान को समायोजित करते समय रैपिंग की जाँच करते रहें।

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

Mac पर ब्राउज़र सपोर्ट की कौन-सी बातें मायने रखती हैं?

उदाहरण में दोनों डिक्लेरेशन बनाए रखें। MDN के मौजूदा संगतता डेटा में मानक प्रॉपर्टी का सपोर्ट Chrome 130 और Firefox 32 से दर्ज है। इसमें Safari का सपोर्ट -webkit- प्रीफ़िक्स के साथ दर्ज है और वह कार्यान्वयन इनलाइन एलिमेंट तक सीमित है। MDN का ब्राउज़र संगतता डेटा देखें।

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

अपने Mac पर उन ब्राउज़रों में फ़ाइल जाँचें जो आपके पेज के लिए मायने रखते हैं। संकरी और चौड़ी विंडो इस्तेमाल करें, फिर पेज का टेक्स्ट बड़ा करके दोबारा जाँचें। पंक्तियों की संख्या बदल सकती है; स्वीकृति की कसौटी यह है कि हर ब्राउज़र के बनाए फ़्रैगमेंट पर पैडिंग एकसमान हो।

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

ओवरलैप करते बैकग्राउंड और असहज रैपिंग से कैसे बचें?

पैडिंग और पंक्ति-अंतराल अलग-अलग समस्याएँ हल करते हैं। सामान्य इनलाइन बॉक्स पर ऊपर और नीचे की पैडिंग, आसपास की सामग्री को दूर किए बिना, रंगे हुए क्षेत्र को बढ़ा सकती है। इसलिए ऊर्ध्वाधर पैडिंग बढ़ाने से पास-पास की हाइलाइट की गई पंक्तियाँ एक-दूसरे पर चढ़ सकती हैं। MDN इनलाइन बॉक्स के इस व्यवहार का स्पष्ट दस्तावेज़ देता है। इनलाइन पैडिंग और आसपास की सामग्री देखें।

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

अधिक CSS बदलने से पहले कारण पहचानने के लिए यह जाँच-क्रम अपनाएँ:

आपको क्या दिखता है पहले क्या जाँचें अगला कदम
पैडिंग केवल वाक्यांश के बाहरी सिरों पर है डेकोरेशन का व्यवहार हाइलाइट किए गए इनलाइन एलिमेंट पर दोनों clone डिक्लेरेशन लागू करें।
एक बड़ा बैकग्राउंड आयत बैकग्राउंड किस एलिमेंट के पास है बैकग्राउंड और पैडिंग को अंदर वाले इनलाइन span पर रखें।
हाइलाइट की गई पंक्तियाँ लंबवत रूप से सटी हुई हैं ऊर्ध्वाधर पैडिंग और पैरेंट की पंक्ति-ऊँचाई ऊर्ध्वाधर पैडिंग घटाएँ या पंक्ति-ऊँचाई बढ़ाएँ।
लंबा लेबल कंटेनर से बाहर निकलता है उपलब्ध रैपिंग के अवसर नीचे दिया गया वैकल्पिक लंबे-टोकन नियम अपनाने पर विचार करें।
इच्छित सिरों की पैडिंग केवल Safari में नहीं दिखती प्रीफ़िक्स वाला डिक्लेरेशन पुष्टि करें कि -webkit-box-decoration-break: clone स्टाइलशीट में मौजूद है।

AmberTileSequenceAmberTileSequence जैसे ऐसे नमूना लेबल के लिए जिसे सामान्य तरीके से तोड़ा नहीं जा सकता, आप .sample-title में overflow-wrap: anywhere जोड़ सकते हैं। यह मौजूदा नियम के भीतर जोड़ने वाला वैकल्पिक CSS अंश है; उदाहरण का बाकी हिस्सा वैसा ही रहेगा।

/* Optional addition inside the existing .sample-title rule */
overflow-wrap: anywhere;

इससे ज़रूरत पड़ने पर ऐसा स्ट्रिंग टूट सकता है जिसे अन्यथा तोड़ा नहीं जा सकता, और ओवरफ़्लो से बचा जा सकता है; इसमें हाइफ़न नहीं जुड़ता। यह रैपिंग के अवसर देता है; पैडिंग नहीं बनाता। जिन सामान्य वाक्यांशों में रिक्त स्थान हैं, उन्हें इसकी ज़रूरत शायद न पड़े। MDN overflow-wrap की शर्तों का दस्तावेज़ देता है।

बैकग्राउंड पर भी विचार करें। clone के साथ हर फ़्रैगमेंट के लिए बैकग्राउंड अलग-अलग बनाया जाता है, इसलिए ग्रेडिएंट या बैकग्राउंड इमेज हर पंक्ति पर फिर से शुरू हो सकती है। यदि आप दोहराते हुए इमेज पैटर्न के बिना एकसमान हाइलाइट चाहते हैं, तो ठोस रंग इस्तेमाल करें। W3C स्वतंत्र फ़्रैगमेंट बैकग्राउंड का वर्णन करता है।

टेक्स्ट का स्वाभाविक प्रवाह और शेपिंग की सीमाएँ बनाए रखें

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

इस प्रभाव की नकल करने के लिए किसी शब्द को अलग-अलग पैडेड अक्षर spans में न बाँटें। CSS Text विनिर्देश के अनुसार, जब गैर-शून्य इनलाइन-अक्ष पैडिंग, बॉर्डर या मार्जिन पास-पास की टाइपोग्राफ़िक कैरेक्टर इकाइयों को अलग करते हैं, तो शेपिंग को इनलाइन सीमाओं पर टूटना आवश्यक है। इसलिए किसी शब्द के भीतर पैडेड सीमा ग्लिफ़ शेपिंग को प्रभावित कर सकती है। सीमाओं के पार शेपिंग के W3C नियम देखें।

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

अगर प्रोजेक्ट Tailwind CSS इस्तेमाल करता है तो क्या करें?

किसी मौजूदा Tailwind प्रोजेक्ट में, उस इनलाइन एलिमेंट पर box-decoration-clone जोड़ें जिसके पास पहले से हाइलाइट बैकग्राउंड और पैडिंग है। Tailwind के मौजूदा दस्तावेज़ इस यूटिलिटी को box-decoration-break: clone से जोड़ते हैं। इसकी box-decoration-slice यूटिलिटी दूसरा व्यवहार चुनती है। Tailwind की box-decoration-break यूटिलिटी देखें।

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

केवल इस प्रभाव के लिए Tailwind जोड़ने की ज़रूरत नहीं है। स्थानीय पूरा उदाहरण आवश्यक CSS पहले से शामिल करता है।

क्या कस्टम हाइलाइट में भी यही पैडिंग इस्तेमाल की जा सकती है?

::highlight() के ज़रिए स्टाइल की गई CSS Custom Highlight API रेंज की क्षमताएँ, स्टाइल किए गए इनलाइन एलिमेंट से अलग हैं। MDN इसकी अनुमत प्रॉपर्टियों में टेक्स्ट रंग, बैकग्राउंड रंग और टेक्स्ट सजावट शामिल करता है। पैडिंग और box-decoration-break इस अनुमत सूची से बाहर हैं। कस्टम हाइलाइट स्टाइलिंग की दस्तावेज़ित सीमाएँ पढ़ें।

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

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

स्रोत