আন্তর্জাতিকীকরণ

ওয়ার্ল্ড ওয়াইড ওয়েব বিশ্বের প্রত্যেকের জন্য উপলব্ধ—এটি নামেই আছে! এর মানে হল যে আপনার ওয়েবসাইটটি সম্ভাব্যভাবে উপলব্ধ যে কেউ ইন্টারনেট অ্যাক্সেস করতে পারে, তারা যেখানেই থাকুক না কেন, তারা কোন ডিভাইস ব্যবহার করছে বা তারা কোন ভাষায় কথা বলছে।

প্রতিক্রিয়াশীল ডিজাইনের লক্ষ্য হল আপনার সামগ্রী সবার কাছে উপলব্ধ করা। মানব ভাষাতে একই দর্শন প্রয়োগ করা আন্তর্জাতিকীকরণের পিছনে চালিকা শক্তি—আন্তর্জাতিক দর্শকদের জন্য আপনার বিষয়বস্তু এবং ডিজাইন প্রস্তুত করা।

যৌক্তিক বৈশিষ্ট্য

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

আপনি যদি CSS লেখেন, আপনি হয়ত "বাম", "ডান", "শীর্ষ" এবং "নীচ" এর মত দিকনির্দেশক কীওয়ার্ড ব্যবহার করেছেন। এই কীওয়ার্ডগুলি ব্যবহারকারীর ডিভাইসের শারীরিক বিন্যাসকে নির্দেশ করে।

অন্যদিকে যৌক্তিক বৈশিষ্ট্যগুলি একটি বাক্সের প্রান্তগুলিকে উল্লেখ করে কারণ তারা বিষয়বস্তুর প্রবাহের সাথে সম্পর্কিত। লেখার মোড পরিবর্তন হলে, যৌক্তিক বৈশিষ্ট্য সহ লেখা CSS সেই অনুযায়ী আপডেট হবে। যে দিকনির্দেশক বৈশিষ্ট্য ক্ষেত্রে নয়.

যেখানে দিকনির্দেশক সম্পত্তি margin-left সর্বদা একটি বিষয়বস্তু বাক্সের বাম দিকের মার্জিনকে নির্দেশ করে, যৌক্তিক সম্পত্তি margin-inline-start একটি বাম-থেকে-ডান ভাষায় একটি বিষয়বস্তু বাক্সের বাম দিকের মার্জিনকে বোঝায়, এবং ডান-থেকে-বাম ভাষায় একটি বিষয়বস্তু বাক্সের ডানদিকে মার্জিন।

আপনার ডিজাইনগুলি বিভিন্ন লেখার মোডের সাথে খাপ খাইয়ে নেওয়ার জন্য, দিকনির্দেশক বৈশিষ্ট্যগুলি এড়িয়ে চলুন। পরিবর্তে লজিক্যাল বৈশিষ্ট্য ব্যবহার করুন.

করবেন না 
.byline {
  text-align: right;
}
করবেন
.byline {
  text-align: end;
}

যখন CSS-এর একটি নির্দিষ্ট দিকনির্দেশক মান থাকে যেমন left বা right , সেখানে একটি সংশ্লিষ্ট লজিক্যাল সম্পত্তি থাকে। যেখানে একসময় আমাদের margin-left ছিল এখন আমাদের margin-inline-start আছে।

ইংরেজির মতো একটি ভাষায় যেখানে পাঠ্য বাম থেকে ডানে প্রবাহিত হয়, inline-start "বাম" এর সাথে এবং inline-end "ডান" এর সাথে মিলে যায়।

একইভাবে, ইংরেজির মতো একটি ভাষায় যেখানে পাঠ্যটি উপরে থেকে নীচে লেখা হয়, block-start "টপ" এর সাথে এবং block-end "নিচে" এর সাথে মিলে যায়।

ল্যাটিন, হিব্রু এবং জাপানিগুলিকে একটি ডিভাইস ফ্রেমের মধ্যে স্থানধারক পাঠ্য রেন্ডারিং দেখানো হয়েছে। ব্লক এবং ইনলাইনের 2টি দিক সংযুক্ত করতে সাহায্য করার জন্য তীর এবং রং পাঠ্য অনুসরণ করে।

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

গ্রিড এবং ফ্লেক্সবক্সের মতো আধুনিক CSS লেআউট কৌশলগুলি ডিফল্টরূপে লজিক্যাল বৈশিষ্ট্য ব্যবহার করে। আপনি যদি left এবং top পরিবর্তে inline-start এবং block-start পরিপ্রেক্ষিতে চিন্তা করেন তবে আপনি এই আধুনিক কৌশলগুলি বুঝতে সহজ পাবেন।

একটি সাধারণ প্যাটার্ন নিন যেমন কিছু পাঠ্যের পাশে একটি আইকন বা একটি ফর্ম ক্ষেত্রের পাশে একটি লেবেল৷ "লেবেলের ডানদিকে একটি মার্জিন থাকা উচিত" চিন্তা করার পরিবর্তে "লেবেলের ইনলাইন অক্ষের শেষে একটি মার্জিন থাকা উচিত।"

করবেন না 
label {
  margin-right: 0.5em;
}
করবেন 
label {
  margin-inline-end: 0.5em;
}

যদি সেই পৃষ্ঠাটি ডান-থেকে-বাম ভাষায় অনুবাদ করা হয়, তবে শৈলীগুলি আপডেট করার প্রয়োজন হবে না। আপনি আপনার html এলিমেন্টে dir অ্যাট্রিবিউট ব্যবহার করে ডান-থেকে-বাম ভাষায় আপনার পৃষ্ঠাগুলি দেখার প্রভাব অনুকরণ করতে পারেন। ltr এর একটি মান মানে "বাম থেকে ডানে।" "rtl" এর একটি মান মানে "ডান থেকে বাম"।

