CSS যৌক্তিক বৈশিষ্ট্যগুলি কী এবং আন্তর্জাতিকীকরণের জন্য সেগুলি কেন গুরুত্বপূর্ণ?

Question

Accepted Answer

**যৌক্তিক বৈশিষ্ট্যগুলি** লেআউটটিকে **সামগ্রীর প্রবাহ দিক** (শুরু/শেষ, ইনলাইন/ব্লক) এর পরিপ্রেক্ষিতে বর্ণনা করে, শারীরিক দিকগুলি (বাম/ডান/উপরে/নিচে) এর পরিবর্তে। এটি একটি একক স্টাইলশীটকে স্বয়ংক্রিয়ভাবে ডান থেকে বাম দিকে লেখা (আরবি, হিব্রু) বা উপরে থেকে নিচে দিকে লেখা ভাষায় মানিয়ে নিতে দেয়। ## শারীরিক বনাম যৌক্তিক ```css /* ❌ physical — hard-codes "left", breaks in RTL languages */ .card { margin-left: 1rem; padding-right: 2rem; text-align: left; border-left: 2px solid; } /* ✅ logical — follows the writing direction */ .card { margin-inline-start: 1rem; /* "start" = left in LTR, RIGHT in RTL */ padding-inline-end: 2rem; text-align: start; border-inline-start: 2px solid; } ``` ## দুটি অক্ষ - **ইনলাইন** — যে দিকে পাঠ্য প্রবাহিত হয় (ইংরেজিতে অনুভূমিক; "পাঠ" অক্ষ)। - **ব্লক** — যে দিকে লাইনগুলি সাজানো হয় (ইংরেজিতে উল্লম্ব; "অনুচ্ছেদ" অক্ষ)। ```css margin-inline: 1rem; /* left + right in LTR (both inline sides) */ margin-block: 2rem; /* top + bottom */ margin-inline-start: 1rem; /* the "start" inline edge (left LTR / right RTL) */ padding-block-end: 1rem; /* bottom in horizontal writing */ inset-inline-start: 0; /* logical version of left/right for positioning */ ``` ## i18n এর জন্য এটি কেন গুরুত্বপূর্ণ শারীরিক বৈশিষ্ট্যগুলির সাথে, আরবি সমর্থন মানে `[dir="rtl"]` এর পেছনে মিরর করা শৈলীগুলির একটি সম্পূর্ণ দ্বিতীয় সেট লেখা (`margin-left` → `margin-right`, ইত্যাদি)। যৌক্তিক বৈশিষ্ট্যগুলির সাথে, **একই CSS শুধুমাত্র কাজ করে** — html উপর `dir="rtl"` সেট করুন এবং `margin-inline-start` স্বয়ংক্রিয়ভাবে ডান দিকে ফ্লিপ হয়: ```html ``` ## RTL এর বাইরে যৌক্তিক বৈশিষ্ট্যগুলি উল্লম্ব লেখার মোড (যেমন কিছু পূর্ব এশীয় টাইপসেটিং) পরিচালনা করে এবং দিক নির্বিশেষে কেন্দ্রীভূত করার জন্য `margin-inline: auto` একটি পরিষ্কার উপায় করে তোলে। ## এটি কেন গুরুত্বপূর্ণ যেকোনো পণ্যের জন্য যা একাধিক ভাষায় চালু হয়, যৌক্তিক বৈশিষ্ট্যগুলি মিরর করা RTL স্টাইলশীট বজায় রাখার প্রয়োজনীয়তা দূর করে — নিয়মগুলির একটি সেট লেখার দিকের সাথে খাপ খায়। এমনকি শুধুমাত্র LTR সাইটের জন্যও সেগুলি একটি পরিষ্কার মানসিক মডেল (শুরু/শেষ, ইনলাইন/ব্লক), এবং সেগুলি আধুনিক CSS এ ক্রমবর্ধমান সুপারিশকৃত ডিফল্ট।