बोल्डली से वहां लिंक करें जहां पहले किसी ने लिंक नहीं किया है: टेक्स्ट फ़्रैगमेंट

टेक्स्ट फ़्रैगमेंट की मदद से, यूआरएल फ़्रैगमेंट में टेक्स्ट स्निपेट डाला जा सकता है. इस तरह के टेक्स्ट फ़्रैगमेंट वाले यूआरएल पर नेविगेट करते समय, ब्राउज़र उस पर ज़ोर दे सकता है और/या उपयोगकर्ता का ध्यान खींच सकता है.

Thomas Steiner

फ़्रैगमेंट आइडेंटिफ़ायर

Chrome 80 एक अहम रिलीज़ थी. इसमें कई ऐसी सुविधाएं शामिल थीं जिनका लोग बेसब्री से इंतज़ार कर रहे थे. जैसे, वेब वर्कर में ECMAScript मॉड्यूल, शून्य वैल्यू को एक साथ जोड़ना, ज़रूरी नहीं है कि चेनिंग की जाए वगैरह. हमेशा की तरह, रिलीज़ की जानकारी, क्रोमियम ब्लॉग पर ब्लॉग पोस्ट के ज़रिए दी गई थी. नीचे दिए गए स्क्रीनशॉट में, ब्लॉग पोस्ट का एक हिस्सा देखा जा सकता है.

Chromium ब्लॉग पोस्ट, जिसमें id एट्रिब्यूट वाले एलिमेंट के आस-पास लाल रंग के बॉक्स हैं.

शायद आपके मन में यह सवाल होगा कि लाल रंग के सभी बॉक्स का क्या मतलब है. ये DevTools में इस स्निपेट को चलाने का नतीजा हैं. यह उन सभी एलिमेंट को हाइलाइट करता है जिनमें id एट्रिब्यूट होता है.

document.querySelectorAll('[id]').forEach((el) => {
  el.style.border = 'solid 2px red';
});

लाल रंग के बॉक्स से हाइलाइट किए गए किसी भी एलिमेंट का डीप लिंक रखा जा सकता है. इसके लिए, फ़्रैगमेंट आइडेंटिफ़ायर का इस्तेमाल किया जाता है. इसके बाद, इसे पेज के यूआरएल के हैश में इस्तेमाल किया जाता है. मान लें कि मुझे साइडबार में मौजूद हमें अपने प्रॉडक्ट फ़ोरम में सुझाव/राय दें या शिकायत करें बॉक्स पर डीप लिंक करना है. इसके लिए, यूआरएल https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1 को मैन्युअल तरीके से बनाकर ऐसा किया जा सकता है. जैसा कि डेवलपर टूल के एलिमेंट पैनल में देखा जा सकता है, जिस एलिमेंट की शिकायत की गई है उसमें id एट्रिब्यूट है और उसकी वैल्यू HTML1 है.

किसी एलिमेंट का id दिखाने वाले डेवलपर टूल.

अगर इस यूआरएल को JavaScript के URL() कंस्ट्रक्टर की मदद से पार्स किया जाता है, तो अलग-अलग कॉम्पोनेंट दिखते हैं. #HTML1 वैल्यू वाली hash प्रॉपर्टी पर ध्यान दें.

new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
/* Creates a new `URL` object
URL {
  hash: "#HTML1"
  host: "blog.chromium.org"
  hostname: "blog.chromium.org"
  href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
  origin: "https://blog.chromium.org"
  password: ""
  pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
  port: ""
  protocol: "https:"
  search: ""
  searchParams: URLSearchParams {}
  username: ""
}
*/

हालांकि, किसी एलिमेंट का id ढूंढने के लिए मुझे डेवलपर टूल खोलने पड़े. इससे यह पता चलता है कि पेज के इस सेक्शन को ब्लॉग पोस्ट के लेखक ने लिंक किया था.

