آموزش و یادگیری تگ bdi در HTML

در اين بخش از دوره آموزش HTML در آموزش دون، با تگ <bdi> آشنا مي‌شويم. اين تگ براي مديريت جهت نوشتار متن‌هايي که زبان يا جهت آنها با زبان اصلي صفحه متفاوت است استفاده مي‌شود. BDI مخفف Bi-Directional Isolation است و باعث مي‌شود متن درون آن مستقل از جهت محتواي اطراف نمايش داده شود.

تگ bdi در HTML چيست؟

تگ <bdi> جهت متن داخلي خود را از جهت متن اطراف ايزوله مي‌کند. اين ويژگي براي صفحاتي که شامل زبان‌هاي راست‌به‌چپ (RTL) و چپ‌به‌راست (LTR) هستند بسيار کاربردي است، مانند نمايش نام کاربري يا مقادير متغير که از منابع خارجي آمده‌اند.

مثال ساده از تگ bdi

<p>
  نام کاربر: <bdi>John Doe</bdi>
</p>

در اين مثال، نام کاربر از جهت متن اطراف ايزوله شده و بدون توجه به زبان صفحه به درستي نمايش داده مي‌شود.

مثال کاربردي با متن راست‌به‌چپ و چپ‌به‌راست

<p>
  پيام شما از <bdi>user123</bdi> دريافت شد.
</p>

اگر زبان صفحه فارسي باشد و نام کاربري انگليسي باشد، بدون <bdi> ممکن است جهت متن اشتباه نمايش داده شود.

صفات مهم تگ bdi

مثال با مشخص کردن جهت نوشتار

<p>
  پيام شما از <bdi dir="ltr">محمد123</bdi> دريافت شد.
</p>

با استفاده از ويژگي dir مي‌توان جهت متن داخلي را به صورت دستي تعيين کرد تا در هر محيطي درست نمايش داده شود.

نکات حرفه‌اي در استفاده از bdi

• تگ <bdi>
• مي‌توان آن را داخل تگ‌هاي <p>، <span> يا <div> استفاده کرد.
• در ترکيب با dir، کنترل کامل جهت متن را خواهيد داشت.
• اين تگ تاثيري بر استايل ندارد، فقط جهت متن را مديريت مي‌کند.

براي يادگيري ساير تگ‌هاي HTML و مديريت متن‌هاي چندزبانه، پيشنهاد مي‌کنيم در دوره آموزش HTML مقدماتي تا پيشرفته آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.