دعم العربية يتجاوز محاذاة النص إلى اليمين. اتجاه القراءة والأيقونات والمسافات والأرقام والمحتوى المختلط كلها تؤثر في شعور المستخدم بأن الواجهة صُممت له بالفعل.
الفكرة الأساسية
استخدم الخصائص المنطقية مثل margin-inline بدل ربط كل المسافات باليمين واليسار. احتفظ باتجاه واضح للروابط والأكواد والأرقام عند الحاجة، وراجع الأيقونات التي تعبّر عن الحركة دون قلب العلامات التجارية أو رموز التشغيل عشوائيًا.
خطوات عملية
- اضبط dir على مستوى المستند ثم عالج المقاطع ذات الاتجاه المختلف محليًا.
- اختبر بريدًا إلكترونيًا ورابطًا طويلًا داخل جملة عربية، وراجع موضع علامات الترقيم.
- راجع ترتيب أزرار السابق والتالي وحركة الانتقال في الشرائح.
مثال تطبيقي
قد يحتاج حقل رابط المشاركة إلى dir=ltr بينما تبقى تسميته عربية. بهذه الطريقة يستطيع المستخدم قراءة العنوان ونسخه دون اضطراب مواضع الشرطات والعلامات.
خطأ شائع ينبغي تجنبه
لا تعكس الصفحة كاملة باستخدام transform. هذا يقلب الصور والنصوص أيضًا، ولا يصحح الدلالة أو ترتيب التنقل بلوحة المفاتيح.
مثال تقني مبسّط
المقتطف التالي يوضح الفكرة، ويحتاج إلى تكييف مع بنية مشروعك ومساراته والتحقق المناسب قبل استخدامه.
.card { padding-inline: 20px; margin-block-end: 16px; }
.card__icon { margin-inline-end: 8px; }للتوسع في الموضوع
صور توضيحية: الغلاف من Unsplash، الصورة الداخلية من Unsplash. ترخيص الاستخدام.
