CSS कस्टम हाइलाइट API: डायनामिक UI के लिए मल्टी-रेंज टेक्स्ट सेलेक्शन में महारत हासिल करना

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

CSS कस्टम हाइलाइट API की मूल बातें समझना

जटिल परिदृश्यों में उतरने से पहले, API की मूलभूत अवधारणाओं को समझना आवश्यक है। अपने मूल में, CSS कस्टम हाइलाइट API कई नए CSS स्यूडो-एलिमेंट्स पेश करता है, जिनमें शामिल हैं:

• ::selection: किसी दस्तावेज़ के उस हिस्से का प्रतिनिधित्व करता है जिसे उपयोगकर्ता द्वारा चुना गया है। यह लंबे समय से उपलब्ध है, जिससे टेक्स्ट सेलेक्शन की बुनियादी स्टाइलिंग की अनुमति मिलती है।
• ::highlight: हाइलाइट की गई रेंज पर स्टाइल लागू करने के लिए एक अधिक सामान्य स्यूडो-एलिमेंट। यह नए API की शक्ति की कुंजी है। अब आप नाम वाले हाइलाइट बना सकते हैं और प्रत्येक पर कस्टम स्टाइलिंग लागू कर सकते हैं।
• ::target-text: URI फ़्रैगमेंट (उदाहरण के लिए, #section-title) द्वारा लक्षित दस्तावेज़ के हिस्से का प्रतिनिधित्व करता है। यह आपको उस पृष्ठ के अनुभाग को स्टाइल करने की अनुमति देता है जहाँ उपयोगकर्ता एक लिंक के माध्यम से स्क्रॉल करके पहुँचा।
• ::spelling-error: उपयोगकर्ता एजेंट द्वारा वर्तनी त्रुटियों वाले टेक्स्ट के रूप में पहचाने गए टेक्स्ट का प्रतिनिधित्व करता है। वर्तनी त्रुटि संकेतकों पर स्टाइलिंग नियंत्रण प्रदान करता है।
• ::grammar-error: उपयोगकर्ता एजेंट द्वारा व्याकरण संबंधी त्रुटियों वाले टेक्स्ट के रूप में पहचाने गए टेक्स्ट का प्रतिनिधित्व करता है। व्याकरण संबंधी त्रुटि संकेतकों पर स्टाइलिंग नियंत्रण प्रदान करता है।

::highlight स्यूडो-एलिमेंट API का कार्यसाधक है। यह आपको CSS में नाम वाले हाइलाइट परिभाषित करने और फिर जावास्क्रिप्ट का उपयोग करके उन हाइलाइट्स को टेक्स्ट की विशिष्ट रेंज पर लागू करने की अनुमति देता है।

प्रमुख अवधारणाएँ: रेंज और हाइलाइट्स

API **रेंज** और **हाइलाइट्स** की अवधारणाओं के इर्द-गिर्द घूमता है:

• रेंज: दस्तावेज़ के भीतर टेक्स्ट का एक सन्निहित खंड। जावास्क्रिप्ट में Range ऑब्जेक्ट द्वारा दर्शाया गया है।
• हाइलाइट: एक या अधिक रेंज पर लागू की गई एक नाम वाली स्टाइल। CSS में ::highlight(highlight-name) स्यूडो-एलिमेंट का उपयोग करके परिभाषित की जाती है और जावास्क्रिप्ट में Highlight और HighlightRegistry APIs के माध्यम से हेरफेर की जाती है।

इसे इस तरह सोचें: एक रेंज 'क्या' है (वह टेक्स्ट जिसे आप हाइलाइट करना चाहते हैं), और हाइलाइट 'कैसे' है (वह स्टाइल जिसे आप लागू करना चाहते हैं)।

CSS के साथ कस्टम हाइलाइट्स सेट करना

पहला कदम CSS में अपनी कस्टम हाइलाइट स्टाइल को परिभाषित करना है। आप इसे ::highlight() स्यूडो-एलिमेंट का उपयोग करके करते हैं।

            
::highlight(search-result) {
  background-color: yellow;
  color: black;
}

::highlight(important-term) {
  background-color: lightblue;
  font-weight: bold;
}

            

              
                Copy
              
            
          

इस उदाहरण में, हमने दो कस्टम हाइलाइट स्टाइल परिभाषित की हैं: search-result और important-term। search-result हाइलाइट काले टेक्स्ट के साथ पीली पृष्ठभूमि लागू करेगा, जबकि important-term हाइलाइट हल्की नीली पृष्ठभूमि का उपयोग करेगा और टेक्स्ट को बोल्ड करेगा। आप इन हाइलाइट स्टाइल के भीतर अपनी इच्छानुसार कोई भी CSS गुण परिभाषित कर सकते हैं।

जावास्क्रिप्ट के साथ हाइलाइट्स प्रबंधित करना

एक बार जब आप CSS में अपनी हाइलाइट स्टाइल परिभाषित कर लेते हैं, तो आप उन्हें टेक्स्ट की विशिष्ट रेंज पर लागू करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं। Highlight और HighlightRegistry APIs इसके लिए टूल प्रदान करते हैं।

हाइलाइट रजिस्ट्री

HighlightRegistry एक वैश्विक ऑब्जेक्ट है जो दस्तावेज़ में सभी हाइलाइट्स का प्रबंधन करता है। आप इसे CSS इंटरफ़ेस के माध्यम से एक्सेस कर सकते हैं:

            
const highlightRegistry = CSS.highlights;

            

              
                Copy
              
            
          

हाइलाइट्स बनाना

एक हाइलाइट बनाने के लिए, आप Highlight कंस्ट्रक्टर का उपयोग करते हैं:

            
const highlight = new Highlight();

            

              
                Copy
              
            
          

शुरुआत में, एक हाइलाइट के साथ कोई रेंज जुड़ी नहीं होती है। आपको addRange() विधि का उपयोग करके हाइलाइट में रेंज जोड़ने की आवश्यकता होती है।

एक हाइलाइट में रेंज जोड़ना

एक हाइलाइट में एक रेंज जोड़ने के लिए, आपको पहले एक Range ऑब्जेक्ट बनाने की आवश्यकता होती है। आप इसे document.createRange() विधि का उपयोग करके कर सकते हैं:

            
const range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

highlight.addRange(range);

            

              
                Copy
              
            
          

जहाँ:

• startNode: DOM नोड जहाँ रेंज शुरू होती है।
• startOffset: startNode के भीतर वर्ण ऑफसेट जहाँ रेंज शुरू होती है।
• endNode: DOM नोड जहाँ रेंज समाप्त होती है।
• endOffset: endNode के भीतर वर्ण ऑफसेट जहाँ रेंज समाप्त होती है।

उदाहरण: खोज परिणामों को हाइलाइट करना

मान लीजिए आपके पास टेक्स्ट का एक ब्लॉक है और आप किसी खोज शब्द के सभी ऑकरेंस को हाइलाइट करना चाहते हैं। आप इसे इस प्रकार कर सकते हैं:

            
function highlightSearchResults(searchTerm, element) {
  const text = element.textContent;
  let index = text.indexOf(searchTerm);

  if (index === -1) {
    return; // Search term not found
  }

  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + searchTerm.length);
    highlight.addRange(range);
    index = text.indexOf(searchTerm, index + 1);
  }

  // Apply the 'search-result' highlight style
  highlightRegistry.set('search-result', highlight);
}

