تصميم واجهات RTL لمستخدمي العربية: دليل عملي

اقلب تصميماً من اليسار إلى اليمين أفقياً، ولن تحصل على واجهة عربية، بل على واجهة مكسورة. سيستقر الشعار في الزاوية الخاطئة، وسيشير سهم الرجوع إلى "الأمام"، وستُقرأ الأرقام بالمقلوب، وستجلس أيقونة البحث حيث يتوقع المستخدم قائمة حسابه. التصميم الحقيقي من اليمين إلى اليسار ليس حيلة عكسٍ تُطبَّق في نهاية المشروع، بل مجموعة من القرارات تُتَّخذ من أول مخطط هيكلي إلى آخر سطر في CSS.

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

ما الذي يغيّره تصميم RTL فعلياً

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

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

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

النص ثنائي الاتجاه: الجزء الصعب في الواجهة العربية

معظم المحتوى العربي الحقيقي ثنائي الاتجاه. فاسم منتج مثل "iPhone 15" أو سعر مثل "1,299 SAR" يقع داخل جملة عربية، وعلى المتصفّح أن يقرّر كيف يرتّب هذه السلاسل من المحارف. وإذا أخطأت في الترميز ظهرت لك أخطاء كلاسيكية: رقم هاتف معكوس، أو قوس يُغلق في الجهة الخاطئة، أو نص مختلط بين العربية والإنجليزية يتشوّش عند الكتابة.

الواجهة العربية الجيدة تتعامل مع هذا بوعي:

• اضبط dir="rtl" على الجذر ودع المستند يرثه، بدلاً من عكس كل عنصر يدوياً.
• استخدم خصائص CSS المنطقية (margin-inline-start وpadding-inline-end وinset-inline) بدلاً من left وright الثابتة، فتخدم ورقة الأنماط نفسها كلا الاتجاهين.
• اعزل المقاطع اللاتينية أو الرقمية المُضمَّنة حتى ترتّبها خوارزمية يونيكود ثنائية الاتجاه بشكل صحيح داخل النص العربي.
• اختر عن قصد بين الأرقام العربية الهندية (٠١٢٣) والأرقام العربية الغربية (0123). فأسواق الخليج تتفاوت، وهذا قرار توطين وعلامة تجارية، لا قيمة افتراضية.

هذه التفاصيل هي ما يفصل واجهة عربية موثوقة عن أخرى "تدعم العربية نظرياً" فقط.

طباعة تحترم الحرف العربي

العربية خط متّصل. الحروف تترابط وتتغيّر أشكالها حسب موقعها، وتحمل تشكيلاً فوق خط الأساس وتحته. فالخط والتخطيط المضبوطان للنص اللاتيني سيتصارعان مع الحرف العربي في كل خطوة.

بعض المبادئ التي نطبّقها في مشاريع RTL:

• اختر خطاً عربياً حقيقياً، لا خطاً لاتينياً بخط احتياطي مُلصق. فعائلات مثل Cairo وTajawal وIBM Plex Sans Arabic وNoto Sans Arabic مصمّمة للشاشات وتنسجم مع العلامات الحديثة.
• امنح العربية مساحة رأسية أكبر. فالامتدادات العلوية والسفلية والتشكيل تحتاج مجالاً للتنفّس، وارتفاع السطر الذي يبدو مناسباً في الإنجليزية كثيراً ما يبدو خانقاً في العربية.
• انتبه لأوزان الخط. فأشكال الحروف العربية قد تبدو أثقل من نظيرتها اللاتينية بالوزن نفسه، والعنوان الذي يُقرأ "عريضاً" في الإنجليزية قد يحتاج درجة أخف في العربية.
• تخلَّ عن منطق الأحرف الكبيرة. فلا حروف كبيرة في العربية، ولا يمكنك الاعتماد عليها للتأكيد. استخدم الوزن والحجم واللون بدلاً من ذلك.

لا تنسَ التخطيطات المختلطة اللغات

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

البناء لـ RTL منذ اليوم الأول

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

نهج عملي لفرق المنتج والهندسة:

• صمّم الاتجاهين بالتوازي. أنشئ لوحات عربية إلى جانب الإنجليزية حتى تُختبر المسافات وكسور الأسطر وعروض الأزرار بالحرف الحقيقي، لا بنص وهمي.
• استخدم أطر عمل بدعم RTL أصيل. فـ Flutter يملك دعماً مدمجاً للاتجاهية، وNext.js وReact يتعاملان مع dir بنظافة، وTailwind يدعم الخصائص المنطقية وصيغ RTL.
• اختبر مع قرّاء عرب أصليين. فالناطقون بالعربية بطلاقة يلتقطون كسور الأسطر الركيكة، والاقتطاع غير الطبيعي، والصياغة التي تفوتها الترجمة الحرفية.
• تحقّق من الرحلة كاملة. فالتسجيل والدفع وإيصالات POS والإشعارات وحالات الخطأ والبريد كلها يجب أن تبدو أصيلة، لا صفحات التسويق وحدها.

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

أهم النقاط

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

هل تبني منتجاً لمستخدمين ناطقين بالعربية في الخليج أو مصر وتريده أن يبدو أصيلاً لا مترجماً؟ في SummationWorks نصمّم ونبني تجارب ويب وموبايل بمنهج RTL أولاً، من تجربة المستخدم والطباعة العربية إلى التنفيذ ثنائي الاتجاه في Next.js وReact وFlutter. تصفّح خدماتنا، أو شاهد أعمالنا، أو تواصل معنا لمناقشة مشروعك.