সিএসএস কাস্টম হাইলাইট রেঞ্জ: অ্যাডভান্সড টেক্সট সিলেকশন স্টাইলিং

ওয়েবে টেক্সট সিলেকশন একটি মৌলিক ইন্টারঅ্যাকশন। যখন একজন ব্যবহারকারী ওয়েবপেজে টেক্সট সিলেক্ট করেন, তখন ব্রাউজার একটি ডিফল্ট হাইলাইট স্টাইল প্রয়োগ করে, যা সাধারণত সাদা টেক্সট সহ একটি নীল ব্যাকগ্রাউন্ড হয়। যদিও এটি কার্যকরী, এই ডিফল্ট স্টাইলিং প্রায়শই একটি ওয়েবসাইটের ডিজাইনের সাথে মানানসই হয় না। সিএসএস কাস্টম হাইলাইট রেঞ্জ এই ডিফল্ট স্টাইলগুলিকে ওভাররাইড করার এবং আরও সামঞ্জস্যপূর্ণ ও আকর্ষণীয় ব্যবহারকারী অভিজ্ঞতা তৈরি করার একটি শক্তিশালী উপায় প্রদান করে।

টেক্সট সিলেকশনের মূল বিষয়গুলি বোঝা

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

ডিফল্ট সিলেকশন স্টাইলিং

ডিফল্ট টেক্সট সিলেকশন স্টাইলিং ব্রাউজারের ইউজার এজেন্ট স্টাইলশীট দ্বারা নিয়ন্ত্রিত হয়। এই স্টাইলশীটটি সমস্ত HTML এলিমেন্টের জন্য বেসিক স্টাইলিং সরবরাহ করে এবং এতে ডিফল্ট হাইলাইট স্টাইলিং অন্তর্ভুক্ত থাকে। ব্যবহৃত নির্দিষ্ট রঙ এবং স্টাইলগুলি ব্রাউজার এবং অপারেটিং সিস্টেমের মধ্যে সামান্য ভিন্ন হতে পারে।

::selection সিউডো-এলিমেন্টের পরিচিতি

সিএসএস নির্বাচিত টেক্সটকে টার্গেট করার জন্য ::selection সিউডো-এলিমেন্ট সরবরাহ করে। এটি আপনাকে নির্বাচিত টেক্সটের background-color এবং color প্রোপার্টি পরিবর্তন করতে দেয়। তবে, এই পদ্ধতির সীমাবদ্ধতা রয়েছে। এটি শুধুমাত্র ব্যাকগ্রাউন্ড এবং টেক্সটের রঙ পরিবর্তন করতে দেয় এবং হাইলাইট রেঞ্জের উপর সূক্ষ্ম নিয়ন্ত্রণ প্রদান করে না।

            
::selection {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

এই সাধারণ সিএসএস স্নিপেটটি নির্বাচিত টেক্সটের ব্যাকগ্রাউন্ডের রঙ হলুদ এবং টেক্সটের রঙ কালোতে পরিবর্তন করবে। যদিও এটি দরকারী, এটি কেবল হিমশৈলের চূড়া মাত্র।

সিএসএস কাস্টম হাইলাইট রেঞ্জ API

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

মূল ধারণা

• হাইলইট API: অন্তর্নিহিত প্রযুক্তি যা কাস্টম স্টাইলিং সক্ষম করে।
• হাইলইট অঞ্চল: টেক্সটের নির্দিষ্ট পরিসর যা কাস্টম স্টাইলিংয়ের জন্য টার্গেট করা হয়।
• কাস্টম স্টাইল: সিএসএস প্রোপার্টি (শুধু রঙ এবং ব্যাকগ্রাউন্ড-রঙের বাইরে) যা হাইলাইট অঞ্চলে প্রয়োগ করা হয়।

সিএসএস কাস্টম হাইলাইট রেঞ্জ ব্যবহারের সুবিধা

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

সিএসএস কাস্টম হাইলাইট রেঞ্জ বাস্তবায়ন

সিএসএস কাস্টম হাইলাইট রেঞ্জ বাস্তবায়নের জন্য জাভাস্ক্রিপ্ট ব্যবহার করে আপনি যে টেক্সট রেঞ্জগুলিকে স্টাইল করতে চান তা চিহ্নিত করতে হয় এবং তারপরে সেই রেঞ্জগুলিতে কাঙ্ক্ষিত সিএসএস প্রোপার্টি প্রয়োগ করতে হয়।

ধাপ ১: টেক্সট রেঞ্জ নির্বাচন

প্রথম ধাপ হল আপনি যে টেক্সট রেঞ্জটি স্টাইল করতে চান তা চিহ্নিত করা। এটি বিভিন্ন জাভাস্ক্রিপ্ট কৌশল ব্যবহার করে করা যেতে পারে, যেমন:

• document.getSelection(): এই মেথডটি ব্যবহারকারীর দ্বারা নির্বাচিত টেক্সটের পরিসর প্রতিনিধিত্বকারী একটি Selection অবজেক্ট রিটার্ন করে।
• Range API: এই API আপনাকে প্রোগ্রাম্যাটিকভাবে টেক্সট রেঞ্জ তৈরি এবং ম্যানিপুলেট করতে দেয়।

document.getSelection() ব্যবহার করে উদাহরণ:

            
const selection = document.getSelection();
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  // Now you have the range object to work with
}

            

              
                Copy
              
            
          

