تگ bdi در HTML
به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ bdi در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.
فهرست مطالب
زبان نوشتاری ما زبان فارسی است و همان طور که می دانید جهت نوشتن این زبان از راست به چپ (Right To Left) می باشد و برای مثال زبان انگلیسی چپ به راست (Left To Right) نوشته می شود. حال اگر درون متن فارسی خود بخواهید از چند کلمه انگلیسی استفاده کنید به احتمال زیاد چینش متن دچار مشکل می شود و تا حدودی خواندن متن را دشوار می کند. در حالت کلی برای رفع این مشکل در طراحی قالب توسط css جهت کلی متن (Direction) را تعیین می کنیم و یا توسط صفت dir جهت متن را تغییر می دهیم.
فرض کنید می خواهید جمله ترکیبی فارسی و انگلیسی «به سایت CodeUni خوش آمدید.» را با استفاده از تگ p نمایش دهید. ابتدا کلمه مورد نظر را درون تگی مانند span قرار می دهیم و با استفاده صفت dir جهت کلمه یا متن را تغییر می دهیم.
کد:
<p>به سایت <span dir="ltr">CodeUni</span> خوش آمدید.</p>خوشبختانه در HTML تگی وجود دارد به نام bdi که این مشکل را برطرف می کند.
تگ bdi چیست؟
تگ bdi که مخفف Be-Directional Isolation می باشد برای جهت بندی متن به کار می رود. با استفاده از این تگ می توانید متن هایی با زبان و جهت های مختلف را در کنار هم قرار دهید تا چینش متن دچار مشکل نشود.
این تگ با <bdi> شروع شده و با </bdi> بسته می شود.
<bdi></bdi>مثال تگ bdi
کد:
<p>من <bdi>CodeUni</bdi> هستم</p>در مثال بالا از تگ <bdi> برای کلمه CodeUni استفاده شده است. فرض کنید به جای آن از تگ <span> استفاده می کردیم. نتیجه به چه شکل می شد؟
<p>من <span>CodeUni</span> هستم</p>سازگاری با مرورگرها
تگ bdi با مرورگرهای زیر سازگار است:
- گوگل کروم نسخه 16 و بالاتر
- فایرفاکس نسخه 10 و بالاتر
- اج نسخه 79 و بالاتر
- اپرا نسخه 15 و بالاتر
- سافاری نسخه 6 و بالاتر
- گوگل کروم اندروید نسخه 18 و بالاتر
- فایرفاکس اندروید نسخه 10 و بالاتر
- اپرا اندروید نسخه 14 و بالاتر
- سافاری iOS نسخه 6 و بالاتر