Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

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

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

Thomas Steiner

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

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

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() कंस्ट्रक्टर की मदद से पार्स करूं, तो इसके अलग-अलग कॉम्पोनेंट दिखेंगे. hash प्रॉपर्टी की वैल्यू #HTML1 पर ध्यान दें.

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 Modules in Web Workers हेडिंग को लिंक करना है. जैसा कि इस स्क्रीनशॉट में देखा जा सकता है, जिस <h1> के बारे में बात की जा रही है उसमें id एट्रिब्यूट नहीं है. इसका मतलब है कि इस हेडिंग को लिंक करने का कोई तरीका नहीं है. टेक्स्ट फ़्रैगमेंट की मदद से, इस समस्या को हल किया जा सकता है.

डेवलपर टूल, `id` के बिना हेडिंग दिखा रहे हैं.

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

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

वेबसाइट का अलग-अलग ब्राउज़र पर चलना

Browser Support

Source

सुरक्षा की वजहों से, इस सुविधा के लिए लिंक को 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 Modules in Web Workers टाइटल वाले पूरे सेक्शन को लिंक करना है. सेक्शन के पूरे टेक्स्ट को पर्सेंट-एन्कोड करने से, यूआरएल बहुत लंबा हो जाएगा.

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

टेक्स्ट का वह हिस्सा स्क्रोल करके व्यू में लाया गया और हाइलाइट किया गया जो ज़रूरी नहीं था.

`prefix-` और `-suffix`

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

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

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

टेक्स्ट फ़्रैगमेंट, "टेक्स्ट" के पहले इंस्टेंस से मैच करता है.

अच्छी बात यह है कि इसका एक समाधान है. ऐसे मामलों में, prefix- और -suffix के बारे में बताया जा सकता है. हरे रंग के कोड फ़ॉन्ट "text" से पहले "the" शब्द है और इसके बाद "parameter" शब्द है. "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>

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

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

Link to Text Fragment ब्राउज़र एक्सटेंशन.

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

ध्यान दें कि एक यूआरएल में कई टेक्स्ट फ़्रैगमेंट दिख सकते हैं. टेक्स्ट के अलग-अलग फ़्रैगमेंट को एंपरसैंड वर्ण & से अलग करना ज़रूरी है. यहां तीन टेक्स्ट फ़्रैगमेंट वाले लिंक का उदाहरण दिया गया है: 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

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

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

अगर कोई साइट इस सुविधा से बाहर होना चाहती है, तो Chromium में Document Policy हेडर वैल्यू का इस्तेमाल किया जा सकता है. इसे भेजने पर, उपयोगकर्ता एजेंट, टेक्स्ट फ़्रैगमेंट यूआरएल को प्रोसेस नहीं करेंगे.

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 Search के नतीजों का पेज, जिसमें फ़ीचर्ड स्निपेट दिख रहा है. स्टेटस बार में, टेक्स्ट फ़्रैगमेंट का यूआरएल दिखता है.

क्लिक करने के बाद, पेज का काम का सेक्शन स्क्रोल करके व्यू में आ जाता है.

नतीजा

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

इसी विषय से जुड़े कुछ लिंक

Acknowledgements

टेक्स्ट फ़्रैगमेंट को निक बुरिस और डेविड बोकन ने लागू किया और इसके बारे में बताया. इसमें ग्रांट वांग ने भी योगदान दिया. इस दस्तावेज़ की पूरी समीक्षा करने के लिए, जो मेडली को धन्यवाद.