شرح العنصر (bdi) في HTML

العنصر <bdi> في لغة HTML: شرح شامل

HTML

مقدمة

في عالم تطوير الويب، يواجه المطورون تحديًا دائمًا في التعامل مع النصوص ثنائية الاتجاه (Bidirectional Text)، خاصة عند دمج لغات تُكتَب من اليمين إلى اليسار (مثل العربية والعبرية) مع لغات تُكتَب من اليسار إلى اليمين (مثل الإنجليزية). هنا يأتي دور العنصر <bdi> (اختصارًا لـ Bidirectional Isolation) الذي يُقدّم حلاً أنيقًا لهذه المشكلة.

ما هو العنصر <bdi>

التعريف والغرض

<bdi> هو عنصر HTML5 مصمم لعزل جزء من النص الذي قد يكون اتجاهه مختلفًا عن المحيط به.

• يُستخدم بشكل رئيسي عند التعامل مع نصوص مختلطة الاتجاهات (مثل العربية مع الإنجليزية)
• يحافظ على التنسيق الصحيح للنص بغض النظر عن اللغة المحيطة به

لماذا نحتاج إلى <bdi>

عندما تدمج نصوصًا بجهات مختلفة (مثل اسم عربي في تعليق إنجليزي)، قد يحدث تشويش في الترتيب. <bdi> يحل هذه المشكلة بعزل النص عن سياقه المحيط.

الفرق بين <bdi> والعناصر المشابهة

العنصر	الوصف	مثال استخدام
<bdi>	يعزل النص ثنائي الاتجاه عن محيطه	<bdi>اسم_عربي</bdi>
<bdo>	يُجبِر اتجاه نص معين (dir="rtl/ltr")	<bdo dir="rtl">نص</bdo>
<span>	لا يتحكم في الاتجاه تلقائيًا	<span>نص</span>

ملاحظة: <bdi> أكثر ذكاءً من <bdo> لأنه يتعرف تلقائيًا على اتجاه النص المعزول.

كيفية استخدام <bdi>

بناء الجملة الأساسي

<p>هذا تعليق بالإنجليزية: <bdi>اسم المستخدم العربي</bdi></p>

مثال عملي شائع

<ul>
  <li>User <bdi>محمد</bdi>: 5 posts</li>
  <li>User <bdi>John</bdi>: 3 posts</li>
  <li>User <bdi>إيمان</bdi>: 7 posts</li>
</ul>

النتيجة:

• يحافظ على الترتيب الصحيح للأسماء العربية بين النصوص الإنجليزية
• يمنع انعكاس الأحرف أو الأرقام المجاورة

حالات الاستخدام الشائعة

1. أنظمة التعليقات: عند عرض أسماء مستخدمين بلغات مختلفة في نظام تعليقات
2. لوحات التحكم: في إحصائيات تحتوي على أسماء وعناوين متعددة اللغات
3. التطبيقات متعددة اللغات: أي مكان قد تظهر فيه نصوص مختلطة الاتجاهات

المميزات الرئيسية

✅ تلقائي: لا يحتاج لتحديد الاتجاه يدويًا (dir)
✅ متوافق: يدعمه جميع المتصفحات الحديثة
✅ نظيف دلاليًا: يُعرِّف الغرض من استخدامه (أفضل من <span>)

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

يدعمه جميع المتصفحات الرئيسية بما في ذلك:

Chrome

مدعوم 16+

Firefox

مدعوم 10+

Safari

مدعوم 7+

Edge

مدعوم 79+

Internet Explorer

____

Opera

مدعوم 15+

أفضل الممارسات

1. استخدمه عند الحاجة فقط: لا تستخدمه للنصوص أحادية الاتجاه
2. دمجه مع dir عند الضرورة: يمكن دمجه مع السمة dir إذا أردت التحكم يدويًا:

   <bdi dir="rtl">نص عربي</bdi>

3. بديل للـ <span>: يُفضل على <span> عند التعامل مع نصوص ثنائية الاتجاه

مثال متكامل

<div>
  <h6>آخر التعليقات</h6>
  <div class="comment">
    <bdi>أحمد</bdi>: هذا مقال رائع!
  </div>
  <div class="comment">
    <bdi>Sarah</bdi>: شكرًا للمعلومات
  </div>
  <div class="comment">
    <bdi>خالد</bdi>: أتفق تمامًا
  </div>
</div>

النتيجة:

• تظهر جميع الأسماء والتعليقات بالترتيب والتنسيق الصحيح بغض النظر عن اللغة

الخلاصــــة

العنصر <bdi> هو أداة قوية لمطوري الويب الذين يعملون على تطبيقات متعددة اللغات. بساطته وفعاليته تجعله الحل الأمثل لمشاكل النصوص ثنائية الاتجاه، خاصة في:

• الشبكات الاجتماعية
• أنظمة إدارة المحتوى
• التطبيقات العالمية

نصيحة أخيرة: استخدم <bdi> كلما واجهت مشكلة في ترتيب النصوص المختلطة، وستحصل على نتيجة احترافية دون مجهود كبير!

كيف كان المقال؟