এমনভাবে লিঙ্ক করুন যা আগে কেউ করেনি: টেক্সট ফ্র্যাগমেন্ট

টেক্সট ফ্র্যাগমেন্ট আপনাকে URL ফ্র্যাগমেন্টে টেক্সট স্নিপেট নির্দিষ্ট করতে দেয়। এই ধরনের টেক্সট ফ্র্যাগমেন্ট সহ কোনও URL-এ নেভিগেট করার সময়, ব্রাউজার সেটিকে হাইলাইট করতে এবং ব্যবহারকারীর দৃষ্টি আকর্ষণ করতে পারে।

Thomas Steiner

ফ্র্যাগমেন্ট শনাক্তকারী

Chrome 80 ছিল একটি বড় রিলিজ। এতে অনেক প্রত্যাশিত ফিচার ছিল, যেমন ওয়েব ওয়ার্কার্সে ECMAScript মডিউল, নালিশ কোয়ালিসিং, ঐচ্ছিক চেইনিং এবং আরও অনেক কিছু। Chromium ব্লগে ব্লগ পোস্ট-এর মাধ্যমে যথারীতি রিলিজের ঘোষণা করা হয়েছে। নিচের স্ক্রিনশটে আপনি ব্লগ পোস্টের উদ্ধৃতি দেখতে পাবেন।

Chromium ব্লগ পোস্টে id অ্যাট্রিবিউট সহ এলিমেন্টের চারপাশে লাল বক্স দেখানো হয়েছে।

আপনি হয়ত ভাবছেন যে লাল রঙের বক্সগুলির অর্থ কী। DevTools-এ নিম্নলিখিত স্নিপেট রান করার ফলে এগুলি পাওয়া গেছে। এটি id অ্যাট্রিবিউট আছে এমন সব এলিমেন্ট হাইলাইট করে।

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

ফ্র্যাগমেন্ট শনাক্তকারী-এর সাহায্যে আমি লাল বক্স দিয়ে হাইলাইট করা যেকোনও এলিমেন্টে ডিপ লিঙ্ক প্লেস করতে পারি, যা আমি পরে পৃষ্ঠার URL-এর হ্যাশ-এ ব্যবহার করি। ধরা যাক, আমি যদি পাশে থাকা আমাদের প্রোডাক্ট ফোরাম বক্সে আমাদের মতামত জানান https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1-এ ডিপ লিঙ্ক করতে চাই, তাহলে আমি URL-টি ম্যানুয়ালি তৈরি করে তা করতে পারি। আপনি ডেভেলপার টুলের এলিমেন্ট প্যানেলে দেখতে পাচ্ছেন যে, যে এলিমেন্ট নিয়ে প্রশ্ন উঠেছে সেটিতে id অ্যাট্রিবিউট আছে এবং তার ভ্যালু হল HTML1।

Dev Tools কোনও এলিমেন্টের id দেখাচ্ছে।

আমি যদি JavaScript-এর URL() কনস্ট্রাক্টর দিয়ে এই 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 Modules in Web Workers হেডিংয়ে লিঙ্ক করতে চাই। আপনি নিম্নলিখিত স্ক্রিনশটে দেখতে পাচ্ছেন যে, যে <h1> নিয়ে প্রশ্ন উঠেছে, সেটিতে কোনও id অ্যাট্রিবিউট নেই, অর্থাৎ এই হেডিংয়ের সাথে লিঙ্ক করার কোনও উপায় নেই। এই সমস্যার সমাধান করে টেক্সট ফ্র্যাগমেন্ট।

Dev Tools-এ id ছাড়া হেডিং দেখানো হচ্ছে।

টেক্সট ফ্র্যাগমেন্ট

টেক্সট ফ্র্যাগমেন্ট প্রস্তাব URL হ্যাশে টেক্সট স্নিপেট নির্দিষ্ট করার জন্য সহায়তা যোগ করে। এই ধরনের টেক্সট ফ্র্যাগমেন্ট সহ কোনও URL-এ নেভিগেট করার সময়, ইউজার এজেন্ট সেটিকে হাইলাইট করে ব্যবহারকারীর দৃষ্টি আকর্ষণ করতে পারে।

মানানসই ব্রাউজার

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 131.
  • Safari: 18.2.

Source

