Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

HTMLالوسم <bdi>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

في حال كان النص كلام نقرؤه من اليمين إلى اليسار مثل الكلام العربي و كلام نقرؤه من اليسار إلى اليمين مثال الكلام الإنجليزي في ذات الوقت فهذا الأمر سيسبب مشكلة في ظهور أماكن التنقيط التي قد تكون موضوعة في النص كالنقاط, الفواصل, الأقواس و غيرها لأن المتصفح لن يعرف كيف يرتبهم بالشكل الذي نريده.

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


معلومة تقنية

إسم الوسم <bdi> مشتق من عبارة Bidirectional Isolate التي تعني عزل ثنائي الإتجاه.
في حالتنا يقصد بهذه العبارة أن الوسم يستخدم لعزل النص سواء كان متجه من اليمين إلى اليسار أو العكس.

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

الجدول التالي يظهر المتصفحات التي تدعم الوسم <bdi>.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
16 79 10 15 6 ≤37 18 10 14 6 1.0

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بعرض الكلمة العربية "محمد" الموضوعة بداخل جملة إنجليزية بداخل وسم <bdi> حتى يتم عرض الجملة كما هي.

مثال

User <bdi>محمد</bdi>: 45 points.
User <bdi>محمد</bdi>: 45 points.

جرب الكود

تصميمه الإفتراضي

لا يوجد تصميم إفتراضي له.

نصائح و ملاحظات

إستخدام هذا الوسم يعتبر مفيداً في حال كنت تجلب محتوى من قاعدة بيانات و تريد عرضه في الصفحة و أنت لا تعرف كيف هو إتجاه هذا المحتوى لأنك ببساطة تستطيع وضع المحتوى بداخله حتى لا يؤثر على باقي الكلام الموضوع في الصفحة.