अगर मुझे id के बिना किसी चीज़ से लिंक करना है, तो क्या होगा? मान लें कि मुझे वेब वर्कर में ECMAScript मॉड्यूल हेडर से लिंक करना है. जैसा कि नीचे दिए गए स्क्रीनशॉट में देखा जा सकता है, जिस <h1> के बारे में सवाल किया गया है उसमें id एट्रिब्यूट नहीं है. इसका मतलब है कि इस हेडिंग को लिंक नहीं किया जा सकता. टेक्स्ट फ़्रैगमेंट की मदद से, इस समस्या को हल किया जाता है.

Dev Tools में id के बिना हेडिंग दिख रही है.

टेक्स्ट फ़्रैगमेंट

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

ब्राउज़र के साथ काम करना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 131.
  • Safari Technology Preview: काम करता है.

सोर्स

सुरक्षा की वजहों से, इस सुविधा के लिए ज़रूरी है कि लिंक, noopener कॉन्टेक्स्ट में खोले जाएं. इसलिए, अपने <a> ऐंकर मार्कअप में rel="noopener" को शामिल करना न भूलें या विंडो की सुविधाओं की सूची में Window.open() noopener जोड़ें.

start

टेक्स्ट फ़्रैगमेंट का सिंटैक्स, सबसे आसान तरीके से इस तरह है: हैश सिंबल # के बाद :~:text= और आखिर में start, जो पर्सेंट-कोड में बदले गए उस टेक्स्ट को दिखाता है जिसे मुझे लिंक करना है.

#:~:text=start

उदाहरण के लिए, मान लें कि मुझे Chrome 80 में सुविधाओं का एलान करने वाले ब्लॉग पोस्ट में, वेब वर्कर्स में ECMAScript मॉड्यूल हेडिंग पर लिंक करना है, तो इस मामले में यूआरएल यह होगा:

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers

टेक्स्ट फ़्रैगमेंट को इस तरह हाइलाइट किया जाता है. अगर Chrome जैसे किसी ऐसे ब्राउज़र में लिंक पर क्लिक किया जाता है जिस पर यह सुविधा काम करती है, तो टेक्स्ट फ़्रैगमेंट हाइलाइट हो जाता है और स्क्रोल करके नीचे दिखता है:

टेक्स्ट फ़्रैगमेंट को स्क्रोल करके व्यू में लाया गया और हाइलाइट किया गया.

start और end

अगर मुझे सिर्फ़ वेब वर्कर्स में ECMAScript मॉड्यूल शीर्षक वाले सेक्शन को लिंक करना हो, तो मुझे क्या करना होगा? सेक्शन के पूरे टेक्स्ट को प्रतिशत में बदलने पर, यूआरएल काफ़ी लंबा हो जाएगा.

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

यह ऐसा दिखेगा:

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers..

start के लिए, मेरे पास ECMAScript%20Modules%20in%20Web%20Workers है. इसके बाद, कॉमा , और फिर ES%20Modules%20in%20Web%20Workers. के तौर पर end है. Chrome जैसे किसी ब्राउज़र पर क्लिक करने पर, पूरा सेक्शन हाइलाइट हो जाता है और स्क्रोल करके उसे देखा जा सकता है:

टेक्स्ट के फ़्रैगमेंट को स्क्रोल करके देखा गया और हाइलाइट किया गया.

अब आपको यह जानना हो सकता है कि मैंने start और end को क्यों चुना. असल में, हर तरफ़ सिर्फ़ दो शब्दों वाला थोड़ा छोटा यूआरएल https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. भी काम कर सकता था. start और end की तुलना, पिछली वैल्यू से करें.

अगर मैं एक कदम आगे बढ़कर, start और end, दोनों के लिए सिर्फ़ एक शब्द का इस्तेमाल करूं, तो आपको पता चल जाएगा कि मुझे समस्या आ रही है. यूआरएल अब और भी छोटा हो गया है, लेकिन हाइलाइट किया गया टेक्स्ट फ़्रैगमेंट अब ओरिजनल नहीं है. हाइलाइट शब्द Workers. शब्द के आने पर ही हाइलाइट होना बंद हो जाता है. यह सही है, लेकिन यह वह नहीं है जिसे हाइलाइट करना है. समस्या यह है कि एक शब्द वाले start और end की मौजूदा वैल्यू से, ज़रूरी सेक्शन की खास तौर पर पहचान नहीं की जा सकती:

