فريق Barnamix
قائمة عملية لإطلاق موقع عربي متوافق مع RTL تشمل الخطوط، النماذج، الأيقونات، الأداء، إمكانية الوصول، وSEO متعدد اللغات.
تبديل النص من الإنجليزية إلى العربية ليس كافيًا لبناء موقع عربي جيد. على المطوّر أن يراجع اتجاه القراءة، وتوزيع العناصر، والأرقام، والنماذج، والخطوط، ورسائل الخطأ، ومحركات البحث. قد يبدو الموقع سليمًا في الصفحة الرئيسية، ثم تظهر مشكلات مربكة عند ملء نموذج أو عرض بريد إلكتروني داخل جملة عربية.
هذا الدليل قائمة فحص عملية قبل إطلاق موقع عربي أو ثنائي اللغة.
1. حدّد اللغة والاتجاه بطريقة صحيحة
ينبغي للصفحة العربية تحديد lang="ar" وdir="rtl" على عنصر HTML الأساسي، بينما تستخدم النسخة الإنجليزية lang="en" وdir="ltr". لا تعتمد على محاذاة CSS وحدها؛ الاتجاه خاصية دلالية تؤثر أيضًا في ترتيب علامات الترقيم والنص المختلط.
<html lang="ar" dir="rtl">
...
</html>
عندما يكون محتوى حقل من إدخال المستخدم ويمكن أن يكون عربيًا أو إنجليزيًا، قد يفيد dir="auto". ولعرض أسماء مستخدمين بلغات مختلفة داخل نص ثابت، يساعد عنصر <bdi> في عزل اتجاه النص. هذا مهم خصوصًا للأرقام والرموز الملاصقة للكلمات.
2. استخدم خصائص CSS المنطقية
تجنب ربط التصميم كله بخصائص left وright. استخدم قدر الإمكان margin-inline-start وpadding-inline-end وinset-inline-start، لأنها تتكيف مع اتجاه المستند. اختبر انعكاس عناصر Flexbox وGrid بعناية، ولا تنس أن اتجاه الصفحة لا يعني تلقائيًا عكس كل رسم أو صورة.
مثال: سهم «التالي» في شريط خطوات قد يحتاج إلى عكس الاتجاه في العربية، لكن أيقونة تشغيل الفيديو أو شعار الشركة لا ينبغي عكسها اعتباطيًا.
3. اختر خطًا عربيًا واضحًا ومتوازنًا
اختبر أشكال الأحرف العربية في الأحجام الصغيرة، وتباعد السطور، وسماكات الخط، وطول العناوين. من الخيارات الملائمة لواجهات الأعمال Noto Kufi Arabic. خطط لأوزان محدودة بدل تحميل ملفات خطوط كثيرة، واضبط ظهور الخط الاحتياطي أثناء التحميل حتى لا تقفز العناصر.
لا تترجم الأزرار حرفيًا إذا زادت غموضها. قد تكون «أرسل الطلب» أوضح من «إرسال» عندما يتطلب السياق تحديد الفعل.
4. راجع النصوص المختلطة والأرقام
المواقع العربية تتضمن أرقام هاتف، وبريدًا إلكترونيًا، وروابط، ورموز عملات، وأسماء ملفات. اختبر هذه الحالات خاصة داخل الجداول، والإشعارات، ورسائل النجاح، والفواتير. اجعل الحقول المعروفة مثل البريد الإلكتروني ذات اتجاه يسار إلى يمين عند الحاجة، واحتفظ بنسخة قابلة للنسخ الصحيحة من القيم.
انتبه إلى صياغة التاريخ والعملة ووحدات القياس. اختيار الأرقام العربية أو اللاتينية قرار تجربة مستخدم مرتبط بالجمهور، وليس مجرد تغيير اتجاه. استخدم أدوات التنسيق المحلية مثل Intl.DateTimeFormat وIntl.NumberFormat بدل تركيب القيم يدويًا.
5. اختبر تجربة الهاتف من البداية
راجع قائمة التنقل، والقوائم المنسدلة، والبطاقات، والجداول الواسعة، ولوحات المفاتيح الافتراضية، ومواضع الأزرار. قد يظهر خطأ RTL فقط عند عرض 360 بكسل أو عند تكبير النص. لا تكتفِ بلقطة شاشة لنسخة سطح المكتب.
راجع أيضًا التباين وإمكانية استخدام الموقع بلوحة المفاتيح وتسميات النماذج. تتبع مبادئ WCAG في تصميم تفاعل مفهوم وقابل للوصول.
6. لا تهمل الأداء الحقيقي
راقب مؤشرات تجربة المستخدم الأساسية: LCP لسرعة ظهور المحتوى الرئيسي، وINP للاستجابة للتفاعل، وCLS لثبات التخطيط. القيم الإرشادية الجيدة المنشورة من Google هي LCP خلال 2.5 ثانية أو أقل، وINP عند 200 مللي ثانية أو أقل، وCLS عند 0.1 أو أقل، عند قياس شريحة المستخدمين المناسبة.
اضغط الصور، وحمّل الخطوط الضرورية فقط، واستخدم أحجامًا معروفة للصور لتقليل القفزات البصرية. اختبر على شبكات وأجهزة تشبه تلك التي يستخدمها جمهورك بدل الاكتفاء بجهاز المطور.
7. هيّئ SEO للنسختين العربية والإنجليزية
أنشئ لكل لغة رابطًا واضحًا، مثل /ar/... و/en/...، ومحتوى حقيقيًا بلغتها. اختر عناوين وأوصافًا تعكس طريقة بحث الجمهور، لا ترجمة حرفية جامدة. عند وجود نسختين متكافئتين، استخدم روابط hreflang متبادلة تشير كل منها إلى نفسها وإلى النسخة الأخرى، وأضف canonical مناسبًا لكل صفحة.
تأكد أن الروابط قابلة للفهرسة وأن ملفات sitemap.xml تشمل الصفحات المطلوبة. ولا تجعل زر تبديل اللغة يعيد المستخدم إلى الرئيسية إذا توفرت له الصفحة المقابلة.
8. اختبر النماذج ورسائل النظام
املأ كل نموذج بمحتوى عربي وإنجليزي ومختلط. تحقق من ترتيب حقول الهاتف والدولة ورمز الاتصال، ومن رسائل التحقق والأخطاء، ومن رسائل البريد التلقائية بعد الإرسال. اختبر البحث الداخلي، والترقيم، والتصفية، ونوافذ التأكيد، وإمكانية الرجوع خطوة إلى الخلف.
قائمة الفحص النهائية قبل النشر
- الصفحة العربية تحمل
lang="ar"وdir="rtl"، والإنجليزية محددة بصورة صحيحة. - القوائم والأسهم والحقول المختلطة تظهر باتجاه متوقع.
- النصوص العربية مقروءة على الهاتف والكمبيوتر مع تكبير الخط.
- أرقام الهاتف والعناوين والبريد والروابط قابلة للقراءة والنسخ.
- استمارات التواصل تعمل وتظهر أخطاء واضحة بالعربية.
- الصور والخطوط محسّنة ونتائج الأداء مقبولة على أجهزة حقيقية.
- روابط اللغات و
hreflangوcanonicalوخرائط الموقع مضبوطة. - تم اختبار لوحة المفاتيح والتباين ووصولية العناصر الأساسية.
- هناك نسخة احتياطية وخطة رجوع في حالة فشل النشر.
أسئلة شائعة
هل يكفي إضافة direction: rtl في CSS؟
لا. الأفضل تحديد اتجاه المستند دلاليًا عبر dir، ثم استخدام CSS المنطقي للتخطيط.
هل يجب عكس كل الأيقونات؟
لا. تُعكس عادةً عناصر تدل على الاتجاه أو التسلسل عند الحاجة، بينما تبقى الشعارات والرموز العالمية التي لا تدل على الاتجاه كما هي.
هل يمكن أن يكون الموقع العربي والإنجليزي في النطاق نفسه؟
نعم، باستخدام مسارات منفصلة وواضحة وربط لغوي صحيح بين النسخ.
إطلاق جيد يعني اختبارًا جيدًا
أفضل وسيلة لتقليل أخطاء RTL هي إدراج العربية في التصميم والاختبارات منذ أول نسخة، لا إضافتها في نهاية المشروع. إذا كنت تخطط لموقع عربي أو ثنائي اللغة، راجع تطوير المواقع لدى Barnamix أو تواصل معنا لمراجعة المتطلبات قبل الإطلاق.