const contentElement = document.getElementById('content');
highlightSearchResults('example', contentElement);

            

              
                Copy
              
            
          

यह कोड स्निपेट "content" ID वाले एलिमेंट के भीतर "example" शब्द के सभी ऑकरेंस को ढूंढता है और उन पर search-result हाइलाइट स्टाइल लागू करता है।

रेंज और हाइलाइट्स हटाना

आप deleteRange() विधि का उपयोग करके एक हाइलाइट से रेंज हटा सकते हैं:

            
highlight.deleteRange(range);

            

              
                Copy
              
            
          

आप clear() विधि का उपयोग करके एक हाइलाइट से सभी रेंज भी हटा सकते हैं:

            
highlight.clear();

            

              
                Copy
              
            
          

एक हाइलाइट को पूरी तरह से हटाने के लिए, आप HighlightRegistry की delete() विधि का उपयोग कर सकते हैं:

            
highlightRegistry.delete('search-result');

            

              
                Copy
              
            
          

उन्नत उपयोग के मामले और विचार

CSS कस्टम हाइलाइट API एक शक्तिशाली टूल है जिसका उपयोग विभिन्न उन्नत परिदृश्यों में किया जा सकता है।

सहयोगी संपादन

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

कोड संपादक

कोड संपादक सिंटैक्स हाइलाइटिंग के लिए API का लाभ उठा सकते हैं। विभिन्न सिंटैक्स तत्वों (जैसे, कीवर्ड, ऑपरेटर, टिप्पणियाँ) को अलग-अलग हाइलाइट स्टाइल असाइन किए जा सकते हैं। आधुनिक कोड संपादकों में अक्सर जटिल सिंटैक्स हाइलाइटिंग नियम होते हैं, और यह API पारंपरिक तरीकों की तुलना में अधिक सटीक और अनुकूलन योग्य नियंत्रण की अनुमति देता है।