गलत तरीके से स्क्रोल किया गया टेक्स्ट फ़्रैगमेंट, स्क्रोल करके व्यू में लाया गया और हाइलाइट किया गया.

prefix- और -suffix

start और end के लिए काफ़ी लंबी वैल्यू का इस्तेमाल करना, यूनीक लिंक पाने का एक समाधान है. हालांकि, कुछ मामलों में ऐसा नहीं किया जा सकता. एक और बात, मैंने उदाहरण के तौर पर, Chrome 80 के रिलीज़ ब्लॉग पोस्ट को क्यों चुना? इसका जवाब है कि इस रिलीज़ में टेक्स्ट फ़्रैगमेंट को पेश किया गया था:

ब्लॉग पोस्ट का टेक्स्ट: टेक्स्ट यूआरएल फ़्रैगमेंट. अब उपयोगकर्ता या लेखक, यूआरएल में दिए गए टेक्स्ट फ़्रैगमेंट का इस्तेमाल करके, पेज के किसी खास हिस्से को लिंक कर सकते हैं. पेज लोड होने पर, ब्राउज़र टेक्स्ट को हाइलाइट करता है और फ़्रैगमेंट को स्क्रीन पर स्क्रोल करता है. उदाहरण के लिए, नीचे दिया गया यूआरएल, &#39;बिल्ली&#39; के लिए एक विकी पेज लोड करता है और `text` पैरामीटर में दिए गए कॉन्टेंट पर स्क्रोल करता है.
टेक्स्ट फ़्रैगमेंट के एलान वाली ब्लॉग पोस्ट का कुछ हिस्सा.

ध्यान दें कि "टेक्स्ट" शब्द के ऊपर स्क्रीनशॉट में, चार बार किस तरह दिख रहा है. चौथी बार, इसे हरे रंग के कोड फ़ॉन्ट में लिखा गया है. अगर मुझे इस शब्द से लिंक करना है, तो मैं start को text पर सेट करूंगा. "टेक्स्ट" सिर्फ़ एक शब्द है, इसलिए इसमें end नहीं हो सकता. अब आगे क्या होगा? यूआरएल https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text, हेडिंग में पहले से मौजूद "टेक्स्ट" शब्द से मेल खाता है:

"टेक्स्ट" के पहली बार दिखने पर मैच होने वाला टेक्स्ट फ़्रैगमेंट.

हालांकि, इसका हल है. ऐसे मामलों में, मैं prefix​- और -suffix तय कर सकता हूं. हरे रंग के कोड फ़ॉन्ट "टेक्स्ट" से पहले का शब्द "वह" है और उसके बाद का शब्द "पैरामीटर" है. "text" शब्द के तीनों उदाहरणों में, आस-पास के शब्द एक जैसे नहीं हैं. इस जानकारी के आधार पर, पिछले यूआरएल में बदलाव करके prefix- और -suffix जोड़ा जा सकता है. अन्य पैरामीटर की तरह, इन पैरामीटर को भी प्रतिशत में बदलना ज़रूरी है. साथ ही, इनमें एक से ज़्यादा शब्द हो सकते हैं. https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter पर टैप करें. पार्सर को prefix- और -suffix को साफ़ तौर पर पहचानने की अनुमति देने के लिए, उन्हें start और डैश वाले end से अलग करना ज़रूरी है-.

"टेक्स्ट" के ज़रूरत के मुताबिक होने पर टेक्स्ट फ़्रेगमेंट मैच करना.

पूरा सिंटैक्स

टेक्स्ट फ़्रैगमेंट का पूरा सिंटैक्स नीचे दिया गया है. (स्क्वेयर ब्रैकेट से पता चलता है कि पैरामीटर ज़रूरी नहीं है.) सभी पैरामीटर की वैल्यू, प्रतिशत के तौर पर कोड में बदली जानी चाहिए. यह खास तौर पर डैश -, ऐंपरसेंड &, और कॉमा , वर्णों के लिए ज़रूरी है, इसलिए उन्हें टेक्स्ट डायरेक्टिव सिंटैक्स के हिस्से के तौर पर नहीं समझा जाता.