আপনি যদি নথির দিকনির্দেশ (ব্লক অক্ষ) এবং লেখার মোড (ইনলাইন অক্ষ) এর সমস্ত স্থানান্তর নিয়ে পরীক্ষা করতে চান তবে এখানে একটি ইন্টারেক্টিভ প্রদর্শন রয়েছে।

পৃষ্ঠার ভাষা সনাক্ত করুন

html এলিমেন্টে lang অ্যাট্রিবিউট ব্যবহার করে আপনার পৃষ্ঠার ভাষা শনাক্ত করা একটি ভালো ধারণা।

<html lang="en">

এই উদাহরণটি ইংরেজিতে একটি পৃষ্ঠার জন্য। আপনি আরও নির্দিষ্ট হতে পারেন. এখানে আপনি কীভাবে ঘোষণা করেন যে একটি পৃষ্ঠা মার্কিন ইংরেজি ব্যবহার করছে:

<html lang="en-us">

আপনার নথির ভাষা ঘোষণা সার্চ ইঞ্জিনের জন্য দরকারী। এটি স্ক্রিন রিডার এবং ভয়েস সহকারীর মতো সহায়ক প্রযুক্তির জন্যও কার্যকর। ভাষা মেটাডেটা প্রদান করে আপনি এই ধরনের স্পিচ সিন্থেসাইজারদের আপনার বিষয়বস্তু সঠিকভাবে উচ্চারণ করতে সাহায্য করছেন।

lang এট্রিবিউট যেকোন HTML এলিমেন্টে যেতে পারে, শুধু html নয়। আপনি যদি আপনার ওয়েব পৃষ্ঠায় ভাষা পরিবর্তন করেন, তাহলে সেই পরিবর্তনটি নির্দেশ করুন৷ এই ক্ষেত্রে, একটি শব্দ জার্মান ভাষায়: 

<p>I felt some <span lang="de">schadenfreude</span>.</p>

একটি লিঙ্কড নথির ভাষা সনাক্ত করুন

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

<a href="/path/to/german/version" hreflang="de">German version</a>

আপনি যদি জার্মান সংস্করণের লিঙ্কটি বর্ণনা করতে জার্মান ভাষায় পাঠ্য ব্যবহার করেন, তাহলে hreflang এবং lang উভয়ই ব্যবহার করুন। এখানে, "ডয়েচে ভার্সন" পাঠ্যটিকে জার্মান ভাষায় চিহ্নিত করা হয়েছে, এবং গন্তব্য লিঙ্কটি জার্মান ভাষায় বলে চিহ্নিত করা হয়েছে:

<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>

এছাড়াও আপনি link এলিমেন্টে hreflang অ্যাট্রিবিউট ব্যবহার করতে পারেন। এটি আপনার নথির head যায়:

<link href="/path/to/german/version" rel="alternate" hreflang="de">

কিন্তু lang এট্রিবিউটের বিপরীতে, যেটি যেকোন এলিমেন্টে যেতে পারে, hreflang শুধুমাত্র a এবং link এলিমেন্টে প্রয়োগ করা যেতে পারে।

আপনার নকশা আন্তর্জাতিকীকরণ বিবেচনা করুন

আপনি যখন ওয়েবসাইট ডিজাইন করছেন যেগুলি অন্য ভাষায় অনুবাদ করা হবে এবং লেখার মোড, এই বিষয়গুলি সম্পর্কে চিন্তা করুন:

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

আন্তর্জাতিকভাবে চিন্তা করুন

lang এবং hreflang এর মতো বৈশিষ্ট্যগুলি আপনার HTML কে আন্তর্জাতিকীকরণের জন্য আরও অর্থবহ করে তোলে। একইভাবে, যৌক্তিক বৈশিষ্ট্যগুলি আপনার সিএসএসকে আরও অভিযোজিত করে তোলে।

আপনি যদি top , bottom , left এবং right পরিপ্রেক্ষিতে চিন্তা করতে অভ্যস্ত হন তবে এর পরিবর্তে block start , block end , inline start এবং inline end চিন্তা করা কঠিন হতে পারে। কিন্তু এটা মূল্য. যৌক্তিক বৈশিষ্ট্য সত্যিই প্রতিক্রিয়াশীল লেআউট তৈরির মূল চাবিকাঠি।

আপনার উপলব্ধি পরীক্ষা করুন

আন্তর্জাতিকীকরণ সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন।

ইংরেজিতে, একটি বাক্সের ভৌত right দিক, যৌক্তিকভাবে কোন দিক?

block-start
আবার চেষ্টা করুন! ইংরেজিতে এটি top
block-end
আবার চেষ্টা করুন! ইংরেজিতে এটি হল bottom
inline-start
আবার চেষ্টা করুন! ইংরেজিতে এই left আছে
inline-end
🎉

আন্তর্জাতিকীকরণের জন্য এটিকে আরও অর্থবহ করতে আপনার HTML-এ কোন বৈশিষ্ট্য যুক্ত করা উচিত?

english
আবার চেষ্টা করুন!
lang
🎉 এটি ব্রাউজারকে সংকেত দেয় যে নথিটি কোন ভাষায় রয়েছে, যা লেখার মোড, নথির দিকনির্দেশ এবং অনুবাদগুলি সেট করতে সহায়তা করে৷
language
আবার চেষ্টা করুন!
i18n
আবার চেষ্টা করুন!

এর পরে, আপনি শিখবেন কীভাবে পৃষ্ঠা-স্তরের লেআউটগুলিতে যেতে হয়, যা ম্যাক্রো লেআউট নামেও পরিচিত।