एक्सेसिबिलिटी

API का उपयोग एक्सेसिबिलिटी में सुधार के लिए किया जा सकता है। उदाहरण के लिए, आप वर्तमान में केंद्रित एलिमेंट या स्क्रीन रीडर द्वारा पढ़े जा रहे टेक्स्ट को हाइलाइट कर सकते हैं। दृश्य हानि वाले उपयोगकर्ताओं के लिए हाइलाइट पृष्ठभूमि और टेक्स्ट रंग के बीच पर्याप्त रंग कंट्रास्ट सुनिश्चित करना याद रखें। WCAG (वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस) रंग कंट्रास्ट अनुपात पर विशिष्ट दिशानिर्देश प्रदान करते हैं।

अंतर्राष्ट्रीयकरण (i18n) विचार

बहुभाषी अनुप्रयोगों में API का उपयोग करते समय, निम्नलिखित बातों का ध्यान रखें:

• टेक्स्ट दिशा: सुनिश्चित करें कि आपकी हाइलाइट स्टाइल बाएं से दाएं (LTR) और दाएं से बाएं (RTL) दोनों भाषाओं के साथ सही ढंग से काम करती हैं।
• शब्द सीमाएँ: विभिन्न भाषाओं में शब्द सीमाओं के लिए अलग-अलग नियम होते हैं। शब्दों या वाक्यांशों को हाइलाइट करते समय उपयुक्त शब्द सीमा पहचान एल्गोरिदम का उपयोग करना सुनिश्चित करें।
• कैरेक्टर सेट्स: API यूनिकोड का समर्थन करता है, जिससे आप किसी भी भाषा में टेक्स्ट को हाइलाइट कर सकते हैं।

उदाहरण के लिए, अरबी (एक RTL भाषा) में खोज शब्दों को हाइलाइट करते समय, सुनिश्चित करें कि हाइलाइट सही टेक्स्ट दिशा को दृश्यमान रूप से दर्शाता है। इसी तरह, जापानी में कीवर्ड को हाइलाइट करते समय, जिसमें शब्दों के बीच रिक्त स्थान का उपयोग नहीं होता है, आपको शब्द सीमाओं की पहचान करने के लिए उपयुक्त रूपात्मक विश्लेषण का उपयोग करने की आवश्यकता होगी।

प्रदर्शन संबंधी विचार

जबकि API शक्तिशाली है, प्रदर्शन के प्रति सचेत रहना महत्वपूर्ण है। बड़ी संख्या में हाइलाइट्स बनाने और प्रबंधित करने से प्रदर्शन प्रभावित हो सकता है, खासकर बड़े दस्तावेज़ों में। इन युक्तियों पर विचार करें:

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

व्यावहारिक उदाहरण और कोड स्निपेट

उदाहरण 1: डायनामिक कीवर्ड हाइलाइटिंग

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

            
<input type="text" id="keyword-input" placeholder="Enter keyword...">
<div id="text-container">
  This is some example text.  It contains keywords that we want to highlight.  We will highlight the keywords based on user input.
</div>

            

              
                Copy
              
            
          

            
const keywordInput = document.getElementById('keyword-input');
const textContainer = document.getElementById('text-container');

keywordInput.addEventListener('input', () => {
  const keyword = keywordInput.value.trim();
  if (keyword) {
    highlightKeyword(keyword, textContainer);
  } else {
    clearHighlights(textContainer);
  }
});

function highlightKeyword(keyword, element) {
  clearHighlights(element);
  const text = element.textContent;
  let index = text.indexOf(keyword);

  if (index === -1) {
    return;
  }

  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + keyword.length);
    highlight.addRange(range);
    index = text.indexOf(keyword, index + 1);
  }

  CSS.highlights.set('dynamic-keyword', highlight);
}