#:~:text=[prefix-,]start[,end][,-suffix]

prefix-, start, end, और -suffix में से हर एक, सिर्फ़ एक ब्लॉक-लेवल एलिमेंट में मौजूद टेक्स्ट से मैच करेगा. हालांकि, start,end की पूरी रेंज, एक से ज़्यादा ब्लॉक में हो सकती है. उदाहरण के लिए, यहां दिए गए उदाहरण में :~:text=The quick,lazy dog का मिलान नहीं होगा, क्योंकि शुरुआती स्ट्रिंग "The quick" एक ही ब्लॉक-लेवल एलिमेंट में नहीं दिखती है:

<div>
  The
  <div></div>
  quick brown fox
</div>
<div>jumped over the lazy dog</div>

हालांकि, यह इस उदाहरण में मैच करता है:

<div>The quick brown fox</div>
<div>jumped over the lazy dog</div>

ब्राउज़र एक्सटेंशन के साथ टेक्स्ट फ़्रैगमेंट यूआरएल बनाना

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

टेक्स्ट फ़्रैगमेंट से लिंक करें ब्राउज़र एक्सटेंशन.

एक यूआरएल में कई टेक्स्ट फ़्रैगमेंट

ध्यान दें कि एक यूआरएल में कई टेक्स्ट फ़्रैगमेंट दिख सकते हैं. खास टेक्स्ट फ़्रैगमेंट को एंपरसैंड वर्ण & से अलग करना होगा. यहां तीन टेक्स्ट फ़्रैगमेंट वाला लिंक का उदाहरण दिया गया है: https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet.

एक यूआरएल में तीन टेक्स्ट फ़्रैगमेंट.

एलिमेंट और टेक्स्ट फ़्रैगमेंट को मिलाना

सामान्य एलिमेंट फ़्रैगमेंट को टेक्स्ट फ़्रैगमेंट के साथ जोड़ा जा सकता है. एक ही यूआरएल में दोनों को शामिल करना पूरी तरह से सही है. उदाहरण के लिए, पेज पर मौजूद ओरिजनल टेक्स्ट में बदलाव होने पर, काम का फ़ॉलबैक देने के लिए, ताकि टेक्स्ट फ़्रैगमेंट अब मैच न हो. यूआरएल https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. हमारे प्रॉडक्ट फ़ोरम सेक्शन में मौजूद सुझाव, शिकायत या राय से जुड़े यूआरएल में एलिमेंट फ़्रैगमेंट (HTML1) के साथ-साथ, टेक्स्ट फ़्रैगमेंट (text=Give%20us%20feedback%20in%20our%20Product%20Forums.) शामिल होता है:

एलिमेंट फ़्रैगमेंट और टेक्स्ट फ़्रैगमेंट, दोनों से लिंक करना.

फ़्रैगमेंट डायरेक्टिव

सिंटैक्स का एक एलिमेंट है जिसके बारे में मैंने अब तक नहीं बताया है: फ़्रैगमेंट डायरेक्टिव :~:. ऊपर दिखाए गए मौजूदा यूआरएल एलिमेंट फ़्रैगमेंट के साथ काम करने से जुड़ी समस्याओं से बचने के लिए, टेक्स्ट फ़्रैगमेंट की खास बातें में फ़्रैगमेंट डायरेक्टिव को शामिल किया गया है. फ़्रैगमेंट डायरेक्टिव, यूआरएल फ़्रैगमेंट का एक हिस्सा होता है. इसे कोड क्रम :~: से अलग किया जाता है. इसे text= जैसे उपयोगकर्ता एजेंट के निर्देशों के लिए रिज़र्व किया गया है. इसे लोड होने के दौरान यूआरएल से हटा दिया जाता है, ताकि लेखक की स्क्रिप्ट इसके साथ सीधे इंटरैक्ट न कर सकें. उपयोगकर्ता एजेंट के निर्देशों को डायरेक्टिव भी कहा जाता है. इसलिए, सटीक केस में text= को टेक्स्ट डायरेक्टिव कहा जाता है.

