أساسيات تصميم المواقع العربية من اليمين لليسار: القواعد المعيارية لا الحيل

أساسيات تصميم المواقع العربية من اليمين لليسار تبدأ بفكرة واحدة

الاتجاه ليس انعكاساً بصرياً للتصميم الإنجليزي. هذه هي الفكرة التي يترتب عليها كل ما بعدها، وهي التي تُختصر عادة إلى «اقلب الصفحة» فتنتج المشكلات التي يعرفها كل من بنى موقعاً عربياً.

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

المعايير التي تحل أغلب هذا منشورة منذ سنوات، وهي قليلة ويمكن قراءتها في جلسة واحدة. المقال التالي يمر عليها بالترتيب الذي تُطبّق به فعلاً.

أين توضع خاصية dir بالضبط

القاعدة الأولى بسيطة ومكتوبة. توصي W3C بأنه إذا كان الاتجاه العام للمستند من اليمين لليسار فأضف dir="rtl" إلى وسم html، لا إلى body ولا إلى حاوية داخلية. هذا يضبط الاتجاه الأساسي الافتراضي للمستند كله.

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

أي أن رش dir="rtl" على كل قسم وكل حاوية ليس احتياطاً بل ضجيج، ويُصعّب لاحقاً تتبع سبب ظهور جزء بعينه بترتيب غير متوقع. الاتجاه يُورَّث من الجذر، والاستثناء وحده هو ما يُعلَّم.

وهناك قيمة ثالثة مفيدة وهي dir="auto"، وفيها ينظر المتصفح إلى أول حرف ذي اتجاه قوي داخل العنصر ويستنتج منه الاتجاه الأساسي. موضعها الطبيعي هو المحتوى الذي لا تعرف لغته وقت البناء، مثل تعليقات المستخدمين أو أسمائهم.

لماذا لا يُضبط الاتجاه الأساسي بـCSS

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

السبب بنيوي لا جمالي. الاتجاه جزء من معنى المحتوى نفسه، لا من مظهره. وإذا فشل تحميل ورقة الأنماط، أو قُرئت الصفحة في قارئ محتوى يتجاهل الأنماط، أو حُوّلت إلى صيغة أخرى، فإن الاتجاه المضبوط في CSS يختفي ومعه ترتيب النص المفهوم.

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

وهذا لا يعني أن CSS لا دور لها. دورها يأتي في الخطوة التالية، وهو الأهم عملياً.

الخصائص المنطقية: ورقة أنماط واحدة بدل ملفين

الطريقة القديمة في دعم العربية كانت ورقة أنماط منفصلة تعكس كل قيمة: كل margin-left يصير margin-right وبالعكس. تعمل، وتتضاعف صيانتها، وتنكسر عند أول تعديل يُنسى في أحد الملفين.

البديل المعياري هو الخصائص المنطقية. توضح MDN أن CSS صُمّمت ابتداءً بإحداثيات فيزيائية فقط، وأن وحدة الخصائص المنطقية عرّفت مكافئات نسبية لاتجاه التدفق، فصارت الخصائص التي كانت تقبل top وbottom وleft وright تقبل أيضاً block-start وblock-end وinline-start وinline-end.

والفكرة أن البعد السطري يوازي تدفق النص داخل السطر. ومن هنا يأتي المكسب كله:

• في الإنجليزية: inline-start هو اليسار، وinline-end هو اليمين.
• في العربية: inline-start هو اليمين، وinline-end هو اليسار.

فإذا كتبت margin-inline-start بدل margin-left، صارت القاعدة تعني «بداية السطر» في الاتجاهين، ولم تعد تحتاج ملفاً معكوساً. والمجموعة تغطي الهوامش والحشو والحدود بكل متغيراتها من لون ونمط وعرض.

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

النص ثنائي الاتجاه: الأرقام والروابط والأسماء

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

هذا ليس خطأ في الخط ولا في المتصفح. المحتوى المختلط يُرتَّب وفق خوارزمية ثنائية الاتجاه تعتمد على الاتجاه الأساسي للعنصر الحاوي، والنتيجة صحيحة بمقتضى القاعدة حتى لو بدت غريبة.

الحالة التي تحتاج تدخلاً هي إدراج نص لا تعرف اتجاهه داخل نص تعرفه: اسم مستخدم، عنوان مقال من مصدر خارجي، حقل بحث. هنا يأتي عنصر bdi، وهو مصمم لعزل اتجاه ما بداخله عن النص المحيط. وتشير التوصية إلى أن المتصفح عند تقدير الاتجاه بـdir="auto" يتخطى النص داخل عنصر bdi.

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

ما الذي ينقلب وما الذي لا ينقلب

القاعدة التي تحل أغلب الجدل: ينقلب ما يحمل معنى اتجاهياً مرتبطاً بتدفق القراءة، ولا ينقلب ما هو تمثيل لشيء له وجود مستقل عن اللغة.

ينقلب: أسهم التالي والسابق، وأسهم الرجوع والتقدم، ومؤشرات التقدم في خطوات متسلسلة، وشرائط التحميل، وتوسيع القوائم الجانبية.

لا ينقلب: الساعة وعقاربها، وعلامة الصح، وأيقونات التشغيل في مشغلات الوسائط لأنها صارت اصطلاحاً عالمياً، وشعارات المنصات، والصور الفوتوغرافية، والرسوم البيانية التي تحمل محاور ذات معنى.

الخطأ الشائع هو قلب كل شيء آلياً بمرشح في CSS، فتظهر ساعة تدور عكس اتجاهها وعلامة صح معكوسة تبدو خطأ مطبعياً. وهو خطأ يصعب ملاحظته على من بنى الصفحة ويلاحظه المستخدم فوراً.

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

الخط العربي: ما يختلف فعلاً

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

وارتفاع الحرف العربي الفعلي يختلف عن نظيره اللاتيني عند نفس الحجم المعلن، فحجم يبدو مناسباً بالإنجليزية قد يبدو صغيراً بالعربية. القاعدة العملية أن تُختبر الأحجام على نص عربي حقيقي لا على نص لاتيني ثم يُترجم.

ونقطة أخيرة تُنسى: النص العربي المولّد من ترجمة يطول أو يقصر عن الأصل بنسبة معتبرة، فالأزرار والبطاقات التي صُمّمت على مقاس نص إنجليزي تنكسر. تُصمم العناصر على أطول نص متوقع لا على أقصره.

قائمة فحص قبل الإطلاق

قائمة قصيرة تكشف أغلب ما يُكتشف عادة بعد الإطلاق:

• dir="rtl" موضوعة على وسم html، ولا تكرار لها على العناصر الداخلية بلا سبب.
• الاتجاه غير مضبوط في CSS إطلاقاً.
• الخصائص المنطقية مستخدمة في الهوامش والحشو والحدود، ولا ورقة أنماط معكوسة منفصلة.
• حقول البريد والروابط والأرقام الدولية تُعرض وتُكتب من اليسار لليمين.
• المحتوى القادم من المستخدمين معزول بـbdi أو مضبوط بـdir="auto".
• الأيقونات ذات المعنى الاتجاهي وحدها هي المنقلبة.
• الصفحة مختبرة بنص عربي حقيقي طويل، لا بنص وهمي قصير.
• الصفحة مختبرة بعد تعطيل الأنماط: هل ما زالت مقروءة بالاتجاه الصحيح؟

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

حد أدنى من الصراحة

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

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