নিরাপত্তা সংক্রান্ত কারণে, এই ফিচারের জন্য লিঙ্কগুলি noopener প্রসঙ্গে খুলতে হবে। তাই, আপনার <a> অ্যাঙ্কর মার্কআপে rel="noopener" অন্তর্ভুক্ত করতে অথবা আপনার Window.open() উইন্ডো কার্যকারিতা ফিচারের তালিকায় noopener যোগ করতে ভুলবেন না।

start

সবচেয়ে সহজভাবে বলতে গেলে, টেক্সট ফ্র্যাগমেন্টের সিনট্যাক্স হল: হ্যাশ চিহ্নের # পরে :~:text= এবং শেষে start, যা পার্সেন্ট-এনকোডেড টেক্সটকে বোঝায়, যার সাথে আমি লিঙ্ক করতে চাই।

#:~:text=start

যেমন, ধরুন আমি ECMAScript Modules in Web Workers শীর্ষক লিঙ্কে যেতে চাই, যা Chrome 80-এর ফিচার ঘোষণা করা ব্লগ পোস্টে আছে, এই ক্ষেত্রে URL হবে:

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 শীর্ষক সম্পূর্ণ বিভাগ লিঙ্ক করতে চাই, তাহলে কী হবে? বিভাগের সম্পূর্ণ টেক্সট পার্সেন্ট-এনকোডিং করলে, তার ফলে তৈরি হওয়া URL অবাস্তবভাবে দীর্ঘ হবে।

ভাগ্যক্রমে, আরও ভালো উপায় আছে। পুরো টেক্সটের পরিবর্তে, আমি 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 বেছে নিয়েছি। আসলে, একটু ছোট URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. যার প্রতিটি পাশে মাত্র দুটি শব্দ আছে, সেটিও কাজ করত। start এবং end-এর সাথে আগের ভ্যালু তুলনা করুন।

আমি যদি আরও এক ধাপ এগিয়ে যাই এবং এখন start ও end, দুটির জন্যই একটি শব্দ ব্যবহার করি, তাহলে আপনি দেখতে পাবেন যে আমি সমস্যায় পড়েছি। URL 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 রিলিজ ব্লগ পোস্টকে আমার উদাহরণ হিসেবে বেছে নিয়েছি? উত্তর হল, এই রিলিজে টেক্সট ফ্র্যাগমেন্ট চালু করা হয়েছে:

ব্লগ পোস্টের টেক্সট: টেক্সট URL ফ্র্যাগমেন্ট। ব্যবহারকারী বা লেখক এখন URL-এ দেওয়া টেক্সট ফ্র্যাগমেন্ট ব্যবহার করে পৃষ্ঠার নির্দিষ্ট অংশে লিঙ্ক করতে পারবেন। পৃষ্ঠাটি লোড হলে, ব্রাউজার টেক্সট হাইলাইট করে এবং ফ্র্যাগমেন্টটি স্ক্রল করে ভিউতে নিয়ে আসে। যেমন, নিচের URL-টি 'বিড়াল' সম্পর্কিত উইকি পৃষ্ঠা লোড করে এবং `text` প্যারামিটারে তালিকাভুক্ত কন্টেন্টে স্ক্রল করে।
টেক্সট ফ্র্যাগমেন্ট ঘোষণা সংক্রান্ত ব্লগ পোস্টের উদ্ধৃতি।

লক্ষ্য করুন, উপরের স্ক্রিনশটে "টেক্সট" শব্দটি চারবার দেখা যাচ্ছে। চতুর্থ ঘটনাটি সবুজ কোড ফন্টে লেখা আছে। আমি যদি এই নির্দিষ্ট শব্দে লিঙ্ক করতে চাই, তাহলে আমি start-কে text-এ সেট করব। যেহেতু "text" শব্দটি, আসলে, একটিই শব্দ, তাই end থাকতে পারে না। নতুন কী আছে? URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text হেডিংয়ে আগে থেকেই থাকা "Text" শব্দটির প্রথমবার ব্যবহারের সাথে মিলে যায়:

"টেক্সট" প্রথমবার যেখানে দেখা যাচ্ছে সেখানে টেক্সট ফ্র্যাগমেন্ট ম্যাচ করছে।

