<bdi>: عنصر BDI
آخر تحديث: 2026-10-13
<bdi>عنصر BDI
عزل ثنائي الاتجاه: يعامل نصه كقطعة اتجاه مستقلة، متجنبًا تلوث الاتجاه المختلط.
| الفئة | محتوى النص |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </bdi> وسم |
| الحالة | قياسي |
📝 البنية
<bdi>اسم المستخدم</bdi>▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <bdi> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： bdi يشبه dir="auto" لكنه ينشئ حدود عزل قوية؛ ممتاز لمحتوى المستخدم غير الموثوق.
❓ الأسئلة الشائعة
Qما وظيفة وسم bdi؟
A
<bdi> (Bi-Directional Isolation) يعزل اتجاه مقطع نصي عن النص المحيط لمنع اضطراب الترتيب عند الخلط. والحالة النموذجية: أسماء مستخدمين وقوائم تعليقات يختلط فيها محتوى عربي/عبري، فلا تُفسد ترتيبات علامات الترقيم والأرقام.Qما الفرق بين bdi وسمة unicode-bidi؟
A
<bdi> حل جاهز دلالي يكتشف المتصفح فيه اتجاه النص الداخلي ويعزله تلقائيًا؛ بينما unicode-bidi: isolate في CSS آلية أعمق بمفعول مشابه لكنها تحتاج تحديد direction يدويًا. فضّل <bdi> — أريح ودلالته أوضح.Qمتى يلزم استخدام bdi؟
Aعند عرض «نص من طرف ثالث لا تتحكم به»: أسماء مؤلفي التعليقات، أسماء المستخدمين في الدردشة، قوائم أسماء الملفات وغيرها. مثال:
<li><bdi>أحمد</bdi>: نص التعليق</li> — مهما كانت لغة الاسم لا يتأثر اتجاه تخطيط السطر كله. أما النصوص المختلطة الثابتة من كتابتك فغالبًا لا تحتاجه.🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
