این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ bdi در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ bdi در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ bdi در HTML
تگ bdi که مخفف ( Bi-Directional Isolation ) می باشد، در لغت به معنی جداسازی دوطرفه یا ( دو جهته ) ، تگی است برای جهت بندی محتوا در یک صفحه وب.
خب حالا یعنی چی جداسازی دوطرفه یا دو جهته؟! این یعنی اینکه ما بتونیم یک متن رو که جهتش متفاوت با بقیه متن ها می باشد را بتوانیم به راحتی در یک صفحه ی وب قرار دهیم.
مثال : شاید تا الان برای یکبارم که شده یک متن (جمله) فارسی را تایپ کرده اید و در بین این متن از یک یا چندین کلمه انگلیسی استفاده کرده اید! خب در خروجی اون جمله چگونه نمایش داده خواهد شد؟
خب چرا اینجوری میشه؟ دلیلش چیه بنظره شما؟ دلیلش اینه که زبان انگلیسی جهت متنش از چپ به راست (LTR) می باشد ولی زبانی همچون زبان فارسی جهت متنش از راست به چپ می باشد (RTL)
بنابراین تگ bdi میاد و این مشکل رو حل میکنه ، کافیه وقتی میخواید از یک متن انگلیسی در یک متن فارسی استفاده نمایید بیاید و اون متن انگلیسی رو در بین تگ bdi قرار بدهید فقط همین.
Free-Learn
مثال از تگ bdi در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ bdi
|
1 2 3 4 5 |
<body> <p>سلام خوبی؟ من <bdi>Sadegh</bdi> هستم</p> </body> |
مثال شماره ۲ : استفاده از صفت dir برای مشخص کردن جهت متن صفحه ( دیگه اصلا نیاز نیست از تگ bdi استفاده کنید )
|
1 2 3 4 5 |
<body dir="rtl"> <p>سلام خوبی؟ من Sadegh هستم</p> </body> |
مثال شماره ۳ : استفاده از ویژگی direction در CSS
|
1 2 3 4 5 6 7 |
<style> body{ direction:rtl; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ bdi در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ bdi از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- برای مشخص کردن جهت متن کل صفحه همیشه سعی کنید یا از صفت dir یاهم از ویژگی direction در CSS استفاده کنید.