ভাগ্যক্রমে এর সমাধান আছে। এই ধরনের ক্ষেত্রে, আমি একটি prefix- এবং একটি -suffix নির্দিষ্ট করতে পারি। সবুজ কোড ফন্ট "text"-এর আগের শব্দটি হল "the" এবং পরের শব্দটি হল "parameter"। "টেক্সট" শব্দটি অন্য যে তিনটি জায়গায় আছে, তার কোনওটিতেই আশেপাশের শব্দ একই নয়। এই তথ্য ব্যবহার করে আমি আগের URL পরিবর্তন করে 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>

ব্রাউজার এক্সটেনশনের মাধ্যমে টেক্সট ফ্র্যাগমেন্ট URL তৈরি করা

ম্যানুয়ালি টেক্সট ফ্র্যাগমেন্ট URL তৈরি করা খুবই বিরক্তিকর, বিশেষ করে যখন আপনাকে নিশ্চিত করতে হয় যে সেগুলি অনন্য। আপনি যদি সত্যিই এটি করতে চান, তাহলে স্পেসিফিকেশনে কিছু পরামর্শ দেওয়া আছে এবং টেক্সট ফ্র্যাগমেন্ট URL তৈরি করার জন্য নির্দিষ্ট ধাপ তালিকাভুক্ত করা আছে। আমরা লিঙ্ক টু টেক্সট ফ্র্যাগমেন্ট নামে একটি ওপেন-সোর্স ব্রাউজার এক্সটেনশন প্রদান করি, যা আপনাকে যেকোনও টেক্সট বেছে নিয়ে সেটির সাথে লিঙ্ক করতে দেয় এবং তারপর সংশ্লিষ্ট মেনুতে "বেছে নেওয়া টেক্সটের লিঙ্ক কপি করুন" বিকল্পে ক্লিক করতে দেয়। এই এক্সটেনশন নিম্নলিখিত ব্রাউজারের জন্য উপলভ্য:

টেক্সট ফ্র্যাগমেন্টের লিঙ্ক ব্রাউজার এক্সটেনশন।

একটি URL-এ একাধিক টেক্সট ফ্র্যাগমেন্ট

মনে রাখবেন, একটি URL-এ একাধিক টেক্সট ফ্র্যাগমেন্ট থাকতে পারে। নির্দিষ্ট টেক্সট ফ্র্যাগমেন্টকে অ্যাম্পারস্যান্ড অক্ষর & দিয়ে আলাদা করতে হবে। তিনটি টেক্সট ফ্র্যাগমেন্ট সহ একটি উদাহরণ লিঙ্ক এখানে দেওয়া হল: 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.

একটি URL-এ তিনটি টেক্সট ফ্র্যাগমেন্ট।

এলিমেন্ট ও টেক্সট ফ্র্যাগমেন্ট মেশানো হচ্ছে

প্রথাগত এলিমেন্ট ফ্র্যাগমেন্ট টেক্সট ফ্র্যাগমেন্টের সাথে যোগ করা যেতে পারে। একই URL-এ দুটিই থাকলে কোনও সমস্যা নেই, যেমন, পৃষ্ঠার আসল টেক্সট পরিবর্তন হলে অর্থপূর্ণ ফলব্যাক প্রদান করা, যাতে টেক্সট ফ্র্যাগমেন্ট আর ম্যাচ না করে। আমাদের প্রোডাক্ট ফোরাম বিভাগে মতামত জানান লিঙ্ক করা URL-এ 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.) দুটিই আছে:

এলিমেন্ট ফ্র্যাগমেন্ট ও টেক্সট ফ্র্যাগমেন্ট, দুটির সাথেই লিঙ্ক করা।

ফ্র্যাগমেন্ট ডাইরেক্টিভ

সিনট্যাক্সের একটি এলিমেন্ট আমি এখনও ব্যাখ্যা করিনি: ফ্র্যাগমেন্ট ডিরেক্টিভ :~:। দেখানো হয়েছে এমন URL এলিমেন্ট ফ্র্যাগমেন্টের সাথে মানানসই সংক্রান্ত সমস্যা এড়াতে, টেক্সট ফ্র্যাগমেন্ট স্পেসিফিকেশন ফ্র্যাগমেন্ট নির্দেশিকা চালু করে। ফ্র্যাগমেন্ট ডিরেক্টিভ হল URL ফ্র্যাগমেন্টের একটি অংশ যা কোড সিকোয়েন্স :~: দ্বারা সীমাবদ্ধ। এটি text=-এর মতো ইউজার এজেন্ট সংক্রান্ত নির্দেশের জন্য সংরক্ষিত এবং লোড করার সময় URL থেকে সরিয়ে দেওয়া হয় যাতে লেখক স্ক্রিপ্ট সরাসরি এটির সাথে ইন্টার‍্যাক্ট করতে না পারে। ইউজার এজেন্ট নির্দেশাবলীকে নির্দেশনাও বলা হয়। এই নির্দিষ্ট ক্ষেত্রে, text=-কে টেক্সট ডিরেক্টিভ বলা হয়।

ফিচার শনাক্তকরণ

সাপোর্ট শনাক্ত করতে, document-এ শুধু-পড়ার-উপযোগী fragmentDirective প্রপার্টি পরীক্ষা করুন। ফ্র্যাগমেন্ট ডিরেক্টিভ হল URL-এর জন্য একটি মেকানিজম যা ডকুমেন্ট নয়, বরং ব্রাউজারকে নির্দেশাবলী নির্দিষ্ট করে। এটি লেখক স্ক্রিপ্টের সাথে সরাসরি ইন্টার‍্যাকশন এড়ানোর জন্য তৈরি করা হয়েছে, যাতে আগে থেকে থাকা কন্টেন্টে ব্রেকিং পরিবর্তন প্রয়োগ করার ভয় ছাড়াই ভবিষ্যতের ইউজার এজেন্ট নির্দেশাবলী যোগ করা যায়। ভবিষ্যতে এই ধরনের সম্ভাব্য সংযোজনের একটি উদাহরণ হল অনুবাদের ইঙ্গিত।

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

ফিচার শনাক্তকরণ মূলত এমন ক্ষেত্রে ব্যবহার করা হয় যেখানে লিঙ্কগুলি ডায়নামিকভাবে তৈরি করা হয় (যেমন সার্চ ইঞ্জিনের মাধ্যমে) যাতে টেক্সট ফ্র্যাগমেন্ট লিঙ্কগুলি ব্রাউজারে দেখানো না হয়, যেগুলি সেগুলি সাপোর্ট করে না।

টেক্সট ফ্র্যাগমেন্ট স্টাইল করা

ডিফল্ট হিসেবে, ব্রাউজার টেক্সট ফ্র্যাগমেন্টকে সেইভাবেই স্টাইল করে যেভাবে তারা mark (সাধারণত হলুদের উপর কালো, mark-এর জন্য CSS সিস্টেম কালার) স্টাইল করে। ইউজার-এজেন্ট স্টাইলশিটে CSS থাকে যা দেখতে এইরকম হয়:

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

আপনি দেখতে পাচ্ছেন যে ব্রাউজারটি একটি ছদ্ম নির্বাচক ::target-text প্রকাশ করে যা আপনি প্রয়োগ করা হাইলাইটিং কাস্টমাইজ করতে ব্যবহার করতে পারেন। যেমন, আপনি লাল ব্যাকগ্রাউন্ডে কালো টেক্সট হিসেবে টেক্সট ফ্র্যাগমেন্ট ডিজাইন করতে পারেন। সবসময়ের মতো, কালার কনট্রাস্ট চেক করতে ভুলবেন না যাতে আপনার ওভাররাইড স্টাইলিংয়ের কারণে অ্যাক্সেসিবিলিটি সংক্রান্ত সমস্যা না হয় এবং হাইলাইট করা অংশটি যেন বাকি কন্টেন্টের থেকে আলাদাভাবে চোখে পড়ে।

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

পলিফিল

টেক্সট ফ্র্যাগমেন্ট ফিচারটি কিছুটা পলিফিল করা যেতে পারে। আমরা একটি পলিফিল প্রদান করি, যা এক্সটেনশন দ্বারা ইন্টার্নালি ব্যবহার করা হয়, এমন ব্রাউজারগুলির জন্য যা টেক্সট ফ্র্যাগমেন্টের জন্য বিল্ট-ইন সহায়তা প্রদান করে না যেখানে ফাংশনটি জাভাস্ক্রিপ্টে প্রয়োগ করা হয়।

প্রোগ্রাম্যাটিক টেক্সট ফ্র্যাগমেন্ট লিঙ্ক জেনারেশন