फ़ीचर का पता लगाना

सहायता का पता लगाने के लिए, document पर रीड-ओनली fragmentDirective प्रॉपर्टी की जांच करें. फ़्रैगमेंट डायरेक्टिव, यूआरएल के लिए एक ऐसा तरीका है जिससे दस्तावेज़ के बजाय ब्राउज़र को निर्देश दिए जा सकते हैं. इसका मकसद, लेखक की स्क्रिप्ट के साथ सीधे इंटरैक्शन से बचना है, ताकि मौजूदा कॉन्टेंट में कोई बड़ा बदलाव किए बिना, आने वाले समय में उपयोगकर्ता एजेंट के निर्देश जोड़े जा सकें. आने वाले समय में इस तरह के सुधारों का एक उदाहरण, अनुवाद से जुड़े संकेत हो सकता है.

if ('fragmentDirective' in document) {
  // Text Fragments is supported.
}

सुविधा का पता लगाने की सुविधा, मुख्य रूप से उन मामलों के लिए है जहां लिंक डाइनैमिक तौर पर जनरेट किए जाते हैं. उदाहरण के लिए, सर्च इंजन से. इससे उन ब्राउज़र को टेक्स्ट फ़्रैगमेंट के लिंक नहीं दिखाए जाते जो इन सुविधाओं के साथ काम नहीं करते.

टेक्स्ट फ़्रैगमेंट को स्टाइल करना

डिफ़ॉल्ट रूप से, ब्राउज़र टेक्स्ट फ़्रैगमेंट को उसी तरह से स्टाइल करते हैं जिस तरह वे mark को स्टाइल करते हैं. आम तौर पर, mark के लिए सीएसएस सिस्टम कलर, पीले रंग पर काले रंग के होते हैं. यूज़र-एजेंट स्टाइलशीट में ऐसी सीएसएस होती है जो इस तरह दिखती है:

:root::target-text {
  color: MarkText;
  background: Mark;
}

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

:root::target-text {
  color: black;
  background-color: red;
}

पॉलीफ़िल की सुविधा

टेक्स्ट फ़्रैगमेंट की सुविधा को कुछ हद तक पॉलीफ़िल किया जा सकता है. हम एक polyfill उपलब्ध कराते हैं. इसका इस्तेमाल, एक्सटेंशन, उन ब्राउज़र के लिए अंदरूनी तौर पर करता है जिनमें टेक्स्ट फ़्रैगमेंट के लिए, पहले से सुविधा उपलब्ध नहीं होती. हालांकि, इन ब्राउज़र में JavaScript में यह सुविधा लागू की जाती है.

प्रोग्राम के हिसाब से टेक्स्ट फ़्रैगमेंट का लिंक जनरेट करना

polyfill में एक फ़ाइल fragment-generation-utils.js होती है, जिसे इंपोर्ट किया जा सकता है और टेक्स्ट फ़्रैगमेंट के लिंक जनरेट करने के लिए इस्तेमाल किया जा सकता है. इसकी जानकारी नीचे दिए गए कोड सैंपल में दी गई है:

const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
const result = generateFragment(window.getSelection());
if (result.status === 0) {
  let url = `${location.origin}${location.pathname}${location.search}`;
  const fragment = result.fragment;
  const prefix = fragment.prefix ?
    `${encodeURIComponent(fragment.prefix)}-,` :
    '';
  const suffix = fragment.suffix ?
    `,-${encodeURIComponent(fragment.suffix)}` :
    '';
  const start = encodeURIComponent(fragment.textStart);
  const end = fragment.textEnd ?
    `,${encodeURIComponent(fragment.textEnd)}` :
    '';
  url += `#:~:text=${prefix}${start}${end}${suffix}`;
  console.log(url);
}

