عنصرا bdi وbdo

تتعامل خوارزمية Unicode ثنائية الاتجاه عادةً مع النص المختلط الاتجاهات بصورة جيدة، لكنك تحتاج أحيانًا إلى تجاوزها، مثل عزل اسم أدخله المستخدم كي لا يغيّر اتجاه النص المحيط، أو فرض اتجاه محدد داخل كتلة من التعليمات البرمجية.

يتعامل <bdi> (العزل ثنائي الاتجاه) مع محتواه كسياق bidi منفصل. ولا يمكن لاتجاه النص داخل <bdi> أن يؤثر في اتجاه النص خارجها، والعكس صحيح.

قد تؤدي قائمة تضم أسماء بالإنجليزية والعربية إلى تسرّب اتجاه RTL من الأسماء العربية إلى النص المحيط. ويؤدي تغليف كل اسم داخل <bdi> إلى عزله، فيبقى التخطيط متسقًا بصرف النظر عن اتجاه كل اسم.

يفرض <bdo dir="rtl"> (التجاوز ثنائي الاتجاه) اتجاهًا محددًا على محتواه، متجاوزًا الحل الطبيعي للاتجاهات الثنائية. استخدمه عندما تريد عرض النص في اتجاه غير طبيعي، مثل عرض مقاطع التعليمات البرمجية من اليسار إلى اليمين داخل صفحة RTL.

تعيّن السمة dir على عنصر عادي اتجاهًا أساسيًا، مع استمرار تطبيق خوارزمية bidi داخله. أما <bdo> فيعطّل خوارزمية bidi لمحتواه؛ لذلك يتدفق كل محرف بدقة في الاتجاه المحدد، بصرف النظر عن نظام كتابته.

استخدمه كلما أدرجت نصًا أنشأه المستخدم داخل عناصر واجهة محيطة، مثل الأسماء في عناوين المحادثات، وأسماء المستخدمين في التعليقات، والعناوين في عناصر الموجز. يضمن العزل عدم تأثر تخطيط الواجهة بما كتبه المستخدم.

نادراً. الاستخدام المشروع الأساسي هو تعليم النص ثنائي الاتجاه (إظهار الشكل الذي تبدو عليه السلسلة عند عكسها) أو تصحيح البيانات ذات الوسوم غير الصحيحة عندما ينتج عن معالجة bidi الطبيعية ترتيب مرئي خاطئ.

بالنسبة إلى المحتوى الذي يدخله المستخدم ولا يُعرف اتجاهه، اجمع بين <bdi dir="auto"> لمزيد من الأمان: يحدد الاكتشاف التلقائي اتجاهًا أساسيًا من المحتوى، بينما يمنع bdi تسرّب هذا الاتجاه إلى النص المحيط.

تحظى bdi وbdo بالدعم في جميع المتصفحات الحديثة. وهما جزء من HTML5 ومستقرتان منذ سنوات. تفتقر الإصدارات القديمة من IE إلى bdi، لكنها أصبحت متقادمة عمليًا؛ ويمكن للمواقع الحديثة استخدام bdi بحرية.

تحترم قارئات الشاشة عزل اتجاه bidi: يُنطق النص داخل <bdi> باستخدام صوت لغته الخاصة (عند ضبط lang)، من دون أن يتسرّب السياق المحيط إليه. ويساعد bdi أيضًا ميزة تحويل النص إلى كلام على إنشاء فواصل مناسبة حول العبارات المعزولة.

ينبغي للقوالب التي تحتوي على عناصر نائبة ("Welcome, {name}") أن تُحاط فيها العناصر النائبة بـ <bdi>: Welcome, <bdi>{name}</bdi>. سيُعرض أي اسم مستخدم — بالإنجليزية أو العربية أو بمزيج منهما — بشكل صحيح من دون التأثير في بقية التحية.

ما الفرق العملي بين و؟

يعزل bdi اتجاه نص قسم ما بحيث لا يؤثر في ما يحيط به — استخدمه للمحتوى المضمّن الذي يدخله المستخدم، مثل الأسماء في القوالب. يفرض bdo اتجاهًا محددًا متجاوزًا bidi، ولا تكون الحاجة إليه شائعة خارج أمثلة التعليم. اجمع بين bdi وdir="auto" للتعامل الآمن مع النص الذي يقدمه المستخدم بلغات غير معروفة.