وسوم اتجاه النصوص (bdo, bdi)

bdo bdi htmlاتجاه النص htmlrtl ltr htmlbidirectional htmlعربي html

جدول مرجعي سريع

العنصر	طبيعة التأثير والعمل البرمجي	السمات الإلزامية والحالات الاستخدامية
bdo	يفرض إجبارياً اتجاهاً خطياً محدداً لعرض النص بغض النظر عن لغته الأصلية	يتطلب حتماً سمة dir بقيم rtl أو ltr ويستخدم لعكس الكلمات أو معالجة الشيفرات الخاصة
bdi	يعزل النص داخلياً ويمنع تأثير اتجاهه على النصوص المحيطة به في الصفحة	لا يتطلب سمات إجبارية ويستخدم لحماية النصوص في التعليقات وأسماء المستخدمين مجهولة اللغة

الشرح

تُعد معالجة اتجاهات النصوص من أعقد المسائل الهندسية عند بناء وتطوير المواقع متعددة اللغات (Multi-lingual Sites) التي تجمع بين لغات تُكتب من اليمين إلى اليسار (RTL) كالعربية، ولغات تُكتب من اليسار إلى اليمين (LTR) كالإنجليزية. توفر لغة HTML وسامين تخصصيين للتحكم في كيفية دمج وعرض هذه النصوص لمنع حدوث تشوهات بصرية في واجهة المستخدم.

1. وسم الفرض الإجباري للاتجاه (bdo - Bidirectional Override)

يقوم هذا الوسم بإلغاء خوارزمية الاتجاه التلقائية للمتصفح، ويقوم بـ فرض اتجاه محدد وعكس الأحرف إجبارياً بناءً على القيمة المحددة له، دون النظر إلى طبيعة اللغة المكتوبة (سواء كانت عربية أو إنجليزية).

سمة الاتجاه الإلزامية (dir Attribute): يحظر استخدام هذا الوسم بدون تضمين سمة dir؛ حيث تأخذ إحدى قيمتين:
dir="rtl": لعرض النص وتوجيهه إجبارياً من اليمين إلى اليسار.
dir="ltr": لعرض النص وتوجيهه إجبارياً من اليسار إلى اليمين.
أبرز استخداماته: يُستخدم في حالات فنية خاصة مثل رغبة المطور في عكس كلمة برمجية بالكامل، أو تنسيق شيفرات مشفرة تتطلب قراءة مقلوبة للأحرف.

2. وسم العزل الاتجاهي المتبادل (bdi - Bidirectional Isolate)

يُمثل هذا الوسم أداة حماية بالغة الأهمية للمواقع التفاعلية. يقوم وسم bdi بـ عزل النص المحاط به تماماً عن سياق الفقرة المحيطة به؛ مما يعني أن اتجاه النص الداخلي لن يؤثر مطلقاً على اتجاه النص الخارجي، والعكس صحيح.

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

الصياغة (Syntax)

syntax

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: إليك كيفية صياغة هذه الأوسمة وتطبيقها عملياً داخل كود الـ HTML:

إليك كيفية صياغة هذه الأوسمة وتطبيقها عملياً داخل كود الـ HTML:

1	<!-- تطبيق وسم bdo لفرض اتجاه الأحرف وعكسها إجبارياً -->
2	<p>هذا النص يُعرض بشكل طبيعي.</p>
3	<p><bdo dir="rtl">هذا النص سيتم فرض عرضه وعكس أحرفه تماماً.</bdo></p>
4	<p><bdo dir="ltr">This text will be forced from left to right.</bdo></p>
5
6	<!-- تطبيق وسم bdi لعزل بيانات المستخدمين مجهولة اللغة -->
7	<ul>
8	<li>المستخدم <bdi>Nouvil_Developer</bdi>: حصل على 90 نقطة.</li>
9	<li>المستخدم <bdi>أحمد البرمجي</bdi>: حصل على 85 نقطة.</li>
10	<li>المستخدم <bdi>إيمانويل 10</bdi>: حصل على 70 نقطة.</li>
11	</ul>
12
13	<!-- بدون استخدام bdi، ستتداخل الأرقام والنصوص العربية والإنجليزية بشكل مشوه ومتداخل -->

نصائح احترافية

—تذكر دائماً أن إضافة السمة dir لوسم الفقرة العادي <p dir="rtl"> تقوم فقط بتوجيه محاذاة النص والبدء من اليمين، لكنها تترك للمتصفح حرية ترتيب الحروف داخلياً بناءً على نوعها. أما وسم <bdo dir="rtl"> فهو أمر صارم يعيد ترتيب الأحرف في الذاكرة البصرية بشكل ميكانيكي مقلوب، لذا يجب قصر استخدام bdo على الاحتياجات الفنية المحددة وتفضيل bdi لعزل وتأمين المحتوى الديناميكي.

الدرس السابق

الاقتباسات والمختصرات (q, blockquote, abbr, address)

الدرس التالي

وسوم الأكواد التقنية (code, kbd, samp, var, pre)

العنصر

طبيعة التأثير والعمل البرمجي

السمات الإلزامية والحالات الاستخدامية

bdo

يفرض إجبارياً اتجاهاً خطياً محدداً لعرض النص بغض النظر عن لغته الأصلية

يتطلب حتماً سمة dir بقيم rtl أو ltr ويستخدم لعكس الكلمات أو معالجة الشيفرات الخاصة

bdi

يعزل النص داخلياً ويمنع تأثير اتجاهه على النصوص المحيطة به في الصفحة

لا يتطلب سمات إجبارية ويستخدم لحماية النصوص في التعليقات وأسماء المستخدمين مجهولة اللغة

1. وسم الفرض الإجباري للاتجاه (bdo - Bidirectional Override)

سمة الاتجاه الإلزامية (dir Attribute): يحظر استخدام هذا الوسم بدون تضمين سمة dir؛ حيث تأخذ إحدى قيمتين:

dir="rtl": لعرض النص وتوجيهه إجبارياً من اليمين إلى اليسار.

dir="ltr": لعرض النص وتوجيهه إجبارياً من اليسار إلى اليمين.

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

2. وسم العزل الاتجاهي المتبادل (bdi - Bidirectional Isolate)

أبرز استخداماته: يُعد هذا الوسم حلاً جذرياً لمشكلة تداخل الكلمات العربية والإنجليزية عند عرض بيانات ديناميكية قادمة من المستخدمين لا يمكن التنبؤ بلغتهم مسبقاً (مثل: أسماء المستخدمين في لوحات التحكم، التعليقات، أو مراجعات المنتجات).

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