HTML dir অ্যাট্রিবিউট

dir (direction) অ্যাট্রিবিউট একটি এলিমেন্টের ভিতরের টেক্সট কন্টেন্টের লিখনার দিক (text direction) নির্দেশ করে। এটি বিশেষত ডান-বাম (RTL) ভাষা (আরবি, হিব্রু, ফার্সি, উর্দু) এবং বাম-দান (LTR) ভাষা (বাংলা, ইংরেজি, হিন্দি) মিশ্রিত কন্টেন্টে গুরুত্বপূর্ণ।

সিনট্যাক্স

<element dir="ltr | rtl | auto">

মানসমূহ

মান	বিবরণ
ltr	Left-to-Right (বাম থেকে ডান) — বাংলা, ইংরেজি, হিন্দি ইত্যাদি
rtl	Right-to-Left (ডান থেকে বাম) — আরবি, হিব্রু, উর্দু, ফার্সি
auto	ব্রাউজার কন্টেন্ট বিশ্লেষণ করে দিক নির্ধারণ করবে (প্রথম স্ট্রং টাইপোগ্রাফিক্যালি ক্যারেক্টার অনুযায়ী)

উদাহরণ

<!DOCTYPE html>
<html>
<body>
  <h2>ডেমো হেডিং</h2>
  <p>এটি সাধারণ টেক্সট।</p>
  <p dir="rtl">এই টেক্সট ডান থেকে বাম দিকে প্রদর্শিত হবে।</p>
</body>
</html>

আউটপুট

HTML dir অ্যাট্রিবিউট

ব্যাখ্যা

প্রথম প্যারাগ্রাফ: ডিফল্ট LTR (বাম থেকে ডান)
দ্বিতীয় প্যারাগ্রাফ: dir="rtl" — ডান থেকে বাম (আরবি/উর্দুর মত)

গুরুত্বপূর্ণ নোটস

dir একটি গ্লোবাল অ্যাট্রিবিউট — যেকোনো এলিমেন্টে ব্যবহার করা যায়।
<html dir="rtl"> সেট করলে পুরো পেজ RTL হয়ে যায়।
CSS direction: rtl; সমান কাজ করে, কিন্তু dir অ্যাট্রিবিউট সেম্যান্টিক এবং CSS-ইনডিপেন্ডেন্ট।
<bdi> (Bi-Directional Isolation) ট্যাগ ব্যবহার করুন ইউজার-জেনারেটেড কন্টেন্টে (নাম, কমেন্ট) যাতে RTL/LTR মিশ্রণে লেআউট ভাঙে না।

CSS Logical Properties (আধুনিক)

RTL/LTR অগ্নিষ্ট লেআউটের জন্য ফিজিক্যাল প্রোপার্টি (left/right) বাদে লজিক্যাল প্রোপার্টি ব্যবহার করুন:

.box {
  margin-inline-start: 1rem;  /* LTR-এ left, RTL-এ right */
  margin-inline-end: 1rem;    /* LTR-এ right, RTL-এ left */
  padding-inline-start: 0.5rem;
  border-inline-start: 2px solid blue;
}