Range API ব্যবহার করে উদাহরণ:

            
const range = document.createRange();
const element = document.getElementById('myElement');
range.selectNodeContents(element);
// Now you have a range that selects all content inside element

            

              
                Copy
              
            
          

ধাপ ২: একটি হাইলাইট অবজেক্ট তৈরি করা

একবার আপনার কাছে একটি Range অবজেক্ট থাকলে, আপনাকে একটি হাইলাইট অবজেক্ট তৈরি করতে হবে। এই অবজেক্টটি কাস্টম হাইলাইটের প্রতিনিধিত্ব করবে এবং কাঙ্ক্ষিত স্টাইল প্রয়োগ করতে ব্যবহৃত হবে।

            
const highlight = new Highlight(range);

            

              
                Copy
              
            
          

ধাপ ৩: হাইলাইট নিবন্ধন করা

হাইলাইটটিকে দৃশ্যমান করতে, আপনাকে এটিকে CSS.highlights অবজেক্টের সাথে নিবন্ধন করতে হবে। এটি একটি গ্লোবাল অবজেক্ট যা পৃষ্ঠার সমস্ত কাস্টম হাইলাইট পরিচালনা করে।

            
if (!window.CSS.highlights) {
  console.error('CSS Custom Highlight API is not supported in this browser.');
} else {
  CSS.highlights.set('my-custom-highlight', highlight);
}

            

              
                Copy
              
            
          

এখানে, 'my-custom-highlight' একটি নির্বিচারে নির্বাচিত নাম যা আপনি আপনার হাইলাইট সনাক্ত করতে ব্যবহার করবেন।

ধাপ ৪: সিএসএস দিয়ে কাস্টম স্টাইল প্রয়োগ করা

অবশেষে, আপনি আপনার সিএসএস-এ ::highlight() সিউডো-এলিমেন্ট ব্যবহার করে হাইলাইটে কাস্টম স্টাইল প্রয়োগ করতে পারেন।

            
::highlight(my-custom-highlight) {
  background-color: rgba(255, 200, 0, 0.5);
  color: #333;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

এই সিএসএস স্নিপেটটি 'my-custom-highlight' রেঞ্জের মধ্যে থাকা টেক্সটে একটি আধা-স্বচ্ছ হলুদ ব্যাকগ্রাউন্ড, গাঢ় ধূসর টেক্সট, বোল্ড ফন্ট এবং একটি সূক্ষ্ম টেক্সট শ্যাডো প্রয়োগ করবে।

সম্পূর্ণ উদাহরণ

এখানে একটি সম্পূর্ণ উদাহরণ দেখানো হলো যা সিএসএস কাস্টম হাইলাইট রেঞ্জ কীভাবে ব্যবহার করতে হয় তা প্রদর্শন করে:

HTML:

            
This is some text that can be selected.  We will customize the highlight styling using CSS Custom Highlight Range.

            

              
                Copy
              
            
          

JavaScript:

            
const textElement = document.getElementById('myText');

textElement.addEventListener('mouseup', () => {
  const selection = document.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const highlight = new Highlight(range);

    if (!window.CSS.highlights) {
      console.error('CSS Custom Highlight API is not supported in this browser.');
    } else {
      CSS.highlights.set('custom-selection', highlight);
    }
  }
});

            

              
                Copy
              
            
          

CSS:

            
::highlight(custom-selection) {
  background-color: lightgreen;
  color: darkgreen;
  font-style: italic;
}

            

              
                Copy
              
            
          

এই উদাহরণে, যখন ব্যবহারকারী প্যারাগ্রাফের মধ্যে টেক্সট নির্বাচন করার পরে মাউস বাটন ছেড়ে দেয়, তখন জাভাস্ক্রিপ্ট কোড একটি হাইলাইট তৈরি করে এবং এটি নিবন্ধন করে। এরপর সিএসএস নির্বাচিত টেক্সটে একটি হালকা সবুজ ব্যাকগ্রাউন্ড, গাঢ় সবুজ টেক্সট রঙ এবং ইটালিক ফন্ট স্টাইল প্রয়োগ করে।

