المشكلة

عند كتابة نص إنجليزي بجوار نص عربي مثل /etc/hosts كما ترون يظهر النص بشكل صعب القراءة. وذلك بسبب أن إتجاه النص الأصلي (العربي) هو من اليمين إلى اليسار وإتجاه النص الإنجليزي هو من اليسار إلى اليمين. هذه مشكلة شائعة للغاية خصوصا في المواقع التقنية التي تعتمد بقوة على النصوص ثنائية الإتجاه. مثلا من موقع أكاديمية حاسوب نجد التالي

التحايل على المشكلة

هناك حل لذلك بأن تعكس أنت إتجاه الكتابة مثل etc/hosts/ هكذا ظهر بشكل جيد ولكني لم أكتبه بشكل صحيح وستدرك ذلك عندما تنسخه إلى ملف نصي. صورة آخرى من اكاديمية حاسوب توضح إستخدام الأكاديمية لتلك الطريقة

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

الحل

وسم < bdo > في HTML يتجاوز الإتجاه الحالي للنص ويسمح لك بأن تضبط الإتجاه الذي تريده من خلال إستخدام السمة dir.

إن لم يكن تطبيق ذلك ممكن لأي سبب كان. مثلا من غير العملي أثناء الكتابة في Markdown أن تستخدم وسم < bdo > فكيف تضبط النصوص ثنائية الإتجاه إذن؟

نستخدم رمز `` في Markdown ليُحيط النص الإنجليزي بوسم < code > وهكذا تمكنا من وضع علامة على هذا النص ستُساعدنا بتحديد إسلوب خاص لهذا النص الإنجليزي عبر CSS.

توفر CSS خاصية الإتجاه direction التي تُمكنك من ضبط إتجاه النص. مثلا عندما تسند لها القيمة ltr ستجعل نص العنصر المحدد يأخذ الإتجاه من اليسار إلى اليمين. هذا جميل ولكن المشكلة أن هذه الخاصية تعمل فقط على العناصر التي على مستوى الكتلة يعني لن تعمل على وسم < code > وهو بداخل وسم فقرة < p > مثلا.

هنا تأتي الخاصية unicode-bidi لتنقذنا من ذلك فبإسناد القيمة bidi-override لها تقوم بإنشاء مستوى إضافي وتُعيد ترتيب النص بناء على قيمة خاصية الإتجاه direction. الآن لنحل مشكلة أكاديمية حاسوب كمثال نحد بالصورة أنه بالفعل تستخدم الاكاديمية خاصية direction ولكنها وحدها لا تحل المشكلة.

نحتاج أن نُضيف unicode-bidi: bidi-override لتكون النتيجة كما بالصورة التالية

كما تلاحظون ظهر النص بشكل سليم ونُسخ في مُحرر النصوص بشكل سليم.

الآن لديكم حل من HTML ولديكم حل اخر من CSS. أؤمن أن هناك حل حتمي لكل مشكلة إن لم يكن عدة حلول. وعلينا أن ننشر تلك الحلول لكي نساهم في تطوير الويب العربي : )

المراجع