الاتجاه من اليمين إلى اليسار كما ينبغي: دروس من موقع عربي أولًا
خصائص CSS المنطقية، والأسهم المعكوسة، والأرقام اللاتينية، والخطوط التي لا تحوي حروفًا عربية: تفاصيل تجعل الواجهة العربية أصيلة لا مقلوبة.
دحمان عبد الملك
23 أكتوبر 2026قراءة 3 دقائقالجزء 2 من 3
معظم عملي لعملاء يتحدثون العربية، وقد رأيت ما يحدث عادةً للنسخ العربية من المواقع: التصميم الإنجليزي نفسه، معكوسًا في اللحظة الأخيرة، بأسهم تشير إلى الجهة الخطأ وأرقام تُقرأ بالمقلوب.
في هذا الموقع، كانت العربية جزءًا من التصميم منذ اليوم الأول. هذه هي التفاصيل التي صنعت الفرق.
فكّر في البداية والنهاية، لا في اليمين واليسار
ضبط dir="rtl" على الصفحة يعكس اتجاه النص، لكن كل margin-left وleft: 0 في ملف التنسيق يبقى في مكانه تمامًا. والحل هو التوقف عن كتابة اليمين واليسار أصلًا.
تصف خصائص CSS المنطقية بداية السطر ونهايته بدلًا من ذلك، ولدى Tailwind ما يقابلها لكل شيء: ps- وpe- للحشو، وms- وme- للهوامش، وborder-s وinset-s وtext-start. عمود التواريخ في الخط الزمني، والنقاط الزرقاء في هذا المقال، والفواصل بين الأرقام، والقائمة المنزلقة كلها تستخدمها. وفي العربية تنتقل كلها إلى اليمين دون أي CSS إضافي.
@utility square-bullets {
& ul > li {
@apply relative ps-5;
}
& ul > li::before {
content: '';
@apply absolute inset-s-0 top-[0.7em] size-1.5 bg-primary;
}
}اعكس ما يشير، لا ما يُعرض
الأسهم التي تعني «التالي» أو «رجوع» يجب أن تشير إلى الجهة الأخرى في العربية. أما الشعار وزر التشغيل وعلامة الصح فلا. لذا لا تنعكس إلا الأيقونات الدالّة على اتجاه، وفي الصفحات من اليمين إلى اليسار فقط:
<ArrowRightIcon aria-hidden className="size-4 rtl:rotate-180" />أما السهم المائل الذي يعني «يُفتح في مكان آخر» فيُعكس أفقيًا بـ rtl:-scale-x-100، فيبقى متجهًا إلى الأعلى.
أبقِ الأرقام من اليسار إلى اليمين
تُكتب العربية من اليمين إلى اليسار، لكن الأرقام داخلها تُقرأ من اليسار إلى اليمين. يصحّ ذلك مع الرقم المفرد ويتعطّل مع المدى: قد تظهر «15–25%» على شكل «25%–15». قاعدتان تصلحان ذلك:
- الأرقام التي تمزج الخانات بالرموز تأخذ اتجاهها الخاص:
<span dir="ltr">15–25%</span>. - التواريخ والمدد تُكتب بالأرقام اللاتينية، وهي المعتادة في الجزائر وفي شمال إفريقيا عمومًا، فتتّسق مع الأرقام المكتوبة في نظام المحتوى.
// Arabic uses Latin digits to match the CMS content ("19/20", "15–25%").
const INTL_LOCALES: Record<Language, string> = {
en: 'en',
ar: 'ar-u-nu-latn',
fr: 'fr',
}تحقّق مما تحويه خطوطك فعلًا
لعائلة IBM Plex خط عربي ممتاز هو IBM Plex Sans Arabic. أما IBM Plex Mono، الخط أحادي المسافة للتسميات والشيفرة، فلا يحوي أي حرف عربي. كل كلمة عربية في تسمية أحادية المسافة كانت تُعرض بخط النظام البديل، بحروف لا تتصل ببعضها.
الحل سطر واحد في قائمة الخطوط: Plex Mono للنص اللاتيني، ثم Plex Sans Arabic لكل ما لا يستطيع Plex Mono رسمه.
@theme {
/* Plex Mono has no Arabic letters; without Plex Sans Arabic next, browsers
fall back to a system monospace font that renders Arabic disconnected. */
--font-mono:
'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, SFMono-Regular,
Menlo, Consolas, monospace;
}التفاصيل الصغيرة
- تحتاج العربية مسافة بين الأسطر أكبر من النص اللاتيني، لذا تستخدم الصفحات العربية ارتفاع سطر 1.75.
- القوائم التي تُجمع في الشيفرة تستخدم الفاصلة العربية «،» بدل «,».
- الأحرف الأولى، كتلك التي تظهر لمشروع بلا صورة، يُفصل بينها بمحرف غير مرئي هو «فاصل منع الوصل». من دونه يتصل الحرفان العربيان فيُقرآن ككلمة.
اختبره كما يفعل الزائر
لا شيء من هذا يظهر في مراجعة الشيفرة. تُفحص كل صفحة في هذا الموقع بالعربية في متصفح حقيقي، وبعرض الهاتف أيضًا: هل تنزلق القائمة من اليسار؟ هل تشير الأسهم إلى الجهة الصحيحة؟ هل يتجاوز شيء حدود الشاشة؟ يستغرق ذلك وقتًا أطول من فحص الصفحة الإنجليزية، وهو السبيل الوحيد لأن يحصل الزائر العربي على موقع يشعر أنه صُنع له.
يتناول الجزء الثالث ما وراء المحتوى نفسه: كيف تتحوّل نصوص Markdown والشيفرة القادمة من نظام المحتوى إلى HTML آمن ومُلوّن على الخادم.
النشرة البريدية
تصلك المقالات الجديدة على بريدك
رسالة واحدة لكل مقال جديد. يمكنك إلغاء الاشتراك في أي وقت.
تفضّل قارئ الخلاصات؟ خلاصة RSS
الردود
تواصل
لديك مشروع في ذهنك؟
لنبنِه معًا.
متاح لوظائف عن بُعد ولمشاريع العمل الحر.