تصميم RTL ليس قلب الواجهة أفقيًا فقط. هو ترتيب طبيعي لعين تقرأ من اليمين، مع عناية خاصة بالأيقونات والبيانات المختلطة والفراغات.
رتّب التسلسل البصري
ضع الشعار والعنوان وبداية القائمة في الموضع الذي يتوقعه القارئ العربي. استخدم خصائص CSS المنطقية مثل margin-inline وpadding-inline؛ فهي تحترم اتجاه الصفحة ولا تفترض جهة ثابتة.
| العنصر | قرار RTL جيد | ما يسبب ارتباكًا |
|---|---|---|
| الأيقونات | تعكس سهم الرجوع فقط عندما يتغير المعنى | قلب كل الأيقونات بلا مراجعة |
| الأرقام | تعزل عند الحاجة داخل سياق LTR | ترك التاريخ والرابط يتداخلان مع النص |
| البطاقات | تبدأ المعلومة الأساسية من اليمين | نقل تخطيط إنجليزي كما هو |
مقارنة بين قرار تصميم مقصود ونسخ آلي للواجهة.
راجع الواجهة على الهاتف
مراجعة سريعة قبل النشر
- افتح الصفحة بعرض 320 بكسل وتأكد أن لا شيء يخرج أفقيًا.
- راجع الترقيم والأقواس وعناوين الأقسام الطويلة.
- اختبر الروابط الإنجليزية وعناوين البريد داخل فقرة عربية.
- تنقل بلوحة المفاتيح وتأكد من ظهور مؤشر التركيز.
مكونات تستحق الاختبار
صفحة خدمة
العنوان والفائدة والزر تظهر بترتيب عربي واضح.
جدول مقارنة
اجعله قابلًا للتمرير على الشاشات الصغيرة.
أفضل اختبار لاتجاه الواجهة هو أن تبدو طبيعية قبل أن يلاحظ القارئ أنها RTL.
هل يجب قلب كل الأسهم؟
اقلب الأسهم التي تعني التقدم والرجوع ضمن اتجاه القراءة، لكن لا تقلب رمزًا تقنيًا أو علامة لها معنى ثابت عالميًا.
كيف أتعامل مع روابط إنجليزية؟
ضعها ضمن عنصر له
dir=“ltr” عندما تختلط بجملة عربية، واختبر النتيجة على الهاتف.يلا سوي
هل أنت مستعد لتحويل فكرتك إلى موقع؟
اكتب فكرتك بالعربي، واترك يلا سوي يساعدك في بناء موقع جاهز ثم تعديله كما تريد.
ابدأ موقعك الآن