العنصر <bdi>

يعزل العنصر <bdi> (اختصار للعبارة bidirectional isolation) جزءًا من النص الذي يمكن تنسيقه باتجاه نص (أي اتجاه النص من اليمين إلى اليسار مثل اللغة العربية، أو من اليسار إلى اليمين مثل اللغات اللاتينية) مختلف عن النص الذي حوله.

هذا العنصر مفيدٌ عند تضمين نص لا يُعرَف اتجاهه تحديدًا -مثل تضمين نص من قاعدة البيانات- داخل نص له اتجاه نص معيّن.

المثال الآتي يستخدم العنصر <bdi> لعرض جملة عربية بشكل سليم:

<p dir="ltr">This arabic word <bdi>جملة عربية في عنصر bdi الذي يعرض اتجاه النص بشكل مستقل عمّا حوله</bdi>
is automatically displayed right-to-left.</p>

إذا لم نستخدم العنصر <bdi> واستعملنا <span> بدلًا منه فستكون الجملة العربية غير مفهومة:

<p dir="ltr">This arabic word <span>جملة عربية في عنصر bdi الذي يعرض اتجاه النص بشكل مستقل عمّا حوله</span>
is automatically displayed right-to-left.</p>

بطاقة العنصر

تصنيفات المحتوى	عنصر تنظيمي أو عنصر عادي.
المحتوى المسموح	محتوى عادي.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى العادي.
واجهة DOM	HTMLElement

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	غير مدعوم	مدعوم	مدعوم

أغلبية المتصفحات الحديثة التي تدعم HTML5 تدعم هذا العنصر.

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر؛ لكن مع اختلاف تنظيمي صغير ألا وهو عدم وراثة قيمة الخاصية dir، فلو لم تُضبَط هذه الخاصية فستكون قيمتها الافتراضية هي auto وسيقرر المتصفح ما هو اتجاه النص اعتمادًا على محتوى العنصر.

ملاحظات الاستخدام

صحيحٌ أنَّ من الممكن الحصول على نفس الأثر المرئي باستخدام خاصية unicode-bidi: isolate في CSS على عنصر <span> أو أي عنصر آخر يقبل النص، لكن لهذا العنصر معنى تنظيمي، وهو مفيد في حال عطّل المستخدم استخدام أنماط CSS، وفي تلك الحالة سيُعرَض النص بشكل صحيح باستخدام عنصر <bdi>.

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

• معيار HTML Living Standard.
• مواصفة HTML5.