تصميم الواجهات العربية وRTL
ليه التصميم بالعربي لعبة مختلفة؟
كل الكورسات اللي هتاخدها — حتى أفضلها — بتفترض إنك بتصمم بالإنجليزي. وبعدين بتيجي تشتغل على منتج عربي وتكتشف إن نص قواعدك محتاجة تتعكس، حرفياً. الواجهة العربية مش ترجمة للواجهة الإنجليزية — هي نظام تصميم كامل بقواعده.
الدرس ده بيجمعلك الخصوصيات الأربعة الكبرى: الاتجاه، الخط، الأرقام، والثنائية اللغوية.
أولاً: الاتجاه — مش كل حاجة بتتعكس
القاعدة الأساسية في RTL إن تدفق القراءة بيمشي من اليمين للشمال، فالـ layout بيتعكس: القوائم الجانبية، اتجاه الأيقونات السهمية، ترتيب الأعمدة، والـ breadcrumbs. لكن أكبر غلطة المبتدئين بيعملوها هي عكس كل حاجة.
بيتعكس:
- اتجاه النصوص والقوائم والجداول
- أسهم "التالي/السابق" والـ chevrons المرتبطة بالتنقل
- مكان الـ sidebar وترتيب أعمدة الفورم
- الـ progress bars (التقدم بيمشي يمين ← شمال)
مبيتعكسش:
- عقارب الساعة وأيقونات الميديا (زرار التشغيل ▶ بيفضل زي ما هو — ده معيار عالمي)
- الأرقام جوه النص (بتتقري شمال ← يمين حتى جوه جملة عربية)
- اللوجوهات والعلامات التجارية
- أيقونات زي البحث والإعدادات (محايدة الاتجاه)
نصيحة عملية: في CSS استخدم الخصائص المنطقية (margin-inline-start بدل margin-left، وtext-align: start بدل right) — كده تصميمك بيشتغل في الاتجاهين من غير تعديل.
ثانياً: الخط العربي — قرارك الأهم
الخط الإنجليزي الغلط بيبان "مش حلو". الخط العربي الغلط بيكسر القراءة نفسها. عندنا دليل كامل لاختيار الخطوط العربية، بس دي الزبدة للواجهات:
- للواجهات والنصوص: Tajawal أو IBM Plex Sans Arabic أو Readex Pro
- للعناوين والهوية: Cairo أو Reem Kufi
- قاعدة التباعد الذهبية:
letter-spacingفي العربي = صفر دايماً. الحروف العربية متصلة، وأي tracking بيكسر الكلمة. التفاصيل الكاملة في دليل مقاسات التايبوغرافي العربي - ارتفاع السطر: العربي محتاج line-height أعلى من الإنجليزي (1.6–1.8 للنصوص) عشان الصواعد والنوازل والتشكيل
تمرين عملي دلوقتي: افتح أداة تنسيق الخطوط، اختار خط مشروعك العربي، وشوف معاينة الواجهة (تاب "واجهة") — دي أسرع طريقة تحس بيها بالفرق بين خط واجهات حقيقي وخط عناوين متلبس غلط.
ثالثاً: الأرقام — المعركة الصامتة
عندك نظامين: الأرقام العربية (1234 — اللي العالم بيسميها Arabic numerals) والأرقام الهندية (١٢٣٤ — المستخدمة في المشرق). القرار مش ذوقي:
- مصر والخليج: الهندية مألوفة في السياقات النصية، لكن الأرقام العربية مهيمنة في الواجهات الرقمية والأسعار والأرقام القابلة للنسخ
- المغرب العربي: الأرقام العربية في كل حاجة
- القاعدة العملية للواجهات: أرقام عربية (1234) للبيانات والأسعار وأرقام التليفونات (عشان النسخ واللصق والفورمات)، وممكن الهندية في النصوص التحريرية لو جمهورك مشرقي
والأهم: الثبات. أسوأ واجهة هي اللي بتخلط النظامين في نفس الشاشة.
رابعاً: الهرمية الثنائية اللغة
أغلب المنتجات العربية فيها إنجليزي مدمج: أسماء براندات، مصطلحات تقنية، أكواد. التحدي إن الخطين يتوازنوا:
- نفس الـ x-height البصري (جرّبهم جنب بعض — العربي غالباً بيبان أصغر في نفس الحجم الرقمي، فبيحتاج درجة أكبر)
- الإنجليزي المدمج في سطر عربي بياخد
direction: ltrجواه تلقائياً — بس اختبر علامات الترقيم حواليه، هي أول حاجة بتتكسر - في الفورمز: الـ placeholder بالعربي يمين، بس حقول زي الإيميل والباسورد خليها
dir="ltr"بمحاذاة شمال — المستخدم بيكتبها بالإنجليزي
أخطاء بتفضح المنتج فوراً
- علامة استفهام إنجليزية (?) في نص عربي بدل العربية (؟)
- أيقونة سهم "رجوع" لسه شمال في واجهة عربية
- التاريخ بصيغة MM/DD في منتج عربي
- تشكيل بيتقص من فوق لإن الـ line-height مضبوط على معايير لاتينية
- خلط ٤ خطوط عربية في شاشة واحدة لإن "كل واحد جه مع مكتبة"
التطبيق
افتح أي تطبيق عربي كبير (نون، طلبات، STC Pay) وحلّل بالشيك ليست دي: إيه اللي اتعكس؟ إيه اللي ثبت؟ أنهي نظام أرقام؟ إزاي وازنوا العربي مع الإنجليزي؟ — هتتعلم من ١٠ دقايق تحليل أكتر من ساعة قراءة.
وبعدها طبّق على شغلك: خد آخر شاشة صممتها بالإنجليزي وحوّلها عربي كامل. التمرين ده بيكشف كل فجوة في فهمك للدرس.
اختبر فهمك
السؤال ١ من …
عاجبك الاختبار؟ كمّل باقي الأسئلة
اكتب اسمك وإيميلك وهتكمّل فوراً — وهيوصلك نصايح تصميم ومصادر حصرية مرة في الأسبوع. مرة واحدة وبتفتح كل اختبارات المسار.
شارك المقال