आंकड़े जुटाने के लिए टेक्स्ट फ़्रैगमेंट पाना

कई साइटें रूटिंग के लिए फ़्रैगमेंट का इस्तेमाल करती हैं. इसलिए, ब्राउज़र उन पेजों को ब्रेक न करने के लिए, टेक्स्ट फ़्रैगमेंट हटा देते हैं. पेज के टेक्स्ट फ़्रैगमेंट के लिंक दिखाने की ज़रूरी ज़रूरत है. उदाहरण के लिए, आंकड़ों के लिए इसका इस्तेमाल किया जा सकता है. हालांकि, फ़िलहाल सुझाया गया तरीका लागू नहीं किया गया है. फ़िलहाल, अपनी पसंद की जानकारी पाने के लिए, नीचे दिए गए कोड का इस्तेमाल किया जा सकता है.

new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;

सुरक्षा

टेक्स्ट फ़्रैगमेंट डायरेक्टिव सिर्फ़ पूरे (एक ही पेज पर नहीं) नेविगेशन पर लागू होते हैं. ये नेविगेशन, उपयोगकर्ता ऐक्टिवेशन की वजह से होते हैं. इसके अलावा, अगर नेविगेशन किसी ऐसे ऑरिजिन से शुरू होता है जो डेस्टिनेशन से अलग है, तो नेविगेशन के लिए noopener कॉन्टेक्स्ट की ज़रूरत होगी, ताकि डेस्टिनेशन पेज को पूरी तरह से अलग किया जा सके. टेक्स्ट फ़्रैगमेंट डायरेक्टिव सिर्फ़ मुख्य फ़्रेम पर लागू होते हैं. इसका मतलब है कि iframe में टेक्स्ट नहीं खोजा जाएगा और iframe नेविगेशन से टेक्स्ट फ़्रैगमेंट नहीं दिखेगा.

निजता

यह ज़रूरी है कि टेक्स्ट फ़्रैगमेंट की खास जानकारी को लागू करने से यह पता न चल पाए कि किसी पेज पर टेक्स्ट फ़्रैगमेंट मिला है या नहीं. एलिमेंट फ़्रैगमेंट, मूल पेज के लेखक के कंट्रोल में होते हैं. हालांकि, टेक्स्ट फ़्रैगमेंट कोई भी बना सकता है. याद रखें कि ऊपर दिए गए उदाहरण में, वेब वर्कर्स में ECMAScript मॉड्यूल हेडिंग से लिंक करने का कोई तरीका नहीं था, क्योंकि <h1> में id नहीं था. हालांकि, टेक्स्ट फ़्रैगमेंट को ध्यान से तैयार करके, मैं और कोई भी व्यक्ति किसी भी जगह से लिंक कर सकता था.

मान लें कि मैंने एक खराब विज्ञापन नेटवर्क evil-ads.example.com चलाया. इसके अलावा, कल्पना करें कि मैंने अपने विज्ञापन के एक iframe में, उपयोगकर्ता के विज्ञापन से इंटरैक्ट करने के बाद, dating.example.com के लिए टेक्स्ट फ़्रैगमेंट यूआरएल dating.example.com#:~:text=Log%20Out के साथ, डाइनैमिक तौर पर छिपा हुआ क्रॉस-ऑरिजिन iframe बनाया है. अगर "लॉग आउट करें" टेक्स्ट मिलता है, तो मुझे पता चलता है कि पीड़ित फ़िलहाल dating.example.com में लॉग इन है. इसका इस्तेमाल, उपयोगकर्ता की प्रोफ़ाइल बनाने के लिए किया जा सकता है. Text Fragments को सही तरीके से लागू न करने पर, हो सकता है कि मैच होने पर फ़ोकस स्विच हो जाए. इसलिए, evil-ads.example.com पर blur इवेंट को सुनकर यह पता लगाया जा सकता है कि मैच कब हुआ. हमने Chrome में टेक्स्ट फ़्रैगमेंट को इस तरह से लागू किया है कि ऊपर बताई गई स्थिति न हो.

