অপারেটিং সিস্টেম টেক্সট স্কেল মেনে চলুন

এক নজরে

দৃষ্টিশক্তির সমস্যা আছে এমন ব্যবহারকারীরা প্রায়ই অপারেটিং সিস্টেম লেভেলে টেক্সট স্কেলিং কনফিগার করেন (যেমন iOS-এ ডায়নামিক টাইপ বা Android/ChromeOS-এ ফন্ট সাইজ স্কেলিং)। ডিফল্ট হিসেবে, মোবাইল ব্রাউজারগুলি এই OS-লেভেল অ্যাক্সেসিবিলিটি সেটিংস উপেক্ষা করে যাতে লিগ্যাসি, ফিক্সড-পিক্সেল ওয়েবসাইটগুলি দৃশ্যত ভেঙে না যায়।

আপনার পৃষ্ঠা স্ট্যাটিক রাখা বা কাস্টম, ভঙ্গুর জাভাস্ক্রিপ্ট লেআউট গণনার উপর নির্ভর করার পরিবর্তে, <meta name="text-scale"> ট্যাগ ব্যবহার করে নেটিভ অপারেটিং সিস্টেম টেক্সট স্কেলিং বেছে নিন। চালু থাকলে, ব্রাউজার ব্যবহারকারীর OS পছন্দ অনুযায়ী রুট ফন্ট সাইজ (1rem) ডাইনামিকভাবে স্কেল করে, যার ফলে সব সম্পর্কিত (rem/em) ফন্ট সাইজ, লেআউট ও স্পেসিং অটোমেটিক ও সুন্দরভাবে স্কেল করা যায়।

প্রয়োগ

১. OS টেক্সট স্কেলিংয়ে অপ্ট-ইন করুন

আপনার ডকুমেন্টের <head>-এর মধ্যে <meta name="text-scale"> এলিমেন্ট রাখুন। এটি কাজ করে এমন ব্রাউজারকে সিগন্যাল দেয় যে আপনার লেআউট আধুনিক, অ্যাডাপ্টিভ এবং স্কেল করার জন্য নিরাপদ:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  
  <!-- Opt this page into OS-level dynamic type and accessibility text scaling -->
  <meta name="text-scale" content="scale" />
  
  <title>Adaptive Accessibility Layout</title>
</head>

২. রিলেটিভ টাইপোগ্রাফি ও স্পেসিং ব্যবহার করা

নির্দিষ্ট পিক্সেলের (px) পরিবর্তে আপেক্ষিক ইউনিট (rem বা em) ব্যবহার করে ফন্ট সাইজ নির্দিষ্ট করুন। লাইনের উচ্চতার জন্য ইউনিটহীন মান ব্যবহার করুন যাতে সেগুলি প্রতিটি এলিমেন্টের গণনা করা ফন্ট সাইজের সাথে আনুপাতিকভাবে স্কেল করে।

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

body {
  font-family: system-ui, sans-serif;
  /* Inherits the root font-size, which scales automatically with the OS setting */
  line-height: 1.5;      /* Unitless so it scales proportionally with computed font-size */
  padding: 1.5rem;       /* Scales proportionally to prevent dense crowding at larger scales */
}

h1 {
  font-size: 2.25rem;    /* Scales proportionally to the root base */
  margin-bottom: 1rem;
}

ডিজাইনের জন্য যদি ইনহেরিট করা ব্রাউজার ডিফল্টের থেকে আলাদা সাইজের প্রয়োজন হয়, শুধুমাত্র তখনই body-এ বেস টেক্সট সাইজ সেট করুন; অন্যথায়, এটি ইনহেরিট করতে দিন। নির্দিষ্ট এলিমেন্টের সাইজ সেট করুন, যেমন হেডিং, rem বা em-এর মতো রিলেটিভ ইউনিট সহ। রুট ফন্ট সাইজের সাথে সম্পর্কিত সাইজের জন্য rem এবং পেরেন্ট এলিমেন্টের ফন্ট সাইজের উপর সাইজ নির্ভর করলে em ব্যবহার করুন। :root বা html-এ কাস্টম ফন্ট সাইজ সেট করবেন না।

