العنصر <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>.

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