অ্যাডভান্সড কাস্টমাইজেশন কৌশল

সিএসএস কাস্টম হাইলাইট রেঞ্জ আরও উন্নত কাস্টমাইজেশন কৌশলের অনুমতি দেয়, যার মধ্যে রয়েছে:

গ্রেডিয়েন্ট ব্যবহার করা

আপনি দৃশ্যত আকর্ষণীয় হাইলাইট এফেক্ট তৈরি করতে সিএসএস গ্রেডিয়েন্ট ব্যবহার করতে পারেন।

            
::highlight(gradient-highlight) {
  background-image: linear-gradient(to right, #f00, #ff0);
  color: white;
  font-weight: bold;
}

            

              
                Copy
              
            
          

বর্ডার এবং শ্যাডো যোগ করা

আপনি হাইলাইটটিকে আরও ফুটিয়ে তোলার জন্য বর্ডার এবং শ্যাডো যোগ করতে পারেন।

            
::highlight(border-highlight) {
  background-color: rgba(0, 0, 255, 0.2);
  border: 2px solid blue;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  color: black;
}

            

              
                Copy
              
            
          

শর্তসাপেক্ষ হাইলাইটিং

আপনি নির্দিষ্ট শর্তের উপর ভিত্তি করে হাইলাইট স্টাইলগুলি গতিশীলভাবে পরিবর্তন করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি বিভিন্ন ধরণের টেক্সট বিভিন্ন রঙে হাইলাইট করতে পারেন।

            
// Example: Highlight keywords in a different color
const keywords = ['keyword1', 'keyword2', 'keyword3'];

// (Implementation for finding keywords and creating ranges would go here)

// Then, in CSS:
::highlight(keyword-highlight) {
  background-color: yellow;
  color: red;
}

            

              
                Copy
              
            
          

অ্যাক্সেসিবিলিটি বিবেচনা

কাস্টম হাইলাইট স্টাইল প্রয়োগ করার সময়, অ্যাক্সেসিবিলিটি বিবেচনা করা অত্যন্ত গুরুত্বপূর্ণ। নিশ্চিত করুন যে আপনার হাইলাইট স্টাইলগুলি দৃষ্টি প্রতিবন্ধী ব্যবহারকারীদের জন্য পর্যাপ্ত কনট্রাস্ট এবং স্পষ্ট ভিজ্যুয়াল সংকেত প্রদান করে।

কনট্রাস্ট অনুপাত

নিশ্চিত করুন যে আপনার হাইলাইট স্টাইলের ব্যাকগ্রাউন্ড রঙ এবং টেক্সট রঙের মধ্যে কনট্রাস্ট অনুপাত WCAG (ওয়েব কনটেন্ট অ্যাক্সেসিবিলিটি গাইডলাইনস) এর প্রয়োজনীয়তা পূরণ করে। সাধারণ টেক্সটের জন্য কমপক্ষে ৪.৫:১ এবং বড় টেক্সটের জন্য ৩:১ কনট্রাস্ট অনুপাতের সুপারিশ করা হয়।

ভিজ্যুয়াল সংকেত

টেক্সট নির্বাচিত হয়েছে তা বোঝানোর জন্য স্পষ্ট ভিজ্যুয়াল সংকেত প্রদান করুন। এটি স্বতন্ত্র রঙ, বর্ডার বা শ্যাডো ব্যবহার করে করা যেতে পারে।

সহায়ক প্রযুক্তি দিয়ে পরীক্ষা করা

আপনার কাস্টম হাইলাইট স্টাইলগুলি সকল ব্যবহারকারীর জন্য অ্যাক্সেসযোগ্য কিনা তা নিশ্চিত করতে স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তি দিয়ে পরীক্ষা করুন।

ব্রাউজার সামঞ্জস্যতা

সিএসএস কাস্টম হাইলাইট রেঞ্জ API একটি তুলনামূলকভাবে নতুন প্রযুক্তি, এবং ব্রাউজার সমর্থন ভিন্ন হতে পারে। ২০২৩ সালের শেষের দিকে, এটি ক্রোমিয়াম-ভিত্তিক ব্রাউজার (ক্রোম, এজ, ব্রেভ) এবং সাফারি (টেকনোলজি প্রিভিউ) তে সমর্থিত। ফায়ারফক্স আগ্রহ প্রকাশ করেছে, কিন্তু এখনও সমর্থন বাস্তবায়ন করা হয়নি।

উৎপাদনে এই API ব্যবহার করার আগে সর্বশেষ ব্রাউজার সামঞ্জস্যতার তথ্য পরীক্ষা করা গুরুত্বপূর্ণ। আপনি সিএসএস কাস্টম হাইলাইট রেঞ্জের জন্য ব্রাউজার সমর্থন ট্র্যাক করতে "Can I use..." এর মতো ওয়েবসাইট ব্যবহার করতে পারেন।

যেসব ব্রাউজার এই API সমর্থন করে না, তাদের জন্য আপনি ফলব্যাক হিসাবে ::selection সিউডো-এলিমেন্ট ব্যবহার করতে পারেন।

ব্যবহারের ক্ষেত্র এবং উদাহরণ

এখানে কিছু বাস্তব ব্যবহারের ক্ষেত্র এবং উদাহরণ রয়েছে যেখানে সিএসএস কাস্টম হাইলাইট রেঞ্জ ব্যবহার করা যেতে পারে:

কোড এডিটর

পঠনযোগ্যতা এবং ভিজ্যুয়াল আবেদন উন্নত করতে কোড এডিটরে নির্বাচিত কোডের জন্য হাইলাইট স্টাইলগুলি কাস্টমাইজ করুন। বিভিন্ন প্রোগ্রামিং ভাষার জন্য এমনকি বিভিন্ন হাইলাইট স্কিম থাকতে পারে।

ডকুমেন্ট ভিউয়ার

ডকুমেন্টের ডিজাইনের সাথে মিলে যাওয়া কাস্টম হাইলাইট স্টাইল সরবরাহ করে ডকুমেন্ট ভিউয়ারের ব্যবহারকারীর অভিজ্ঞতা উন্নত করুন।

ই-লার্নিং প্ল্যাটফর্ম

একটি কাস্টম স্টাইলে মূল ধারণা বা গুরুত্বপূর্ণ তথ্য হাইলাইট করে ইন্টারেক্টিভ শেখার অভিজ্ঞতা তৈরি করুন।

সার্চ রেজাল্ট হাইলাইটিং

একটি স্বতন্ত্র কাস্টম স্টাইলের সাথে মিলে যাওয়া টার্মগুলি হাইলাইট করে সার্চ রেজাল্টের দৃশ্যমানতা উন্নত করুন। এটি একটি বহুভাষিক অনুসন্ধানে কেমন দেখতে পারে তা বিবেচনা করুন, যেখানে হাইলাইট রঙগুলি মিলে যাওয়া টার্মের ভাষা সূক্ষ্মভাবে নির্দেশ করতে পারে।

টীকা টুলস

ব্যবহারকারীদের গুরুত্বপূর্ণ অংশ চিহ্নিত করতে বা নোট যোগ করতে কাস্টম হাইলাইট স্টাইল দিয়ে টেক্সট টীকা করার অনুমতি দিন। সহযোগী টীকাগুলির জন্য বিভিন্ন ব্যবহারকারীকে বিভিন্ন হাইলাইট রঙ বরাদ্দ করা যেতে পারে।

সেরা অভ্যাস

• সিমান্টিক HTML ব্যবহার করুন: আপনার বিষয়বস্তু গঠন করতে সিমান্টিক HTML এলিমেন্ট ব্যবহার করুন। এটি আপনার স্টাইল করতে চাওয়া টেক্সট রেঞ্জগুলি সনাক্ত করা সহজ করে তুলবে।
• এটি সহজ রাখুন: অতিরিক্ত জটিল বা বিভ্রান্তিকর হাইলাইট স্টাইল ব্যবহার করা থেকে বিরত থাকুন। লক্ষ্য হল ব্যবহারকারীর অভিজ্ঞতা উন্নত করা, ব্যবহারকারীকে অভিভূত করা নয়।
• পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন: আপনার কাস্টম হাইলাইট স্টাইলগুলি বিভিন্ন ব্রাউজার এবং ডিভাইসে পরীক্ষা করে নিশ্চিত করুন যে সেগুলি প্রত্যাশা অনুযায়ী কাজ করে।
• পারফরম্যান্স বিবেচনা করুন: খুব বেশি হাইলাইট রেঞ্জ তৈরি করা থেকে বিরত থাকুন, কারণ এটি পারফরম্যান্সকে প্রভাবিত করতে পারে। টেক্সট রেঞ্জগুলি দক্ষতার সাথে সনাক্ত এবং স্টাইল করতে আপনার জাভাস্ক্রিপ্ট কোডটি অপ্টিমাইজ করুন।

উপসংহার

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