واجهات عربية أولًا: الاتجاه من اليمين لليسار أكبر من dir="rtl"

كل موقع أبنيه ثنائي اللغة، ونقرة عربية أولًا. ومع الوقت جمعت قائمة بالأشياء التي تنكسر حين تُعامَل العربية كطبقة ترجمة لا كلغة أساسية. هذه نسختها المختصرة.

#استخدم الخصائص المنطقية في كل مكان

إن كتبت في CSS ‏margin-left فسيكون خطأ في إحدى لغتيك. الخصائص المنطقية تصف القصد لا الاتجاه:

.card {
  padding-inline: 24px;        /* يمين + يسار */
  margin-inline-start: 12px;   /* يسار في الإنجليزية، يمين في العربية */
  border-inline-start: 2px solid var(--signal);
  text-align: start;
}

وحين يتكلم ملف التنسيق كله بلغة inline-start وinline-end، يكفي تغيير dir على عنصر <html> لتنعكس الواجهة كلها مجانًا.

#اعكس المعنى، لا كل شيء

الأسهم التي تعني «للأمام» أو «للخلف» يجب أن تنعكس. أما الأيقونات التي تمثل أشياء حقيقية، كالساعة وزر التشغيل والشعار، فلا. في هذا الموقع يجري خط النبض في الواجهة من اليمين لليسار في النسخة العربية وينتهي بنقرة على اليسار، لأن هذا هو اتجاه القراءة. أما محور الزمن في الرسوم البيانية فقرار أصعب؛ اجعله ثابتًا وضع عليه عنوانًا.

#أعطِ العربية طباعتها الخاصة

الحروف العربية متصلة، وصواعدها ونوازلها أطول، وتبدو أصغر من اللاتينية بالمقاس نفسه. بعض القواعد التي أتبعها:

• لا تضف تباعدًا بين الحروف في العربية أبدًا، فهو يقطع اتصالها.
• زد ارتفاع السطر، عادة إلى حوالي 1.8 للنص.
• قلّل مقاسات العناوين قليلًا، لأن العناوين العربية أثقل بصريًا.
• اختر عائلة خطوط مصممة للعربية مثل IBM Plex Sans Arabic، بدل الاعتماد على الخطوط البديلة.

#اعزل ما يجب أن يبقى من اليسار لليمين

النص المختلط هو مخبأ الأخطاء. جملة مثل «أبني منتجات Full-stack بـ Next.js» تخلط اتجاهين، وقد تقفز علامات الترقيم إلى الجهة الخطأ. ضع أسماء المنتجات اللاتينية والكود والبريد والروابط والأرقام ذات الوحدات داخل عنصر معزول:

<p>البريد: <bdi>hello@example.com</bdi></p>

واستخدم شرطة غير قابلة للكسر في كلمات مثل «Full‑stack» حتى لا تنقسم بين سطرين.

#قرّر شكل الأرقام عن قصد

القارئ المصري مرتاح للأرقام الغربية (0–9) والأرقام الهندية (٠–٩). اختر واحدًا لكل منتج والتزم به. في لوحات التحكم والأسعار والإحصاءات أستخدم الأرقام الغربية في اللغتين حتى تتحاذى ويمكن نسخها.

#النماذج هي أول مكان تنكسر فيه الثقة

• حقول البريد والهاتف والروابط يجب أن تكون dir="ltr" حتى في الصفحات العربية.
• رسائل الخطأ يجب أن تُكتب، لا أن تُترجم آليًا.
• النص التوضيحي داخل الحقل يختفي بمجرد الكتابة، فيجب أن تحمل العناوين المعنى.

#اكتب العربية أولًا

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

#فحص سريع

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