function clearHighlights(element) {
  CSS.highlights.delete('dynamic-keyword');
}

            

              
                Copy
              
            
          

            
::highlight(dynamic-keyword) {
  background-color: rgba(255, 165, 0, 0.5); /* Semi-transparent orange */
  color: black;
}

            

              
                Copy
              
            
          

उदाहरण 2: "सभी ढूंढें" सुविधा लागू करना

यह उदाहरण एक "सभी ढूंढें" सुविधा का अनुकरण करता है, जो टेक्स्ट संपादकों और IDEs में पाई जाने वाली सुविधाओं के समान है। एक खोज शब्द के सभी ऑकरेंस एक साथ हाइलाइट किए जाते हैं।

            
<input type="text" id="search-term" placeholder="Find...">
<div id="document-content">
  This document contains multiple instances of the search term. The search term will be highlighted throughout the document.
  This is a second instance of the search term. Here's another search term.
</div>

            

              
                Copy
              
            
          

            
const searchTermInput = document.getElementById('search-term');
const documentContent = document.getElementById('document-content');

searchTermInput.addEventListener('input', () => {
  const searchTerm = searchTermInput.value.trim();
  if (searchTerm) {
    findAll(searchTerm, documentContent);
  } else {
    clearFindAllHighlights(documentContent);
  }
});

function findAll(searchTerm, element) {
  clearFindAllHighlights(element);
  const text = element.textContent;
  let index = text.indexOf(searchTerm);
  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + searchTerm.length);
    highlight.addRange(range);
    index = text.indexOf(searchTerm, index + 1);
  }

  CSS.highlights.set('find-all', highlight);
}

function clearFindAllHighlights(element) {
  CSS.highlights.delete('find-all');
}

            

              
                Copy
              
            
          

            
::highlight(find-all) {
  background-color: #90EE90; /* LightGreen */
  color: black;
}

            

              
                Copy
              
            
          

ब्राउज़र संगतता और पॉलीफ़िल्स

CSS कस्टम हाइलाइट API अपेक्षाकृत नई सुविधा है, इसलिए ब्राउज़र संगतता भिन्न हो सकती है। 2024 के अंत तक, इसे क्रोम, फ़ायरफ़ॉक्स, सफारी और एज जैसे आधुनिक ब्राउज़रों में अच्छा समर्थन प्राप्त है। हालांकि, यह सुनिश्चित करने के लिए कि आपके लक्षित दर्शक आपकी सुविधाओं का उपयोग कर सकें, "Can I use..." जैसी वेबसाइटों पर नवीनतम ब्राउज़र संगतता डेटा की जांच करना आवश्यक है। यदि आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है, तो आप पॉलीफ़िल्स या वैकल्पिक दृष्टिकोणों का पता लगा सकते हैं जो API की कार्यक्षमता का अनुकरण करते हैं, हालांकि वे समान स्तर का प्रदर्शन या वफादारी प्रदान नहीं कर सकते हैं।

टेक्स्ट सेलेक्शन और हाइलाइटिंग का भविष्य

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

निष्कर्ष

CSS कस्टम हाइलाइट API डायनामिक और इंटरैक्टिव यूज़र इंटरफेस बनाने के लिए एक शक्तिशाली टूल है। रेंज, हाइलाइट्स और HighlightRegistry की मूलभूत अवधारणाओं को समझकर, आप इस API का लाभ उठाकर ऐसे आकर्षक उपयोगकर्ता अनुभव बना सकते हैं जिन्हें पहले प्राप्त करना मुश्किल या असंभव था। जैसा कि आप इस API का अन्वेषण करते हैं, एक्सेसिबिलिटी, अंतर्राष्ट्रीयकरण और प्रदर्शन पर विचार करना याद रखें ताकि यह सुनिश्चित हो सके कि आपके एप्लिकेशन वैश्विक दर्शकों के लिए उपयोग करने योग्य और उच्च-प्रदर्शन वाले हों। अपनी लचीलेपन और नियंत्रण के साथ, CSS कस्टम हाइलाइट API आधुनिक वेब डेवलपर के टूलकिट का एक अनिवार्य हिस्सा बनने के लिए तैयार है।