بناء واجهات عربية–إنجليزية ليست إضافة لاحقة
يفشل دعم الاتجاه من اليمين إلى اليسار حين يُضاف في النهاية. ومعاملة الاتجاه كخاصية في نظام التخطيط من أول التزام يكلّف القليل ويمنع ذيلاً طويلاً من العيوب.
نمط الإخفاق
يبني فريقٌ بالإنجليزية، ويطلق، ثم يضيف العربية. فيكتب أحدهم ورقة أنماط تعكس العناصر بـ direction: rtl وكومة من التجاوزات. وتعمل في معظمها — إلى أن تشير الأيقونات في الاتجاه الخاطئ، ويظهر رقم هاتف معكوساً، وتُفتح قائمة منسدلة خارج الشاشة، ويولّد كل إصلاح إصلاحين.
والسبب معماري: عُبّر عن التخطيط بمصطلحات فيزيائية (يسار، يمين) بينما كان ينبغي التعبير عنه بمصطلحات منطقية (بداية، نهاية).
استخدم الخصائص المنطقية
توفّر CSS الحديثة مكافئات واعية بالاتجاه لكل خاصية فيزيائية تقريباً:
| فيزيائية | منطقية |
|---|---|
margin-left |
margin-inline-start |
padding-right |
padding-inline-end |
left / right |
inset-inline-start / inset-inline-end |
text-align: left |
text-align: start |
border-left |
border-inline-start |
اضبط dir مرة واحدة على <html> ويتبع التخطيط الصحيح تلقائياً. وتوفّرها Tailwind بالبادئات ms- وme- وps- وpe- وstart- وend-.
والانضباط بسيط: إن كانت القيمة تحتاج عكساً في الاتجاه الآخر فيجب أن تكون منطقية. واحصر الخصائص الفيزيائية في القليل الذي لا يُعكس فعلاً.
ما الذي لا يُعكس
العكس الشامل عيبٌ بذاته. وهذه تبقى كما هي:
- الشعارات والعلامات التجارية
- أدوات التحكم بالوسائط — فزرّ التشغيل يظل مشيراً يميناً، لأنه يتبع الخط الزمني لا النص
- وجوه الساعات والتدوين الموسيقي والصيغ الرياضية
- الرسوم البيانية ذات المحور الزمني، إذ تجري اصطلاحاً من اليسار إلى اليمين حتى في اللغات ذات الاتجاه المعاكس
- المحتوى اللاتيني المضمّن داخل نص عربي
أما الأيقونات الاتجاهية — الأسهم والزوايا والتالي والسابق والتراجع والإعادة — فإنها تُعكس.
النص ثنائي الاتجاه
خلط الكتابات هو موطن العيوب الدقيقة. وخوارزمية يونيكود ثنائية الاتجاه تعالج معظم الحالات، لكن المحارف المحايدة بين الكتابات ترث الاتجاه من السياق، ما يُنتج مفاجآت مع علامات الترقيم والأقواس وأرقام الهواتف.
قواعد عملية:
- غلّف المقاطع المضمّنة ذات الاتجاه المعاكس بعنصر له
dirصريح، أو استخدم<bdi>للمحتوى الذي ينشئه المستخدم ولا يُعرف اتجاهه - استخدم عوازل الاتجاه بدل إعادة ترتيب السلاسل يدوياً
- لا تبنِ جملة أبداً بربط أجزاء مترجمة. فالنحو وترتيب الكلمات يختلفان بين اللغتين؛ استخدم سلاسل كاملة بعناصر نائبة مسمّاة بدلاً من ذلك
الأرقام والتواريخ والترتيب
- قد تستخدم اللغات العربية الأرقام الهندية (٠١٢٣) أو الغربية بحسب المنطقة والسياق. احسم ذلك عمداً وطبّقه باتساق عبر
Intl.NumberFormat. - قد تتبع التواريخ التقويم الميلادي أو الهجري. و
Intl.DateTimeFormatيدعم كليهما — اختر بحسب الجمهور، وفكّر في عرض الاثنين حيث يهمّ التمييز. - يختلف الترتيب باختلاف اللغة. استخدم
Intl.Collatorدائماً، ولا تقارن السلاسل مقارنة خامّة أبداً.
الطباعة
العربية متصلة الحروف وترتبط حروفها بحسب السياق. والنتائج عملية:
- ارتفاع السطر يحتاج مساحة أكبر. فالعربية تتطلب عادةً تباعد أسطر أكبر من اللاتينية عند الحجم الاسمي نفسه.
- الحجم البصري يختلف. فالعربية تحتاج غالباً حجماً أكبر قليلاً لتوازن الثقل المُدرَك للنص اللاتيني بجوارها.
- تباعد الحروف يكسرها. فتطبيق التباعد على العربية يقطع الوصلات بين الحروف. لا تطبّقه أبداً.
- تحقّق من تغطية الأوزان. فليس كل خط عربي يشمل مدى الأوزان الذي يفترضه التصميم.
الاختبار
أضف اللغتين إلى عملية المراجعة من البداية. فكل تغيير تخطيطي يُفحص في الاتجاهين، وكل اختبار لقطة شاشة يُشغَّل مرتين.
فاكتشاف عيب عكس في المراجعة يكلّف دقائق. واكتشافه بعد الإطلاق يكلّف إصداراً — وتصل العيوب في ذيل طويل محبِط لا دفعة واحدة.
المراجع
التدويل في W3C — الترميز البنيوي والنص من اليمين إلى اليسار؛ شبكة مطوّري موزيلا، الخصائص والقيم المنطقية في CSS؛ ملحق معيار يونيكود رقم 9، خوارزمية يونيكود ثنائية الاتجاه.