آموزش طراحی سایتآموزش HTML

تگ bdo در HTML

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

تگ 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

نتیجه گیری

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

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

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

برچسب ها

علی اسماعیلی

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

نوشته های مشابه

‫13 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

  1. سلام.در این صفحه وب تون در آن بخش سر فصل های پست از چه تگی استفاده کردید که وقتی روی سر فصل ها کلیک می کنیم به بخش دلخواه می رویم.لطفا پاسخ دهید.

    1. سلام مهدی، کافیه هر المنت یا تگی رو بهش id بدید و یک جایی از صفحه با استفاده از a href اون آی دی رو لینکدهی کنید. مثلا این شکلی:

      <div id="personalid">Mizfa</div>
      
      <a href="#personalid"> Boro be mizfa</a>
      1. خیلی ممنون از راهنماییتون فقط یک سوال دیگری که داشتم این بود که من از تگی که فرستادید در تگ p استفاده کردم و وقتی در style تگ p دستورات را دادم،آنطوری که باید
        عمل نکرد.

        1. سلام مجدد مهدی عزیز، کد هات رو پیش نمایش بزار ببینم چه کردی.

      2. خیلی ممنون از راهنمایی تون.فقط یک سوال دیگر هم داشتم و این بود که از همان تگی که فرستادید در تگ p استفاده کردم و وقتی در style تگ p دستورات مثل رنگ پس زمینه و … وارد کردم،آنطور که باید عمل نکرد.
        فایلش هم پایین گذاشتم.

        1. سلام مجدد مهدی عزیز، شما می‌بایست برای هر تگ p یک آی دی اختصاصی مشخص کنید. دقیقا تفاوت id و class توی این هست که می‌تونید از class ها در چند تگ استفاده کنید ولی از id ها بهتره فقط روی یک تگ استفاده کنید تا به مشکلی نخورید. برای مثال الان شما این id رو که مشخص کردید صفحه از کجا متوجه بشه منظور شما کدوم یکی از تگهای p هست. می‌تونید مثلا اینطوری کنید که عدد گذاری کنید از personalid1 تا personalid4 و توی لینک دهی هم این را رعایت کنید.

  2. سلام
    وقتی می تونیم خود dir را تو تگی مثل قرار بدیم چه نیازی به استفاده از bdo هست؟

    1. سلام حمیدرضا، ببین داخل تگ های دیگه جهت متن رو مشخص میکنه مثلا از چپ به راست منتقلش میکنه ولی در تگ bdo کلا متن رو برعکس میکنه مثلا کلمه hello رو مینویسه olleh. اینطوری…

      1. سلام
        خب که چی بشه؟؟؟ کاربرش چیه ؟
        همه فقط میگن برعکس میشه نوشته!!!!!
        چرا گفته میشه برای زبان های راست به چپ کاربرد داره؟؟؟
        کاربرد واقعی مثال بزنید لطفا (اگه متوجه کاربردش شدید)

        1. سلام جعفر ، ببین در حال حاضر واقعا این تگ دیگه استفاده ای نمیشه چون همه میدونیم که یک div و یک dir=”rtl” کارمون رو تو زبان های راست چین راه میندازه ولی گاهی ممکنه واقعا با یک اشکال غیر قابل پیش بینی رو به رو بشی که زبان های فارسی و عربی داخل یک CMS یا یک زبانی پشتیبانی نشن و برای اینکه سره هم بنویسیمشون از تگ bdo استفاده کنیم. حقیقتا از سال ۲۰۱۳ تا امروز که سال ۲۰۲۰ هست ندیدم همچین چیزی رو که به این تگ نیاز باشه، شاید یک در میلیارد ها میلیارد همچین مشکلی پیش اومد و تو با دونستن تگ bdo مشکل رو حل کردی :). امیدوارم بالاخره به جواب رسیده باشی.

          1. و یه نکته مهم دیگه اینکه این عناصر bdo و bdi عناصر هستند که معنا و مفهوم دارند و مثلا برای screen reader ها هم کاربرد دارند . شاید بتونیم کار خودمون رو با عنصر دیگه ای مثل span و صفت dir اون راه بندازیم اما مفهموم و معنای کار رو از بین بردیم.

            1
        2. سلام به همه دوستان
          ببینید این تگ امروزه زیاد کاربردی نداره اما موارد استفاده اش اینه که اگر شما دارید توی یک زبان مثلا “چپ به راست” مثل انگلیسی محتوا مینویسید و توی نوشته خود به یک کلمه یا عبارتی به زبانهای “راست به چپ” مثل فارسی، عربی، اردو، عبری رسیدید بهتر هست که اون کلمه یا عبارت رو توی عنصر bdo قرار بدید و صفت dir اون (که اجباری هست مشخص کردنش) رو روی rtl ست کنید اینطوری خیالتون راحت خواهد شد که در هر شرایطی (انکدینگ ها، سیستم عامل ها، مرورگرها) کاراکتر های اون کلمه یا عبارت، به درستی از سمت “راست به چپ” نمایش داده خواهد شد و برعکس نشون داده نمیشه. برعکس مثل چی؟ مثلا کلمه “علیرضا” بشه “اضریلع”.
          البته یک عنصر جدید به اسم bdi توی نسخه 5 html معرفی شده که می تونه کاربردی تر باشه.
          امیدوارم توضیحاتم رو واضح و روشن بیان کرده باشم.
          موفق باشید

          1
          1. سلام. ممنونیم از اینکه تجربه خودتون به اشتراک گذاشتید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
Share via
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

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