পলিফিলে 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 Modules in Web Workers শিরোনামে লিঙ্ক করার কোনও উপায় ছিল না, কারণ <h1>-এ কোনও id ছিল না, কিন্তু আমি সহ যেকেউ টেক্সট ফ্র্যাগমেন্ট যত্ন সহকারে তৈরি করে যেকোনও জায়গায় লিঙ্ক করতে পারতাম?

ধরা যাক, আমি একটি ক্ষতিকর বিজ্ঞাপন নেটওয়ার্ক evil-ads.example.com চালাচ্ছি। আরও কল্পনা করুন যে আমার একটি বিজ্ঞাপন iframe-এ আমি ডায়নামিকভাবে একটি লুকানো ক্রস-অরিজিন iframe তৈরি করেছি যাতে ব্যবহারকারী বিজ্ঞাপনের সাথে ইন্টার‍্যাক্ট করলে dating.example.com-এ টেক্সট ফ্র্যাগমেন্ট URL dating.example.com#:~:text=Log%20Out ব্যবহার করা যায়। "লগ-আউট করুন" টেক্সটটি খুঁজে পেলে, আমি বুঝতে পারি যে ভিক্টিম dating.example.com-এ লগ-ইন করে আছেন, যা আমি ব্যবহারকারীর প্রোফাইলিংয়ের জন্য ব্যবহার করতে পারি। যেহেতু একটি সাধারণ টেক্সট ফ্র্যাগমেন্ট ইমপ্লিমেন্টেশন সিদ্ধান্ত নিতে পারে যে একটি সফল ম্যাচ একটি ফোকাস সুইচ ঘটাবে, evil-ads.example.com-এ আমি blur ইভেন্টটি শুনতে পারি এবং এইভাবে জানতে পারি কখন একটি ম্যাচ ঘটেছে। Chrome-এ আমরা টেক্সট ফ্র্যাগমেন্ট এমনভাবে প্রয়োগ করেছি যাতে এই ধরনের পরিস্থিতি তৈরি না হয়।

স্ক্রল পজিশনের উপর ভিত্তি করে নেটওয়ার্ক ট্রাফিককে কাজে লাগিয়ে আরেকটি অ্যাটাক করা হতে পারে। ধরে নিন, আমার কাছে ভিক্টিমের নেটওয়ার্ক ট্রাফিক লগের অ্যাক্সেস আছে, যেমন কোনও কোম্পানির ইন্ট্রানেটের অ্যাডমিনিস্ট্রেটর। এখন কল্পনা করুন যে সেখানে হিউম্যান রিসোর্সের একটি দীর্ঘ ডকুমেন্ট ছিল আপনি যদি... থেকে ভোগেন তাহলে কী করবেন এবং তারপরে বার্ন আউট, উদ্বেগ ইত্যাদির মতো অবস্থার একটি তালিকা। আমি তালিকার প্রতিটি আইটেমের পাশে একটি ট্র্যাকিং পিক্সেল রাখতে পারি। আমি যদি তখন নির্ধারণ করি যে ডকুমেন্ট লোড করা সাময়িকভাবে ট্র্যাকিং পিক্সেল লোড করার সাথে সহ-ঘটে, যেমন, বার্ন আউট আইটেম, তাহলে আমি, ইন্ট্রানেট অ্যাডমিনিস্ট্রেটর হিসেবে, নির্ধারণ করতে পারি যে একজন কর্মচারী :~:text=burn%20out সহ একটি টেক্সট ফ্র্যাগমেন্ট লিঙ্কে ক্লিক করেছেন যা কর্মচারী হয়তো ধরে নিয়েছেন যে গোপনীয় এবং কারও কাছে দৃশ্যমান নয়। যেহেতু এই উদাহরণটি শুরু করার জন্য কিছুটা উদ্ভাবিত এবং যেহেতু এর অপব্যবহারের জন্য খুবই নির্দিষ্ট পূর্বশর্ত পূরণ করতে হবে, তাই Chrome নিরাপত্তা টিম নেভিগেশনে স্ক্রল প্রয়োগ করার ঝুঁকি ম্যানেজ করা যাবে বলে মূল্যায়ন করেছে। অন্যান্য ইউজার এজেন্ট এর পরিবর্তে ম্যানুয়াল স্ক্রল UI এলিমেন্ট দেখানোর সিদ্ধান্ত নিতে পারে।

যেসব সাইট অপ্ট-আউট করতে চায়, তাদের জন্য Chromium একটি ডকুমেন্ট নীতি হেডার ভ্যালু সমর্থন করে যা তারা পাঠাতে পারে যাতে ইউজার এজেন্ট টেক্সট ফ্র্যাগমেন্ট URL প্রসেস না করে।

Document-Policy: force-load-at-top

টেক্সট ফ্র্যাগমেন্ট বন্ধ করা হচ্ছে

ফিচারটি বন্ধ করার সবচেয়ে সহজ উপায় হল এমন একটি এক্সটেনশন ব্যবহার করা যা HTTP রেসপন্স হেডার ইনজেক্ট করতে পারে, যেমন, ModHeader (Google-এর প্রোডাক্ট নয়), যাতে নিচে দেখানো রেসপন্স (রিকোয়েস্ট নয়) হেডার যোগ করা যায়:

Document-Policy: force-load-at-top

অপ্ট-আউট করার আরেকটি, আরও জটিল, উপায় হল এন্টারপ্রাইজ সেটিং ScrollToTextFragmentEnabled ব্যবহার করা। macOS-এ এটি করতে, টার্মিনালে নিম্নলিখিত কমান্ড পেস্ট করুন।

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

Windows-এ, Google Chrome Enterprise সহায়তা সহায়তা সাইটে ডকুমেন্টেশন অনুসরণ করুন।

ওয়েব সার্চে টেক্সট ফ্র্যাগমেন্ট

কিছু সার্চের ক্ষেত্রে, সার্চ ইঞ্জিন Google প্রাসঙ্গিক ওয়েবসাইট থেকে কন্টেন্ট স্নিপেট সহ দ্রুত উত্তর বা সারসংক্ষেপ প্রদান করে। সার্চটি কোনও প্রশ্নের আকারে করা হলে, এই ফিচার করা স্নিপেট দেখানোর সম্ভাবনা সবচেয়ে বেশি থাকে। ফিচার করা স্নিপেটে ক্লিক করলে, ব্যবহারকারী সরাসরি সোর্স ওয়েব পেজে ফিচার করা স্নিপেট টেক্সটে পৌঁছে যান। অটোমেটিক তৈরি হওয়া টেক্সট ফ্র্যাগমেন্ট URL-এর জন্য এটি কাজ করে।

Google Search ফলাফল পৃষ্ঠায় ফিচার করা স্নিপেট দেখানো হচ্ছে। স্ট্যাটাস বারে টেক্সট ফ্র্যাগমেন্ট URL দেখা যায়।
ক্লিক করার পরে, পৃষ্ঠার প্রাসঙ্গিক বিভাগটি স্ক্রল করে ভিউতে নিয়ে আসা হয়।

উপসংহার

টেক্সট ফ্র্যাগমেন্ট URL হল ওয়েবপেজে ইচ্ছামতো টেক্সট লিঙ্ক করার একটি শক্তিশালী ফিচার। পণ্ডিতদের কমিউনিটি এটি ব্যবহার করে অত্যন্ত সঠিক উদ্ধৃতি বা রেফারেন্স লিঙ্ক প্রদান করতে পারে। সার্চ ইঞ্জিন এটি ব্যবহার করে পৃষ্ঠায় টেক্সট ফলাফলে ডিপলিঙ্ক করতে পারে। সোশ্যাল নেটওয়ার্কিং সাইট এটি ব্যবহার করে ব্যবহারকারীদের অ্যাক্সেস করা যায় না এমন স্ক্রিনশটের পরিবর্তে ওয়েবপেজের নির্দিষ্ট অংশ শেয়ার করার সুবিধা দিতে পারে। আমি আশা করি আপনি টেক্সট ফ্র্যাগমেন্ট URL ব্যবহার করা শুরু করবেন এবং আমার মতোই এটিকে উপযোগী বলে মনে করবেন। টেক্সট ফ্র্যাগমেন্টের লিঙ্ক ব্রাউজার এক্সটেনশন ইনস্টল করতে ভুলবেন না।

স্বীকৃতি

Nick Burris ও David Bokan টেক্সট ফ্র্যাগমেন্ট প্রয়োগ ও নির্দিষ্ট করেছেন এবং Grant Wang এতে অবদান রেখেছেন। এই ডকুমেন্টটি পুঙ্খানুপুঙ্খভাবে পর্যালোচনা করার জন্য Joe Medley-কে ধন্যবাদ।