ওয়েব বিশ্বের সকলের জন্য উপলব্ধ—নামেই তা স্পষ্ট! এর মানে হলো, আপনার ওয়েবসাইটটি সম্ভাব্যভাবে এমন যেকোনো ব্যক্তির কাছে উপলব্ধ হতে পারে, যার ইন্টারনেটে প্রবেশাধিকার আছে; সে যেখানেই থাকুক না কেন, যে ডিভাইস ব্যবহার করুক না কেন, বা যে ভাষাতেই কথা বলুক না কেন।
রেসপন্সিভ ডিজাইনের লক্ষ্য হলো আপনার কন্টেন্টকে সকলের কাছে সহজলভ্য করা। মানব ভাষার ক্ষেত্রে সেই একই দর্শন প্রয়োগ করাই হলো আন্তর্জাতিকীকরণের চালিকাশক্তি—যা আপনার কন্টেন্ট ও ডিজাইনকে আন্তর্জাতিক দর্শকের জন্য প্রস্তুত করে।
যৌক্তিক বৈশিষ্ট্য
ইংরেজি বাম থেকে ডানে এবং উপর থেকে নিচে লেখা হয়, কিন্তু সব ভাষা এভাবে লেখা হয় না। আরবি এবং হিব্রুর মতো কিছু ভাষা ডান থেকে বামে পড়া হয়, এবং কিছু জাপানি টাইপফেস অনুভূমিকের পরিবর্তে উল্লম্বভাবে পড়া হয়। এই লেখার ধরণগুলোর সাথে সামঞ্জস্য রাখতে CSS-এ লজিক্যাল প্রোপার্টি চালু করা হয়েছিল।
আপনি যদি CSS লিখে থাকেন, তাহলে হয়তো 'left', 'right', 'top', এবং 'bottom'-এর মতো দিকনির্দেশক কীওয়ার্ড ব্যবহার করে থাকবেন। এই কীওয়ার্ডগুলো ব্যবহারকারীর ডিভাইসের ভৌত বিন্যাসকে নির্দেশ করে।
অন্যদিকে, লজিক্যাল প্রপার্টিগুলো একটি বক্সের প্রান্তগুলোকে নির্দেশ করে, যা কন্টেন্টের প্রবাহের সাথে সম্পর্কিত। যদি লেখার মোড পরিবর্তিত হয়, তাহলে লজিক্যাল প্রপার্টি ব্যবহার করে লেখা CSS সেই অনুযায়ী আপডেট হবে। ডিরেকশনাল প্রপার্টির ক্ষেত্রে এমনটা হয় না।
যেখানে ডিরেকশনাল প্রপার্টি margin-left সর্বদা একটি কন্টেন্ট বক্সের বাম দিকের মার্জিনকে বোঝায়, সেখানে লজিক্যাল প্রপার্টি margin-inline-start একটি বাম-থেকে-ডান ভাষার ক্ষেত্রে কন্টেন্ট বক্সের বাম দিকের মার্জিনকে এবং একটি ডান-থেকে-বাম ভাষার ক্ষেত্রে কন্টেন্ট বক্সের ডান দিকের মার্জিনকে বোঝায়।
আপনার ডিজাইনগুলো যাতে বিভিন্ন লিখন পদ্ধতির সাথে খাপ খাইয়ে নিতে পারে, সেজন্য দিকনির্দেশক বৈশিষ্ট্য পরিহার করুন। এর পরিবর্তে যৌক্তিক বৈশিষ্ট্য ব্যবহার করুন।
.byline { text-align: right; }
.byline { text-align: end; }
CSS-এ যখন left বা right মতো কোনো নির্দিষ্ট দিকনির্দেশক মান থাকে, তখন তার একটি অনুরূপ যৌক্তিক প্রপার্টিও থাকে। যেখানে আগে margin-left ছিল, এখন সেখানে margin-inline-start ও রয়েছে।
ইংরেজির মতো ভাষায়, যেখানে লেখা বাম থেকে ডানে প্রবাহিত হয়, সেখানে inline-start 'left' (বাম) এবং inline-end 'right' (ডান)-কে নির্দেশ করে।
একইভাবে, ইংরেজির মতো ভাষায় যেখানে লেখা উপর থেকে নিচে লেখা হয়, সেখানে block-start 'top' (উপরের অংশ) এবং block-end 'bottom' (নিচের অংশ)-এর সমতুল্য।
আপনি যদি আপনার 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 উভয়ই ব্যবহার করুন। এখানে, "Deutsche Version" লেখাটিকে জার্মান ভাষায় লেখা হিসেবে মার্কআপ করা হয়েছে, এবং গন্তব্য লিঙ্কটিও জার্মান ভাষায় লেখা হিসেবে মার্কআপ করা হয়েছে:
<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-কে আন্তর্জাতিকীকরণের জন্য আরও অর্থবহ করে তোলে। একইভাবে, লজিক্যাল প্রোপার্টিগুলো আপনার CSS-কে আরও অভিযোজনযোগ্য করে তোলে।
আপনি যদি top , bottom , left এবং right -এর পরিপ্রেক্ষিতে ভাবতে অভ্যস্ত হন, তবে এর পরিবর্তে block start , block end , inline start এবং inline end নিয়ে ভাবাটা কঠিন মনে হতে পারে। কিন্তু এটা চেষ্টা করে দেখা সার্থক। সত্যিকারের রেসপন্সিভ লেআউট তৈরি করার জন্য লজিক্যাল প্রোপার্টিগুলোই মূল চাবিকাঠি।
আপনার বোধগম্যতা যাচাই করুন
আন্তর্জাতিকীকরণ বিষয়ে আপনার জ্ঞান পরীক্ষা করুন।
ইংরেজিতে, একটি বাক্সের ভৌত right দিকটি, যৌক্তিকভাবে কোন দিক?
block-starttop ।block-endbottominline-startleftinline-endআন্তর্জাতিকীকরণের জন্য আপনার HTML-কে আরও অর্থবহ করে তুলতে কোন অ্যাট্রিবিউটটি যোগ করা উচিত?
englishlanglanguagei18nএরপরে, আপনি শিখবেন কীভাবে পৃষ্ঠা-স্তরের লেআউট তৈরি করতে হয়, যা ম্যাক্রো লেআউট নামেও পরিচিত।