ফ্লুইড টাইপোগ্রাফি

ফ্লুইড টাইপোগ্রাফি vw-এর মতো ভিউপোর্ট-রিলেটিভ ইউনিট ব্যবহার করতে পারে, তবে ফন্ট সাইজে rem বা em-এর মতো ফন্ট-রিলেটিভ কম্পোনেন্টও থাকতে হবে। কন্টেনার কোয়েরি ইউনিট ও clamp() সহ আরও ফ্লুইড-স্কেলিং টেকনিকের জন্য, ফ্লুইড স্কেলিং দেখুন।

শুধুমাত্র ভিউপোর্ট ইউনিটের মাধ্যমে টেক্সটের সাইজ নির্ধারণ করা এড়িয়ে চলুন:

/* ❌ DO NOT DO THIS: The font size does not respond fully to user text scaling */
.heading {
  font-size: 5vw;
}

পরিবর্তে, ভিউপোর্ট-রিলেটিভ স্কেলিংয়ের সাথে ফন্ট-রিলেটিভ ভ্যালু একত্রিত করুন এবং রিলেটিভ ন্যূনতম ও সর্বাধিক বাউন্ড ব্যবহার করুন:

.heading {
  font-size: clamp(2rem, 1.25rem + 2vw, 4rem);
}

টেক্সটের সাইজ পরিবর্তন করে ডিফল্ট সাইজের অন্তত ২০০% করা হলেও কন্টেন্ট বা কার্যকারিতা যাতে নষ্ট না হয় তা পরীক্ষা করে দেখুন। ফ্লুইড টাইপোগ্রাফির ক্ষেত্রে, একটি কার্যকর থাম্ব রুল হল, সর্বাধিক ফন্ট সাইজ ন্যূনতম ফন্ট সাইজের ২.৫ গুণের বেশি না রাখা। এছাড়াও, ৩২০ CSS-পিক্সেল ভিউপোর্ট প্রস্থে রিফ্লো পরীক্ষা করুন (১২৮০ CSS-পিক্সেল-চওড়া ভিউপোর্ট থেকে ৪০০% জুমের সমতুল্য); কন্টেন্ট অবশ্যই দ্বিমাত্রিক স্ক্রোলিং ছাড়াই উপলভ্য থাকতে হবে, যেখানে অপরিহার্য সেখানে ছাড়া।

৩. স্কেলেবল রেসপন্সিভ ব্রেকপয়েন্ট ব্যবহার করুন

রেসপন্সিভ ব্রেকপয়েন্ট কখনই ধরে নেবে না যে টেক্সট তার ডিফল্ট সাইজে থাকবে। যেখানে টেক্সটের জন্য উপলভ্য স্পেসে রেসপন্ড করার জন্য ব্রেকপয়েন্ট ব্যবহার করা হয়, সেখানে ফিক্সড পিক্সেল থ্রেশহোল্ডের পরিবর্তে কন্টেন্ট-চালিত লেআউট, কন্টেনার কোয়েরি বা em-ভিত্তিক মিডিয়া কোয়েরি ব্যবহার করুন।

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

৪. কন্টেন্ট র‍্যাপিং ও ফ্লেক্সিবল উচ্চতা নিশ্চিত করা

টেক্সট স্কেল আপ করা হলে, ট্রাঙ্কেশন বা ওভারল্যাপ এড়াতে এলিমেন্টের জন্য আরও উল্লম্ব এবং অনুভূমিক স্পেস প্রয়োজন। আপনার কম্পোনেন্টকে শক্তিশালী রাখতে, অনমনীয় স্থানাঙ্ক জোর করে ব্যবহার করার পরিবর্তে কন্টেন্টের চারপাশে ডাইনামিকভাবে প্রসারিত করার জন্য আপনার লেআউট ডিজাইন করুন:

• টেক্সট কন্টেনারকে বড় হতে দিন: টেক্সট-ধারণকারী কম্পোনেন্ট এবং কন্টেনারগুলিকে অবশ্যই স্কেল করা টেক্সটকে মানানসই করার জন্য বড় হতে হবে। ফিক্সড height বা block-size ভ্যালু এবং সীমাবদ্ধ max-height বা max-block-size ভ্যালু এড়িয়ে চলুন, কারণ এর ফলে ক্লিপিং বা ওভারফ্লো হতে পারে। কন্টেন্ট-চালিত সাইজিং পছন্দ করুন; শুধুমাত্র ন্যূনতম সাইজের প্রয়োজন হলে min-height বা min-block-size ব্যবহার করুন।
• ন্যাচারাল র‍্যাপিংয়ের অনুমতি দিন: বাক্য আছে এমন ব্লকে white-space: nowrap-এর মাধ্যমে ইনলাইন-অ্যাক্সিস টেক্সট র‍্যাপিং সীমাবদ্ধ করবেন না। টেক্সটকে স্বাভাবিকভাবে নতুন লাইনে রিফ্লো হতে দিন।
• ফ্লেক্সিবল ফ্লেক্সবক্স ও গ্রিড র‍্যাপিং ব্যবহার করা (ঐচ্ছিক উদাহরণ): মাল্টি-কলাম কার্ড গ্যালারির জন্য, repeat(auto-fit, minmax(min(100%, 16rem), 1fr))-এর মতো রিফ্লোয়িং কলাম ব্যবহার করুন যাতে আইটেমের আপেক্ষিক প্রস্থের থ্রেশহোল্ড পেরিয়ে গেলে সেগুলি উল্লম্বভাবে স্ট্যাক করা যায়:

/* Card container using min-height to ensure expansion and auto-fit to reflow if needed */
.card {
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* Use min-height so the box expands vertically when the font is enlarged */
  min-height: 10rem;
}

৫. রুট ফন্ট সাইজ ওভাররাইড করবেন না

<meta name="text-scale" content="scale"> এলিমেন্টের মাধ্যমে অপ্ট-ইন করার সময়, আপনার স্টাইলশিটে রুট font-size স্পষ্টভাবে সেট করবেন না। এর মধ্যে :root বা html-এর ঘোষণা অন্তর্ভুক্ত এবং এটি পরম ইউনিট, আপেক্ষিক ইউনিট এবং গণনা করা মানের ক্ষেত্রে প্রযোজ্য।

যেমন, নির্দিষ্ট ভ্যালু দিয়ে রুট ফন্ট সাইজ ওভাররাইড করবেন না:

/* ❌ DO NOT DO THIS: This can prevent the browser from applying text scaling */
html {
  font-size: 16px;
}

অপারেটিং সিস্টেম টেক্সট স্কেলিং ম্যানুয়ালি প্রয়োগ করতে <meta name="text-scale" content="scale"> অপ্ট-ইন env(preferred-text-scale)-এর সাথে একত্রিত করবেন না। ব্রাউজার মেটা অপ্ট-ইনের মাধ্যমে স্কেল প্রয়োগ করে, তাই দুটিই ব্যবহার করলে ডবল-স্কেলিং হতে পারে:

/* ❌ DO NOT DO THIS: The meta opt-in already applies the operating system text scale */
:root {
  font-size: calc(1rem * env(preferred-text-scale));
}

রুট ফন্টের সাইজ ব্রাউজারের উপর ছেড়ে দিন। ব্রাউজার অপারেটিং সিস্টেমের টেক্সট স্কেল অটোমেটিক ম্যানেজ করে এবং রুট ফন্ট সাইজের সাথে সম্পর্কিত কন্টেন্ট সাইজে এটি প্রয়োগ করে।

ফলব্যাক স্ট্র্যাটেজি

যেসব ব্রাউজারে <meta name="text-scale" content="scale"> কাজ করে না, সেখানে লেআউট ঠিকভাবে কাজ করে না। পৃষ্ঠাটি ব্রাউজারের স্ট্যান্ডার্ড ডিফল্ট বেস ফন্ট সাইজে (সাধারণত ১৬ পিক্সেল) লেআউট দেখাবে এবং ব্যবহারকারী এখনও স্ট্যান্ডার্ড ম্যানুয়াল পৃষ্ঠা জুম বা পিঞ্চ-টু-জুম বিকল্পগুলি ব্যবহার করতে পারবেন।