دليل RTL للمطورين: واجهة عربية تتجاوز المحاذاة

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

استخدم الاتجاه المنطقي

في CSS، فضّل الخصائص المنطقية مثل margin-inline-start وpadding-inline-end بدل ربط المسافة باليمين واليسار. بذلك تتبع المسافات اتجاه اللغة من دون كتابة نسختين متعارضتين لكل مكوّن. وينطبق الأمر على مواضع العناصر وحدودها. استخدم start وend عندما يكون المقصود بداية القراءة ونهايتها، واحتفظ بالاتجاه الفيزيائي للأشياء التي لها موضع ثابت بطبيعتها.

ليس كل رمز بحاجة إلى انعكاس. سهم الانتقال إلى الخطوة التالية يتبع اتجاه التدفق غالبًا، بينما شعار العلامة التجارية أو رمز تشغيل الوسائط لا يُعكس لمجرد تبديل اللغة. اختبر معنى الرمز في سياقه. وفي مخططات الزمن والجداول، وضّح ترتيب القيم بدل الاعتماد على افتراض واحد لجميع المستخدمين.

النص المختلط يحتاج إلى عزل

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

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

الخط والنماذج

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

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

التحقق على شاشة صغيرة

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

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