تخطَّ إلى المحتوى

المدونة

التصميم وتجربة المستخدم

تصميم واجهات من اليمين لليسار: ما يُخطئ فيه الجميع

لماذا لا يكفي قلب الاتجاه، وما العناصر التي يجب ألا تنعكس، والأخطاء التي تكشف أن الموقع مترجم لا مُصمَّم.

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

القاعدة الأساسية: اسأل هل يجب أن ينعكس؟

ليس كل شيء ينقلب. السؤال الصحيح لكل عنصر: هل موضعه مرتبط باتجاه القراءة أم بمعنى ثابت؟

العنصرينعكس؟
التخطيط والأعمدة والقوائمنعم
سهم «التالي» و«السابق»نعم — يتبع اتجاه القراءة
أيقونة التشغيل ▶لا — معناها ثابت في كل الثقافات
الساعة وعقاربهالا
شريط التقدّمنعم — يمتلئ من جهة البداية
الشعارات وعلامات الشركاتلا أبدًا
الأرقام والتواريخلا — تبقى من اليسار لليمين
الرسوم البيانية الزمنيةغالبًا لا — الزمن يمضي لليمين عرفًا

مشكلة الأرقام والنصوص المختلطة

الرقم الإنجليزي داخل جملة عربية يتبع قواعد اتجاه معقّدة. «+20 106 740 0502» قد يظهر معكوسًا، و«iPhone 15» قد تنفصل أجزاؤه.

الحل هو عزل الاتجاه لهذه الأجزاء فقط — لا للسطر كله. وضع اتجاه معاكس على الفقرة كاملة يصلح الرقم ويكسر محاذاة النص العربي معه.

الخصائص المنطقية بدل الفيزيائية

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

المشاريع التي تبدأ بهذه الطريقة تدعم اللغتين بمجهود شبه صفري. المشاريع التي تبدأ بالخصائص الفيزيائية تحتاج لاحقًا ملف تصحيحات كاملًا — أو أداة تقلب الأنماط آليًا بعد بنائها.

الطباعة العربية

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

علامات تكشف أن الموقع مترجم لا مصمّم

  1. النص العربي محاذاته لليسار.
  2. الأيقونة على الجهة الخطأ من النص في الأزرار.
  3. أرقام الهاتف تظهر معكوسة.
  4. شريط التمرير على الجهة الخطأ.
  5. مسافات غير متوازنة: فراغ واسع من جهة وضيق من الأخرى.
  6. قوائم منسدلة تفتح خارج حدود الشاشة.
  7. مسار التنقّل بفواصل تشير للاتجاه الخطأ.

الاختبار

لا تكتفِ بتصفّح الصفحة الرئيسية. مرّ على المسارات الكاملة: املأ النموذج، افتح القوائم المنسدلة، جرّب على هاتف حقيقي، واطلب من قارئ عربي لم يشارك في المشروع أن ينفّذ مهمة أمامك دون مساعدة.

كيف نعمل

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

المدونة

أسئلة شائعة حول هذا الموضوع

لا. نسخة واحدة تتكيّف مع اللغة أسهل في الصيانة بكثير من نسختين تتباعدان مع كل تحديث. الشرط أن تُبنى بالخصائص المنطقية من البداية.

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

دعم الاتجاه نفسه لا. ما يؤثر هو صحة إعلان اللغة والاتجاه في كود الصفحة، ووجود روابط مستقلة لكل لغة مع وسوم تربط بينها — لا رابط واحد يعرض لغتين.

مقالات ذات صلة

جاهز لبدء مشروعك؟

احجز استشارتك المجانية