स्क्रोल की पोज़िशन के आधार पर नेटवर्क ट्रैफ़िक का गलत इस्तेमाल करना भी एक तरह का अटैक हो सकता है. मान लें कि मेरे पास अपने शिकार के नेटवर्क ट्रैफ़िक लॉग का ऐक्सेस था. जैसे, किसी कंपनी के इंट्रानेट के एडमिन के तौर पर. अब कल्पना करें कि वहां एक लंबा मानव संसाधन दस्तावेज़ अगर आपको समस्या है, तो क्या करें... और फिर बर्न आउट, चिंता जैसी स्थितियों की एक सूची मौजूद है. मैं सूची में हर आइटम के बगल में एक ट्रैकिंग पिक्सल लगा सकता हूं. इसके बाद, अगर मुझे पता चलता है कि दस्तावेज़ के बगल में ट्रैकिंग पिक्सल लोड होने के साथ-साथ बर्न आउट आइटम भी लोड हो रहा है, तो इंट्रानेट एडमिन के तौर पर यह जाना जा सकता है कि कर्मचारी ने :~:text=burn%20out वाले टेक्स्ट फ़्रैगमेंट लिंक पर क्लिक किया है, जिसे कर्मचारी ने गोपनीय समझा है और यह किसी को भी नहीं दिखेगा. यह उदाहरण शुरुआती तौर पर लगने वाला है और इसके इस्तेमाल के लिए, पहले से तय की गई बहुत खास शर्तों को पूरा करना ज़रूरी है. Chrome की सुरक्षा टीम ने इस बात का आकलन किया कि नेविगेशन पर स्क्रोल करने की सुविधा को किस तरह मैनेज किया जा सकता है. अन्य उपयोगकर्ता एजेंट, मैन्युअल स्क्रोल यूज़र इंटरफ़ेस (यूआई) एलिमेंट दिखाने का विकल्प चुन सकते हैं.

जो साइटें ऑप्ट-आउट करना चाहती हैं उनके लिए, Chromium में दस्तावेज़ की नीति हेडर वैल्यू का इस्तेमाल किया जा सकता है. इससे उपयोगकर्ता एजेंट, टेक्स्ट फ़्रैगमेंट यूआरएल को प्रोसेस नहीं करेंगे.

Document-Policy: force-load-at-top

टेक्स्ट फ़्रैगमेंट की सुविधा बंद करना

इस सुविधा को बंद करने का सबसे आसान तरीका है, एक ऐसे एक्सटेंशन का इस्तेमाल करना जो एचटीटीपी रिस्पॉन्स हेडर इंजेक्ट कर सकता हो. उदाहरण के लिए, ModHeader (Google प्रॉडक्ट नहीं) रिस्पॉन्स (अनुरोध नहीं) हेडर इस तरह से शामिल करें:

Document-Policy: force-load-at-top

ऑप्ट आउट करने का एक और तरीका है, एंटरप्राइज़ सेटिंग का इस्तेमाल करना ScrollToTextFragmentEnabled. macOS पर ऐसा करने के लिए, टर्मिनल में नीचे दिया गया निर्देश चिपकाएं.

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

Windows पर, Google Chrome Enterprise सहायता सहायता साइट पर दिए गए दस्तावेज़ देखें.

वेब खोज में टेक्स्ट फ़्रैगमेंट

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

Google के सर्च इंजन के नतीजों का पेज, जिसमें हाइलाइट किया गया स्निपेट दिख रहा है. स्टेटस बार में टेक्स्ट फ़्रैगमेंट का यूआरएल दिखता है.
क्लिक करने के बाद, पेज का ज़रूरी सेक्शन स्क्रोल करके दिखता है.

नतीजा

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

धन्यवाद

टेक्स्ट फ़्रैगमेंट की सुविधा को निक बर्रिस और डेविड बोकन ने लागू किया और इसके बारे में बताया. इसमें ग्रांट वांग का भी योगदान रहा. इस लेख को अच्छी तरह से पढ़ने के लिए, जो मेडली का धन्यवाद. Unsplash पर Greg Rakozy की हीरो इमेज.