<bdi>

وسم عزل الاتجاه <bdi>

وسم bdi يعزل نصًّا مجهول الاتجاه (اسم مستخدم، تعليق) عن محيطه كي لا يُفسد ترتيب الأرقام والعلامات حوله — مهم جدًّا في موقع عربي RTL.

مشكلة يومية في أي موقع عربي يعرض محتوى مستخدمين: اسم كُتب بالإنجليزية وسط جملة عربية، أو العكس، قد يقلب خوارزمية الاتجاه ثنائي الاتجاه ترتيب الأرقام والفواصل المجاورة فتظهر «1 - John» بدل «John - 1». bdi يعزل النص بداخله تمامًا: اتجاهه يُكتشف تلقائيًّا (dir="auto" ضمنيًّا) ولا يتسرب تأثيره للخارج ولا يتأثر بمحيطه.

الاستخدام الأشيع: قوائم فيها أسماء مستخدمين أو نصوص ديناميكية مجهولة اللغة مدمجة وسط جملة أو رقم ترتيب — لفّها بـ bdi دومًا احتياطًا.

الصياغة

<li><bdi>اسم_المستخدم</bdi> - المركز الأول</li>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<p>بدون عزل — لاحظ كيف يضطرب ترتيب النص:</p>
<ol>
  <li>Ahmad Ø 95 نقطة</li>
</ol>
<p>مع bdi — الاسم اللاتيني معزول ولا يفسد اتجاه السطر:</p>
<ol>
  <li><bdi>Ahmad Ø</bdi> 95 نقطة</li>
</ol>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
dir	auto ضمنيًّا دائمًا — لا يرث اتجاه العنصر الأب كما يفعل dir على وسوم أخرى

💡 نصائح عملية

أي محتوى مُدرَج ديناميكيًّا (تعليق، اسم، عنوان منتج) لا تعرف لغته مسبقًا؟ لفّه بـ bdi احتياطيًّا
لا يحتاج جافاسكريبت أو CSS إضافي — عزل تلقائي بالكامل من المتصفح

⚠️ أخطاء شائعة

الخلط بينه وبين bdo — bdi يعزل ويكتشف تلقائيًّا، وbdo يفرض اتجاهًا محددًا قسرًا
تجاهله في موقع RTL يعرض أسماء أو أكواد لاتينية وسط نصوص عربية — سبب شائع لـ«تشوّه» الترتيب

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs