نظرة عامة
عكس التخطيط ليس تصميماً عربياً. هذه أحد عشر خطأً متكرراً في واجهات RTL، مع اختبار عملي لكل واحد، وقائمة فحص من ثمانية بنود قبل الإطلاق.
عندما يقول فريق التطوير «النسخة العربية جاهزة»، فغالباً يعني أن ملف الإنجليزية عُكس اتجاهه وأُضيفت الترجمة. هذا ليس تصميماً عربياً. هو تصميم إنجليزي بثوب معكوس، وينكشف عند أول نموذج طويل، أو أول رقم مختلط، أو أول مستخدم يقرأ بالعربية على هاتف صغير.
هذه أحد عشر خطأً نراها متكررة في المشاريع السعودية، مع طريقة اختبار كل واحد. ليست قائمة تجميلية. كل خطأ منها يكلّف مستخدماً وقتاً أو يجعله يخطئ في إدخال بيانات.
لماذا يفشل القلب؟
القلب يعمل على المستوى البصري فقط. يغيّر اتجاه الأعمدة، ولا يغيّر منطق القراءة، ولا دلالة السهم، ولا ترتيب الأرقام، ولا طريقة اقتطاع النص. Material Design تصف هذا بوضوح: التخطيط في RTL يعكس المحاذاة والترتيب، لكن المكوّنات يجب أن تُصمّم للاتجاهين، لا أن تُقلب بعدهما.
هناك أربع طبقات تتأثر بالاتجاه، وكل طبقة تحتاج اختباراً مختلفاً.
| الطبقة | ما يتغيّر | كيف تختبرها |
|---|---|---|
| التخطيط | الأعمدة، المحاذاة، المسافات المنطقية، ترتيب العناصر | بدّل اللغة في منتصف المهمة، وراقب موضع التركيز |
| المحتوى | النص، الاقتطاع، ارتفاع السطر، العناوين الطويلة | استخدم أطول اسم شركة وأطول رسالة خطأ حقيقية |
| الأرقام | الأرقام العربية/الغربية، النطاقات، التواريخ، العملة | أدخل رقماً مختلطاً واعرض نطاقاً وتاريخاً هجرياً |
| الأصول | الأيقونات، الصور، البريد، PDF، لقطات المتجر | افتح البريد وPDF على جهاز عربي حقيقي |
أحد عشر خطأً وطريقة اختبار كل واحد
قلب كل الأيقونات. سهم «التالي» يجب أن يشير إلى اليسار في RTL، لكن أيقونة التشغيل وعلامة الصح والشعار لا تُقلب. الحل: سجل أيقونات يحدد لكل أيقونة هل هي اتجاهية أم لا. الاختبار: مرّر على كل أيقونة واسأل هل يتغير معناها لو انعكست.
عكس ترتيب الحقول دون ترتيب القراءة. الحقل الأول ينتقل إلى اليمين، لكن ترتيب التبويب يبقى من اليسار. الحل: استخدم خصائص منطقية مثل margin-inline-start، واختبر Tab بالترتيب. الاختبار: املأ النموذج بلوحة المفاتيح فقط.
مسارات تنقل تعمل من اليسار. «الرئيسية / الخدمات / التصميم» تُقرأ من اليمين في العربية، لكن الفاصل يبقى في الاتجاه الخطأ. الحل: اعكس ترتيب العناصر وليس النص فقط، واستخدم فاصلاً محايداً. الاختبار: اضغط على أول عنصر وتأكد أنه الأب وليس الابن.
نصوص مختلطة بلا عزل ثنائي الاتجاه. اسم مثل «شركة ABC» أو بريد إلكتروني داخل جملة عربية يقلب علامات الترقيم والأقواس. الحل: استخدم dir="auto" أو عزل Unicode حول المقطع اللاتيني. الاختبار: أدخل بريداً ورقماً في نهاية جملة عربية.
أرقام بلا سياسة. خلط الأرقام العربية والغربية في الشاشة نفسها يربك المقارنة. الحل: سياسة واحدة معلنة: أرقام غربية في الواجهات المالية، أو عربية في المحتوى التحريري، مع استثناء موثّق. الاختبار: اعرض مبلغاً ونطاقاً وتاريخاً في بطاقة واحدة.
منتقي تاريخ بأيام معكوسة. ترتيب أيام الأسبوع يبقى LTR بينما الواجهة RTL. الحل: اعكس ترتيب الأيام والأسابيع، واختبر التاريخ الهجري والميلادي. الاختبار: اختر تاريخاً باللمس وتأكد أن اليوم المحدد هو الذي ظهر.
جداول تقلب الأعمدة وتترك الأرقام. العمود الأول ينتقل إلى اليمين، لكن الأرقام تبقى محاذاة لليسار. الحل: محاذاة الأرقام إلى اليمين في RTL، واختبار الأعمدة القابلة للفرز. الاختبار: رتّب عموداً رقمياً وتأكد أن الاتجاه مفهوم.
نافذة منبثقة بزر إغلاق في الجهة الخطأ. زر الإغلاق يبقى أعلى اليسار بينما المستخدم يبدأ من اليمين. الحل: ضعه في أعلى اليسار فقط إذا كان النمط العالمي يقوده، وإلا فاستخدم موضعاً واضحاً مع تسمية. الاختبار: افتح النافذة بلوحة المفاتيح وأغلقها.
مؤشر تقدم يتحرك للخلف. الشريط يمتلئ من اليسار بينما الخطوة الأولى على اليمين. الحل: اربط اتجاه التعبئة بالاتجاه المنطقي، واختبر الخطوات من الأولى إلى الأخيرة. الاختبار: أكمل خطوة وتأكد أن الشريط تحرك للأمام بصرياً.
اقتطاع وارتفاع سطر مضبوطان على اللاتينية. النص العربي يُقطع في منتصف الكلمة، أو تتداخل النقاط فوق الحروف. الحل: ارتفاع سطر أكبر، ومساحة رأسية إضافية، واختبار بأسماء طويلة. الاختبار: استخدم عنواناً من 60 حرفاً عربياً في أضيق عمود.
بريد وPDF متروكان LTR. القوالب تُنسخ من الإنجليزية بلا اتجاه، فتظهر الرسالة معكوسة في Outlook. الحل: direction: rtl، وخط عربي احتياطي، واختبار على Gmail وOutlook وiPhone. الاختبار: أرسل الرسالة إلى نفسك وافتحها في ثلاثة عملاء.
اختبار سريع في عشرين دقيقة
لا تحتاج فريقاً كاملاً لاكتشاف معظم هذه الأخطاء. تحتاج جهازاً عربياً، ومحتوى حقيقياً، وعشرين دقيقة.
من القراءة إلى التنفيذ
تريد بناء هذا، لا قراءته فقط؟
أرسل لنا المشكلة التي تقف خلف المقال. سنخبرك بما يتطلبه الحل وتكلفته وما إذا كنا الفريق المناسب.
بدّل اللغة في منتصف مهمة. هل بقي التركيز في مكانه أم قفز إلى عنصر آخر؟
املأ نموذجاً بالكيبورد فقط. هل ترتيب Tab يتبع القراءة العربية؟
استخدم أطول نص حقيقي. اسم شركة، رسالة خطأ، عنوان خدمة. لا تستخدم نصاً بديلاً.
أدخل بريداً ورقماً في جملة عربية. هل انقلبت الأقواس أو علامات الترقيم؟
افتح قارئ الشاشة. هل يقرأ الترتيب الصحيح، وهل يلفظ الأرقام كما تتوقع؟
كبّر إلى 200%. هل يبقى النص مقروءاً والزر قابلاً للنقر؟
اطبع صفحة أو ولّد PDF. هل الاتجاه والخط سليمان؟
افتح البريد على هاتف. هل يظهر RTL في عميل البريد؟
الخط والأرقام والنصوص المختلطة
العربية تحتاج خطاً مصمّماً للواجهات، لا خطاً تحريرياً رفيعاً. Noto Kufi Arabic وIBM Plex Sans Arabic خياران مفتوحان بترخيص واضح، وكلاهما يغطي الأوزان التي تحتاجها الواجهة. اضبط ارتفاع السطر بما يترك مساحة للنقاط والتشكيل، واختبر الأحجام الصغيرة على شاشة هاتف حقيقية.
الأرقام قرار منتج لا قرار مصمّم. اختر سياسة واحدة، واكتبها في دليل المحتوى، وطبّقها في الواجهة والتقارير والفواتير. الأهم أن يبقى المبلغ والنطاق والتاريخ مقروءين بالترتيب الصحيح عند خلط العربية والإنجليزية.
إصلاح هذه الأخطاء ليس مشروعاً منفصلاً دائماً. غالباً يدخل داخل جولة تصميم أو تدقيق قائمة. لمعرفة أين يقع ضمن النطاق، راجع تكلفة تصميم تجربة المستخدم في السعودية.
ما يجب أن يدخل نظام التصميم
إذا كانت هذه الأخطاء تتكرر، فالسبب أن نظام التصميم لا يعرف الاتجاه. أضف أربعة أشياء: رموزاً منطقية للمسافات والمحاذاة، وسجل أيقونات يحدد الاتجاهية، وأنماطاً جاهزة للنماذج والجداول والتنقل، وقواعد محتوى للأرقام والنصوص المختلطة. ثم أضف قصصاً في Storybook تعرض كل مكوّن في الاتجاهين، حتى يرى المهندس الفرق قبل البناء.
الأسئلة الشائعة
هل RTL يعني قلب كل شيء؟ لا. يعكس التخطيط وترتيب القراءة، ويترك دلالة الأيقونات والشعارات كما هي.
هل نستخدم الأرقام العربية أم الغربية؟ حسب الجمهور والسياق. الأهم أن تكون السياسة واحدة وموثّقة، لا أن تختلف بين شاشتين.
هل نحتاج خطاً عربياً مختلفاً؟ غالباً نعم. الخط اللاتيني لا يغطي وصلات الحروف والقياسات الرأسية العربية.
كيف نختبر دون متحدثين بالعربية؟ لن تحصل على نتيجة موثوقة. تحتاج مراجعاً عربياً على الأقل، وأفضل من ذلك خمسة مستخدمين.
ما أخطر خطأ في القائمة؟ ترتيب التبويب والمحتوى المختلط، لأنهما يسببان إدخال بيانات خاطئ لا مجرد إزعاج بصري.
المصادر
- Material 3: ثنائية الاتجاه وRTL — التخطيط يعكس المحاذاة والترتيب، والمكوّنات تُصمّم للاتجاهين.
- Google Fonts: Noto Kufi Arabic — خط واجهات عربي مفتوح.
- IBM Plex Sans Arabic — بديل مفتوح بترخيص واضح.
- تصميم وبحث تجربة المستخدم — كيف نصمّم الاتجاهين من أول إطار.
