جلسه بیستم: تگ bdi در HTML | آموزش کامل و کاربردها

به دوره حرفه‌ای آموزش HTML در آوای وب خوش اومدی! تو این مقاله قراره تگ <bdi> رو که یه ابزار باحال برای جداسازی جهت متنه کامل یاد بگیری. این تگ بهت کمک می‌کنه تو سایتای چندزبانه از قاطی شدن متنات جلوگیری کنی و تجربه کاربرات رو بهتر کنی. از مثال‌های واقعی تا نکات سئو، همه‌چیز رو اینجا پوشش می‌دیم، بزن بریم!

🏷️ تگ bdi چیه و چرا مهمه؟

تگ <bdi> مخفف Bi-Directional Isolation هست و برای جدا کردن یه بخش از متن از جهت بقیه صفحه تو HTML استفاده می‌شه. بدون نیاز به تنظیم دستی، جهت طبیعی متن رو حفظ می‌کنه مثلاً یه اسم انگلیسی تو متن فارسی قاطی نمی‌شه. چرا مهمه؟ چون تو سایتای چندزبانه جلوی به‌هم‌ریختگی رو می‌گیره و هم کاربرات رو راضی نگه می‌داره، هم صفحه‌خوان‌ها درست کار می‌کنن!

🧱 نحوه استفاده از تگ bdi

تگ <bdi> به سادگی در HTML به صورت زیر استفاده می‌شه:

<p>این متن شامل یک <bdi>hello</bdi> است که به زبان انگلیسی است.</p>

در این مثال، کلمه “hello” که به زبان انگلیسیه، در داخل تگ <bdi> قرار گرفته تا به طور مستقل از جهت متن اصلی (که به زبان فارسیه) نمایش داده بشه. این اتگ از مشکلات مربوط به ترکیب زبان‌های چپ به راست و راست به چپ جلوگیری می‌کنه.

تگ <bdi> اتریبیوت خاصی نداره. عملکرد اصلی اون، ایجاد جداسازی در جهت‌گیری متنه. این تگ از نظر ظاهری یا رفتاری هیچ تأثیری تو متن نداره، بلکه صرفاً به مرورگر و ابزارهای نمایش کمک می‌کنه که متن را به درستی و با توجه به جهت مورد نظر نمایش بده.

💡 تفاوت bdi و bdo چیه؟

تگ <bdo> و <bdi> هر دو برای مدیریت جهت متن تو HTML هستن، ولی کارشون فرق داره. <bdo> جهت متن رو دستی عوض می‌کنه یعنی تو بهش می‌گی از راست به چپ باشه یا چپ به راست، و اونم دقیقاً همون کارو می‌کنه. اما <bdi> متن رو از جهت بقیه صفحه جدا می‌کنه و می‌ذاره خودش جهت درستش رو پیدا کنه بدون اینکه چیزی رو زوری عوض کنی.

📌 مثال عملی:

فرض کن یه سایت داری که کاربرا نظر می‌ذارن. یه کاربر فارسی‌زبون به اسم “Ali” نظرشو می‌نویسه: “سایتت عالیه”، ولی یه کاربر انگلیسی‌زبون به اسم “John” می‌نویسه: “Cool site”. تو می‌خوای این نظرات تو یه لیست کنار هم درست نمایش داده بشن.

• با <bdo>: اگه از <bdo dir="ltr"> برای اسم “Ali” استفاده کنی، می‌شه “ilA” چون جهتشو زوری برعکس کردی و به‌هم‌ریخته!
• با <bdi>: اگه از <bdi> برای اسم “John” تو متن فارسی استفاده کنی، “John” همون‌جوری از چپ به راست می‌مونه و قاطی متن فارسی نمی‌شه مرتب و تمیز!

📌 مثال تو یه جمله:

<p> گفت سایتت عالیه <bdi>John</bdi></p>

✏️ نتیجه میشه: “John گفت سایتت عالیه”

<bdo>: برای وقتیه که می‌خوای جهت رو عمداً عوض کنی (مثل برعکس کردن یه کلمه)، ولی <bdi> برای وقتیه که فقط می‌خوای متن چندزبانه درست نمایش داده بشه!

<p>گفت سایتت عالیه <bdo dir="rtl">Ali</bdo></p>

✏️ نتیجه می‌شه: “ilA گفت سایتت عالیه”

🧪 پروژه عملی

تو سایتت یه بخش «نظرات کاربران» یا «بازخورد مشتریان» بساز که شامل اسم و پیام کاربرا باشه. حالا فرض کن کاربرا از کشورهای مختلف هستن و اسماشون ممکنه انگلیسی یا عربی یا هر زبان دیگه‌ای باشه.

حالا بیا از تگ <bdi> برای نمایش اسم کاربرا استفاده کن تا جهت نوشتار اسمشون قاطی متن فارسی نشه و همه‌چیز مرتب باشه.

🏁 نتیجه‌گیری

تگ <bdi> یه ابزار ساده اما قدرتمنده که تو سایتای چندزبانه متنات رو مرتب و خوانا نگه می‌داره. با استفاده درست ازش، هم کاربرات رو خوشحال می‌کنی، هم تو سئو می‌درخشی. یادت نره اگه مبتدی هستی کد هات رو تو  W3C Validator می‌تونی چک کنی و ببینی درست نوشتی یا نه.

💬 ایده‌هات رو فریاد بزن!

نظرت راجع به تگ <bdi> چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سؤالی داری؟ تو بخش نظرات برامون بنویس، تیم حرفه‌ای آوای وب با جون و دل جوابت رو می‌ده!

شهرام نجفی

همیشه آرزو داشتم که هنگام جستجوی اطلاعات، به سراغ یک منبع جامع و به روز برم، اما اینکه چنین منابعی را بیابم همیشه چالش بوده است. برای همین ایده راه اندازی سایت آوای وب به ذهنم رسید و الان در خدمت شما هستم.