عنصران خاصان بالتحكم في اتجاه النص، مهمان بشكل خاص في المواقع متعددة اللغات:
• <bdo> (Bidirectional Override): يجبر النص على عرضه في اتجاه محدد بغض النظر عن اللغة الطبيعية. صفة dir إلزامية: - dir="rtl": من اليمين لليسار - dir="ltr": من اليسار لليمين
• <bdi> (Bidirectional Isolate): يعزل نصاً قد يحتوي على اتجاهات مختلطة. مثالي لعرض محتوى مستخدمين في تعليقات أو تقييمات حيث لا تعرف لغة المستخدم مسبقاً. يمنع النصوص العربية والإنجليزية من التداخل البصري.
| 1 | <!-- bdo: إجبار اتجاه النص --> |
| 2 | <p>هذا النص طبيعي (عربي RTL)</p> |
| 3 | <p><bdo dir="ltr">هذا النص سيُعرض من اليسار لليمين</bdo></p> |
| 4 | <p><bdo dir="rtl">Hello World مكتوب بالعربي RTL</bdo></p> |
| 5 | |
| 6 | <!-- bdi: عزل نص مجهول الاتجاه --> |
| 7 | <ul> |
| 8 | <li>المستخدم: <bdi>أحمد محمد</bdi> - التقييم: 5 نجوم</li> |
| 9 | <li>المستخدم: <bdi>John Smith</bdi> - التقييم: 4 نجوم</li> |
| 10 | <li>المستخدم: <bdi>مستخدم123</bdi> - التقييم: 3 نجوم</li> |
| 11 | </ul> |
مثال 1: تعليقات متعددة اللغات
| 1 | <!-- قائمة تعليقات من مستخدمين بلغات مختلفة --> |
| 2 | <section class="comments"> |
| 3 | <h2>آراء المستخدمين</h2> |
| 4 | |
| 5 | <div class="comment"> |
| 6 | <!-- bdi يحمي تنسيق الصفحة العربية من الأسماء الإنجليزية --> |
| 7 | <strong><bdi>Ahmed Al-Rashidi</bdi></strong> |
| 8 | <p>ممتاز جداً، استفدت كثيراً</p> |
| 9 | </div> |
| 10 | |
| 11 | <div class="comment"> |
| 12 | <strong><bdi>محمد علي</bdi></strong> |
| 13 | <p>Great course, highly recommended!</p> |
| 14 | </div> |
| 15 | </section> |