T
R
I
P
L
E
تصميم واجهات من اليمين لليسار: ما يُخطئ فيه الجميع
28
أغسطس
تصميم واجهات من اليمين لليسار: ما يُخطئ فيه الجميع
لماذا لا يكفي قلب الاتجاه، وما العناصر التي يجب ألا تنعكس، والأخطاء التي تكشف أن الموقع مترجم لا مُصمَّم.
أغلب المواقع العربية مبنية على قوالب إنجليزية قُلب اتجاهها. النتيجة واجهة تعمل تقنيًا لكنها تبدو غريبة: أيقونات تشير للجهة الخطأ، وأرقام مقلوبة، ومسافات غير متوازنة. هذا المقال يشرح الفرق بين القلب والتصميم.
القاعدة الأساسية: اسأل هل يجب أن ينعكس؟
ليس كل شيء ينقلب. السؤال الصحيح لكل عنصر: هل موضعه مرتبط باتجاه القراءة أم بمعنى ثابت؟
| العنصر |
|---|
| ينعكس؟ |
| التخطيط والأعمدة والقوائم |
| نعم |
| سهم «التالي» و«السابق» |
| نعم — يتبع اتجاه القراءة |
| أيقونة التشغيل ▶ |
| لا — معناها ثابت في كل الثقافات |
| الساعة وعقاربها |
| لا |
| شريط التقدّم |
| نعم — يمتلئ من جهة البداية |
| الشعارات وعلامات الشركات |
| لا أبدًا |
| الأرقام والتواريخ |
| لا — تبقى من اليسار لليمين |
| الرسوم البيانية الزمنية |
| غالبًا لا — الزمن يمضي لليمين عرفًا |
مشكلة الأرقام والنصوص المختلطة
الرقم الإنجليزي داخل جملة عربية يتبع قواعد اتجاه معقّدة. «+20 106 740 0502» قد يظهر معكوسًا، و«iPhone 15» قد تنفصل أجزاؤه.
الحل هو عزل الاتجاه لهذه الأجزاء فقط — لا للسطر كله. وضع اتجاه معاكس على الفقرة كاملة يصلح الرقم ويكسر محاذاة النص العربي معه.
الخصائص المنطقية بدل الفيزيائية
أهم قرار تقني في المشروع: استخدام خصائص تعرف اتجاه القراءة بدل خصائص ثابتة. بدل «هامش من اليسار» تكتب «هامش من جهة البداية»، فينقلب تلقائيًا مع اللغة دون كود إضافي.
المشاريع التي تبدأ بهذه الطريقة تدعم اللغتين بمجهود شبه صفري. المشاريع التي تبدأ بالخصائص الفيزيائية تحتاج لاحقًا ملف تصحيحات كاملًا — أو أداة تقلب الأنماط آليًا بعد بنائها.
الطباعة العربية
- ارتفاع سطر أكبر من الإنجليزي — العربية بحروف متصلة وتشكيل يحتاج مساحة.
- لا تباعد سالب بين الحروف إطلاقًا؛ الحروف متصلة والتضييق يشوّهها.
- حجم خط أكبر قليلًا للنص نفسه مقارنة باللاتيني.
- خط عربي حقيقي، لا خط لاتيني يعرض العربية بحروف احتياطية.
- انتبه للأوزان: كثير من الخطوط العربية لا تملك وزنًا خفيفًا مقروءًا.
علامات تكشف أن الموقع مترجم لا مصمّم
- النص العربي محاذاته لليسار.
- الأيقونة على الجهة الخطأ من النص في الأزرار.
- أرقام الهاتف تظهر معكوسة.
- شريط التمرير على الجهة الخطأ.
- مسافات غير متوازنة: فراغ واسع من جهة وضيق من الأخرى.
- قوائم منسدلة تفتح خارج حدود الشاشة.
- مسار التنقّل بفواصل تشير للاتجاه الخطأ.
الاختبار
لا تكتفِ بتصفّح الصفحة الرئيسية. مرّ على المسارات الكاملة: املأ النموذج، افتح القوائم المنسدلة، جرّب على هاتف حقيقي، واطلب من قارئ عربي لم يشارك في المشروع أن ينفّذ مهمة أمامك دون مساعدة.
كيف نعمل
نبني بالخصائص المنطقية من اليوم الأول، ونتعامل مع العربية كلغة أساسية لا كنسخة مترجمة. الفرق يظهر في التفاصيل الصغيرة التي يلاحظها المستخدم العربي دون أن يعرف تحديدًا ما الذي يزعجه.
المدونة
أسئلة شائعة حول هذا الموضوع
هل أبني نسختين منفصلتين للعربي والإنجليزي؟
لا. نسخة واحدة تتكيّف مع اللغة أسهل في الصيانة بكثير من نسختين تتباعدان مع كل تحديث. الشرط أن تُبنى بالخصائص المنطقية من البداية.
ما أصعب جزء في دعم RTL؟
المكتبات الخارجية. مكتبة سلايدر أو تقويم لا تدعم RTL تفسد القسم كله، ويصعب إصلاحها من الخارج. تحقق من دعمها قبل اختيارها لا بعده.
هل يؤثر دعم RTL على السيو؟
دعم الاتجاه نفسه لا. ما يؤثر هو صحة إعلان اللغة والاتجاه في كود الصفحة، ووجود روابط مستقلة لكل لغة مع وسوم تربط بينها — لا رابط واحد يعرض لغتين.
مقالات ذات صلة
الخطوط العربية على الويب: كيف تختار وتضبط؟
تجربة المستخدم: أكثر من مجرد شكل جميل
لماذا يُرفض تطبيقك من المتجر؟ وكيف تتجنب ذلك
جاهز لبدء مشروعك؟
+20 106 740 0502
info@triple-eg.com