شرح عنصر bdi

أهلا بكم في كود ويب
أهلا بكم في درس جديد من دروس html5 وفي هذا الدرس سوف نتعرف على عنصر جديد من عناصر html5 وهو عنصر bdi
من خلال استخدام هذا العنصر يمكننا تنسيق النصوص واظهارها في المتصفح كما هي مكتوبة بدون مشاكل
عندما نقوم بكتابة جمل باللغة الإنجليزية وفى وسط الجملة نقوم بكتابة كلمة باللغة العربية وبعد معاينة النتيجة فى المتصفح نجد أن الجملة أصبحت غير منسقة أى نجد الكلمة باللغة العربية تغير مكانها وبالتالى عند قراءة الجملة ستجد أن هناك شئ ما غير واضح.

مثال بدون إضافة عنصر bdi

كود html

    <li>user: ahmad 50 Point</li> <li>user: محمد 30 Point</li> <li>user: محمود 20 نقطة</li>

النتيجة

نجد هنا بعد معاينة النتيجة أن رقم 30 جاء قبل إسم محمد مع أن المفروض يكون إسم محمد قبل رقم 30
  • user: ahmad 50 Point
  • user: محمد 30 Point
  • user: محمود 20 نقطة

مثال بعد إضافة عنصر bdi

كود html

    <li>user: ahmad 50 Point</li> <li>user: <bdi>محمد</bdi> 30 Point</li> <li>user: محمود 20 نقطة</li>

النتيجة

نجد هنا بعد معاينة النتيجة أن إسم محمد جاء قبل رقم 30 وذلك من خلال استخدام هذا العنصر bdi
  • user: ahmad 50 Point
  • user: محمد 30 Point
  • user: محمود 20 نقطة