قايمة مراجعة الموقع العربي (RTL) قبل الإطلاق

اضبط الاتجاه واللغة صح

الصفحة لازم تعلن dir="rtl" وlang="ar" على العنصر الأساسي، عشان المتصفحات وقارئات الشاشة ومحركات البحث تتعامل مع النص كعربي. ولو الموقع بلغتين، اربط النسختين بـhreflang وادّي كل واحدة عنوان canonical خاص بيها.

ابني التخطيط بالخصائص المنطقية

بدل margin-left وpadding-right استخدم خصائص CSS المنطقية زي margin-inline-start وpadding-inline-end. دي بتتبع اتجاه القراءة، فنفس ملف التنسيق بيشتغل بالعربي والإنجليزي من غير نسخة تانية معكوسة.

إيه اللي يتعكس وإيه اللي لأ

اعكس اللي بيعبّر عن ترتيب القراءة، وسيب اللي مالوش علاقة:

• //اعكس: ترتيب القوائم، أسهم الرجوع والتالي، مؤشرات التقدم، والسلايدر والكاروسيل
• //متعكسش: اللوجوهات والصور وأزرار تشغيل الفيديو

النص المختلط عربي وإنجليزي

أسماء البراندات والإيميلات والروابط وأرقام الموبايل جوه جملة عربي ممكن علامات الترقيم تتلخبط حواليها. علّمها إنها من اليسار لليمين (dir="ltr" أو عنصر bdi) عشان تحتفظ باتجاهها من غير ما تبوّظ الجملة حواليها.

الأرقام والعملة

اختار شكل أرقام واحد، أرقام غربية (0-9) أو هندية عربية (٠-٩)، واستخدمه في كل مكان: الأسعار والتواريخ وأرقام الموبايل والفورم. خلط الاتنين في صفحة واحدة شكله مهمل وبيلخبط المستخدم. وكذلك اكتب العملة بشكل واحد.

الخطوط والطباعة

العربي محتاج اهتمام أكتر من مجرد تغيير الخط:

• //اختار خط بدعم عربي كامل وأوزان متعددة، زي Cairo أو Tajawal
• //اعمل ارتفاع سطور أكبر من النص اللاتيني
• //متضيفش letter-spacing للعربي أبدًا: بيكسر اتصال الحروف ببعض

الفورم

حقول الإيميل والموبايل والرابط لازم تفضل من اليسار لليمين حتى في فورم عربي، عشان اللي المستخدم بيكتبه ميتلخبطش. اكتب رسائل التحقق بالعربي، واستخدم قيم autocomplete صح، وصمم حقول العنوان للمحافظات والأحياء المصرية مش لشكل أجنبي.

البحث والبيانات

المستخدم العربي بيكتب نفس الكلمة بأكتر من إملاء: أشكال الألف المختلفة، والياء والألف المقصورة، والتاء المربوطة والهاء، بتشكيل أو من غيره. وحّد شكل النص في البحث عشان الناس تلاقي اللي يقصدوه مش بس اللي كتبوه بالظبط.

اختبر زي المستخدم

راجع كل قالب على موبايلات حقيقية، وخلي حد عربي يقرا النص، وتأكد من الصفحات المطبوعة وفواتير الـPDF اللي بتتنسي كتير. أغلب مشاكل الـRTL بتتلاقى بالبصر مش بمراجعة الكود.