تگ 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> و خاصیت 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
گاهی پیش میاد که در صفحاتمون بخواهیم درون محتوای انگلیسیمون از محتوای فارسی استفاده کنیم ، به نمونه زیر توجه کنید :
همانطور که مشاهده می‌کنید، این متن چپ چین هست و یه دفعه وسط متن چپ چین ، کلمه ساعت که راست چین هست اومده و متن را خراب کرده. نمونه کد بالا به شکل زیره :
<p>Mizfa ساعت : 22 poster a picture</p>
برای اینکه متن به درستی نمایش داده شود، از تگ bdi درون متن استفاده میکنیم و متن فارسی یا راست چین را درون آن قرار می‌دهیم، دقیقا به شکل زیر :
<p>Mizfa <bdi>ساعت</bdi> : 22 poster a picture</p>
نتیجه کد بالا باعث اصلاح متن ما می‌شود و خروجی به شکل زیر می‌شود :
پشتیبانی
این تگ، در تمامی مرورگر ها، از جمله chrome، safari، Firefox و microsoft edge پشتیبانی می‌شود.
پایانترم
[box type=”info” class=”question-from-users” width=””]سوال:
خیلی خلاصه مطلبی که از این مقاله متوجه شدین را بیان کنید.
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
- از تگ bdo، برای تغییر جهت متن استفاده می شود.
- خاصیت dir در تگ <bdo>، می تواند دو مقدار rtl و ltr را قبول کند.
- این تگ تمام خواص عمومی دیگر نظیر style را پشتیبانی می کند.
- تگ مورد نظر از سمت تمامی مرورگر ها، چه در دسکتاپ و چه در موبایل، پشتیبانی می‌شود.
این مقاله نیز به اتمام رسید، اگر سوالی داشتید حتما در بخش نظرات مطرح کنید و من قول میدم که در اولین فرصت جوابتون رو بدم. تا مقاله بعدی و فصل بعدی فعلا…
به روز رسانی : ۲۲ شهریور ۱۳۹۹ با همکاری و تعامل کاربران در دیدگاه های میزفا
21 پاسخ
یه سوال دارم bdi همون کار bdo رو میکنه دیگه؟!!
سلام نه فرهان عملکردشون کاملا متفاوته.
تگ bdo میاد متنی مثل malas رو برعکس میکنه و مینویسه : salam
درحالی که bdi میاد و متن ها رو جایگاهشون رو تغییر میده. به مثال داخل مقاله توجه کن.
به جای ساعت : ۲۲ ، اومده نوشته ۲۲ : ساعت که کاربر وقتی داره از چپ به راست متن رو میخونه درسته بخونه.
در حالت اول کاربر اینطوری میخونه :
میزفا ۲۲ : ساعت یک تصویر منتشر کرد.
در حالی که ما میخوایم این شکلی توی ذهنش خونده بشه:
میزفا ساعت : ۲۲ یک تصویر منتشر کرد.
برای اینکه اینطور نمایش داده بشه محتوامون، از تگ bdi استفاده میکنیم.
این تگ جهت کلمات رو تفییر میده اما ما میتونیم با اضاف کردن صفت dir دیگه نگران بدریخت شدن متنمون زمانی که از دو زبان متفاوت مثل انگلیسیو فارسی یا پرتغالی و عربی که جهت نوشتنشون فرق میکنه نباشیم و متن درست نشون داده بشه! یه جورایی کار علامت q» یا «q توی ورد رو انجام میده اونجا هم وقتی که از اینو آیکون های اَلاین استفاده میکنیم متنمون درست نمایش داده میشه!
سلام فرهان. ممنون از توضیحاتت. البته این تگ بیشتر کار فارسی نویس ها رو انجام میده که بهم ریختگی ها رو درست میکنه ولی توضیحاتت درسته.
تگ bdo جهت حروف نوشته شده را عوض میکند
و dir هم صفت bdo هست که دارای دو مقدار rlt tlr هست
تگ bdi هم اگر بخواهیم درون محتوای انگلیسیمون از محتوای فارسی استفاده میکنیم
ممنون علی اکبر، پاسخت درسته ?
پاسخ سوال :
پشتیبانی از تمام خواص عمومی
bdo، برای تغییر جهت متن
برای استفاده از تگ bdo باید از تگ dir استفاده کنیم
dir در تگ ، می تواند دو مقدار rtl و ltr باشد
محمد عزیز سلام، ممنون از جوابت و هدیه‌ات را برای پاسخگویی به این سوال دریافت کردی.
سلام.در این صفحه وب تون در آن بخش سر فصل های پست از چه تگی استفاده کردید که وقتی روی سر فصل ها کلیک می کنیم به بخش دلخواه می رویم.لطفا پاسخ دهید.
سلام مهدی، کافیه هر المنت یا تگی رو بهش id بدید و یک جایی از صفحه با استفاده از a href اون آی دی رو لینکدهی کنید. مثلا این شکلی:
خیلی ممنون از راهنماییتون فقط یک سوال دیگری که داشتم این بود که من از تگی که فرستادید در تگ p استفاده کردم و وقتی در style تگ p دستورات را دادم،آنطوری که باید
عمل نکرد.
سلام مجدد مهدی عزیز، کد هات رو پیش نمایش بزار ببینم چه کردی.
خیلی ممنون از راهنمایی تون.فقط یک سوال دیگر هم داشتم و این بود که از همان تگی که فرستادید در تگ p استفاده کردم و وقتی در style تگ p دستورات مثل رنگ پس زمینه و … وارد کردم،آنطور که باید عمل نکرد.
فایلش هم پایین گذاشتم.
سلام مجدد مهدی عزیز، شما می‌بایست برای هر تگ p یک آی دی اختصاصی مشخص کنید. دقیقا تفاوت id و class توی این هست که می‌تونید از class ها در چند تگ استفاده کنید ولی از id ها بهتره فقط روی یک تگ استفاده کنید تا به مشکلی نخورید. برای مثال الان شما این id رو که مشخص کردید صفحه از کجا متوجه بشه منظور شما کدوم یکی از تگهای p هست. می‌تونید مثلا اینطوری کنید که عدد گذاری کنید از personalid1 تا personalid4 و توی لینک دهی هم این را رعایت کنید.
سلام
وقتی می تونیم خود dir را تو تگی مثل قرار بدیم چه نیازی به استفاده از bdo هست؟
سلام حمیدرضا، ببین داخل تگ های دیگه جهت متن رو مشخص میکنه مثلا از چپ به راست منتقلش میکنه ولی در تگ bdo کلا متن رو برعکس میکنه مثلا کلمه hello رو مینویسه olleh. اینطوری…
سلام
خب که چی بشه؟؟؟ کاربرش چیه ؟
همه فقط میگن برعکس میشه نوشته!!!!!
چرا گفته میشه برای زبان های راست به چپ کاربرد داره؟؟؟
کاربرد واقعی مثال بزنید لطفا (اگه متوجه کاربردش شدید)
سلام جعفر ، ببین در حال حاضر واقعا این تگ دیگه استفاده ای نمیشه چون همه میدونیم که یک div و یک dir=”rtl” کارمون رو تو زبان های راست چین راه میندازه ولی گاهی ممکنه واقعا با یک اشکال غیر قابل پیش بینی رو به رو بشی که زبان های فارسی و عربی داخل یک CMS یا یک زبانی پشتیبانی نشن و برای اینکه سره هم بنویسیمشون از تگ bdo استفاده کنیم. حقیقتا از سال ۲۰۱۳ تا امروز که سال ۲۰۲۰ هست ندیدم همچین چیزی رو که به این تگ نیاز باشه، شاید یک در میلیارد ها میلیارد همچین مشکلی پیش اومد و تو با دونستن تگ bdo مشکل رو حل کردی :). امیدوارم بالاخره به جواب رسیده باشی.
و یه نکته مهم دیگه اینکه این عناصر bdo و bdi عناصر هستند که معنا و مفهوم دارند و مثلا برای screen reader ها هم کاربرد دارند . شاید بتونیم کار خودمون رو با عنصر دیگه ای مثل span و صفت dir اون راه بندازیم اما مفهموم و معنای کار رو از بین بردیم.
سلام به همه دوستان
ببینید این تگ امروزه زیاد کاربردی نداره اما موارد استفاده اش اینه که اگر شما دارید توی یک زبان مثلا “چپ به راست” مثل انگلیسی محتوا مینویسید و توی نوشته خود به یک کلمه یا عبارتی به زبانهای “راست به چپ” مثل فارسی، عربی، اردو، عبری رسیدید بهتر هست که اون کلمه یا عبارت رو توی عنصر bdo قرار بدید و صفت dir اون (که اجباری هست مشخص کردنش) رو روی rtl ست کنید اینطوری خیالتون راحت خواهد شد که در هر شرایطی (انکدینگ ها، سیستم عامل ها، مرورگرها) کاراکتر های اون کلمه یا عبارت، به درستی از سمت “راست به چپ” نمایش داده خواهد شد و برعکس نشون داده نمیشه. برعکس مثل چی؟ مثلا کلمه “علیرضا” بشه “اضریلع”.
البته یک عنصر جدید به اسم bdi توی نسخه 5 html معرفی شده که می تونه کاربردی تر باشه.
امیدوارم توضیحاتم رو واضح و روشن بیان کرده باشم.
موفق باشید
سلام. ممنونیم از اینکه تجربه خودتون به اشتراک گذاشتید.