تگ bdo در HTML

آشنایی کامل با تگ bdo و bdi

آشنایی با تگ bdo
آشنایی با تگ bdo

تگ bdo چیست ؟‌ در چه مواردی از تگ <bdo> استفاده می‌ شود؟ منظور از تغییر پیش فرض جهت متن چیست؟ برای نمایش پاراگراف متن انگلیسی در وب سایت های فارسی از چه تگی استفاده می‌کنیم؟ در این مقاله به صورت کامل با تگ <bdo> آشنا می‌ شویم.

تگ bdo

bdo مخفف (سرنام) واژگان Bi-Directional Override بحساب می آید. تگ bdo برای تغییر پیش فرض جهت متن استفاده می شود. مهم ترین نمونه رایج استفاده از این تگ در وبسایت های فارسی زبان برای نمایش یک پاراگراف متن انگلیسی در سمت چپ است.

نحوه نوشتار

برای استفاده از این تگ، باید از خاصیت dir استفاده کنیم که خود، می‌تواند دو مقدار را قبول کند:

  • rtl: جهت نوشتار را از راست به چپ تنظیم می‌کند. (مانند فارسی و عربی)
  • ltr: جهت نوشتار را از چپ به راست تنظیم می‌کند. (مانند انگلیسی)
<bdo dir="جهت مورد نظر">...</bdo>

به جای … ، متن مورد نظر خود را می‌نویسیم و به جای dir جهت مورد نظرمان را با استفاده از دو ویژگی rtl و ltr مشخص می‌کنیم.

مثال :

<p> This is the Left to Right text </p>

<p> <bdo dir="rtl"> This is the left to right text </bdo></p>
نمونه کد bdo
نمونه کد bdo

نتیجه کد، به صورت زیر خواهد بود:

نتیجه مثال تگ bdo
نتیجه مثال تگ bdo

همانطور که مشاهده می شود، توسط تگ <bdo> و خاصیت dir که مخفف direction‌ می باشد، توانستیم جهت متن را تغییر دهیم.

توجه کنید که تگ bdo، تاثیری بر محتوای خود از نظر نحوه نمایش (inline و block) بودن ندارد و تنها کاربرد آن، تغییر دادن جهت متن می‌باشد.

خواص عمومی

این تگ همه خواص عمومی مربوط به تگ های HTML را پشتیبانی می‌کند.

<bdo dir="rtl" class="mizfa">Hello Mizfa</bdo>

برای مثال در نمونه بالا از خاصیت class برای تگ bdo استفاده شده است، شما می‌توانید اطلاعات بیشتری در رابطه با خاصیت class و خاصیت های عمومی در مقالات ما بخوانید.

موارد مصرف تگ bdo

این تگ باعث می‌شود، هنگامی که ما در وسط محتوای چپ چین بخواهیم از محتوای راست چین استفاده کنیم، نگران این نباشیم که ممکن است، متن ما با مشکل رو به رو شود و محتوای راست چین برعکس نمایش داده شود.

در این موارد با استفاده از تگ bdo برای محتوای راست چین و قرار دادن خاصیت dir=”rtl” می‌توانیم مطمئن باشیم که بهم ریختگی در متن صورت نخواهد گرفت.

از زمانی که تگ bdi در HTML5 معرفی شد، استفاده از تگ bdo خیلی کمتر شده و در حال حاضر بیشتر از این تگ استفاده می‌شود.

آشنایی با تگ bdi

گاهی پیش میاد که در صفحاتمون بخواهیم درون محتوای انگلیسیمون از محتوای فارسی استفاده کنیم ، به نمونه زیر توجه کنید :

میزفا bdi
میزفا bdi

همانطور که مشاهده می‌کنید، این متن چپ چین هست و یه دفعه وسط متن چپ چین ، کلمه ساعت که راست چین هست اومده و متن را خراب کرده. نمونه کد بالا به شکل زیره :

<p>Mizfa ساعت : 22 poster a picture</p>

برای اینکه متن به درستی نمایش داده شود، از تگ bdi درون متن استفاده می‌کنیم و متن فارسی یا راست چین را درون آن قرار می‌دهیم، دقیقا به شکل زیر :

<p>Mizfa <bdi>ساعت</bdi> : 22 poster a picture</p>

نتیجه کد بالا باعث اصلاح متن ما می‌شود و خروجی به شکل زیر می‌شود :

میزفا bdi
میزفا bdi

پشتیبانی

این تگ، در تمامی مرورگر ها، از جمله chrome، safari، Firefox و microsoft edge پشتیبانی می‌شود.

پشتیبانی مرورگر ها از تگ bdo
پشتیبانی مرورگر ها از تگ bdo

پایانترم

[box type=”info” class=”question-from-users” width=””]

سوال:

خیلی خلاصه مطلبی که از این مقاله متوجه شدین را بیان کنید.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

  • از تگ bdo، برای تغییر جهت متن استفاده می شود.
  • خاصیت dir در تگ <bdo>، می تواند دو مقدار rtl و ltr را قبول کند.
  • این تگ تمام خواص عمومی دیگر نظیر style را پشتیبانی می کند.
  • تگ مورد نظر از سمت تمامی مرورگر ها، چه در دسکتاپ و چه در موبایل، پشتیبانی می‌شود.

این مقاله نیز به اتمام رسید، اگر سوالی داشتید حتما در بخش نظرات مطرح کنید و من قول میدم که در اولین فرصت جوابتون رو بدم. تا مقاله بعدی و فصل بعدی فعلا…

به روز رسانی : ۲۲ شهریور ۱۳۹۹ با همکاری و تعامل کاربران در دیدگاه های میزفا

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

21 نظر

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر