أشيع أخطاء تصميم مواقع عربية بالاتجاه RTL لا تظهر في التصميم بل في التنفيذ: خصائص CSS فيزيائية لا تنعكس، ورسومات SVG تتجاهل اتجاه الصفحة، وأرقام ورموز تنقلب مواقعها داخل الجملة العربية، وقيود في أدوات البناء مثل Elementor. الحل ليس «قلب الصفحة»، بل كتابتها باتجاه منطقي من البداية، ثم التحقّق منها بالقياس.
هذا المقال ليس قائمة نظرية. كل خطأ فيه واجهناه فعلاً أثناء إعادة بناء موقع noursky.com صفحةً صفحة، وكل حل فيه طُبّق واختُبر. وهو موجّه لأصحاب الشركات في السعودية والإمارات ولفرق التطوير التي تبني مواقع ثنائية اللغة. وإن كنت تخطّط لموقع جديد، فاطّلع على خدمة تصميم المواقع وتجربة المستخدم من NourSky.
لماذا يستحق الموقع العربي عناية تقنية خاصة؟
لأن جمهوره متصل بالكامل ومحتواه نادر. فبحسب DataReportal، بلغ عدد مستخدمي الإنترنت في السعودية 33.9 مليون مطلع 2025 بنسبة انتشار 99.0%، وفي الإمارات 11.1 مليون بنسبة 99.0%. وفي المقابل، تُظهر بيانات W3Techs في سبتمبر 2026 أن العربية لغة محتوى 0.6% فقط من المواقع التي تُعرف لغتها، مقابل 49.5% للإنجليزية.
النتيجة أن أغلب القوالب والإضافات وأدوات البناء صُمّمت أولاً للإنجليزية، ثم «دُعمت» العربية لاحقاً. والفجوة بين الدعم الشكلي والدعم الصحيح هي مصدر الأخطاء التالية.
هل يكفي أن تضع dir=”rtl” على الصفحة؟
لا. سمة dir="rtl" تعكس اتجاه تدفّق النص وترتيب عناصر flex والجداول، لكنها لا تعكس أي خاصية CSS مكتوبة بالاتجاهات الفيزيائية (left وright)، ولا تؤثّر في رسومات SVG، ولا تحلّ مشكلات المقاطع اللاتينية داخل الجملة العربية. هذه هي الأخطاء التي تبقى بعد «التعريب».
ما أشهر أخطاء تصميم المواقع العربية RTL وحلولها؟
1. الإزاحة الفيزيائية لا تنعكس
عنصر موضوع بـ left: 24px يبقى على اليسار في الصفحة العربية، فتظهر أيقونة أو شارة في الجهة الخاطئة. الحل هو الخصائص المنطقية (CSS Logical Properties): inset-inline وinset-block بدل left/right/top/bottom، وmargin-inline وpadding-inline بدل نظيراتها الفيزيائية. وتعرّف MDN خاصية inset-inline بأنها تحدّد إزاحة البداية والنهاية في الاتجاه السطري، و«تُقابِل الخصائص الفيزيائية بحسب نمط الكتابة والاتجاه واتجاه النص».
2. التوسيط بـ translate يتحرّك في الاتجاه الخاطئ
النمط الشائع للتوسيط، left:50% مع translate:-50%، ينكسر في RTL لأن القيمة السالبة تسحب العنصر نحو اليسار دائماً مهما كان اتجاه الصفحة. الحل الذي اعتمدناه: inset-inline:0; margin-inline:auto مع عرض محدّد، فيتوسّط العنصر بلا أي حساب اتجاهي.
3. رسومات SVG لا تعرف اتجاه الصفحة
عنصر <svg> يرسم بإحداثيات مطلقة ولا يتأثّر بـ dir. أي رسم فيه تدفّق من خطوة إلى خطوة، أو ترقيم، أو أسهم، سيبقى يقرأ من اليسار إلى اليمين داخل صفحة عربية. الحل الوحيد الصحيح هو إعادة رسمه بإحداثيات معكوسة، مع قلب قيمة sweep-flag في الأقواس (A) حتى تنحني بالاتجاه الصحيح. وانتبه: داخل رسم RTL، text-anchor="end" لا تعني «اليمين»؛ فهي مرتبطة بنهاية النص لا بجهة الشاشة، فراجع كل تسمية نصية يدوياً.
4. المحارف المحايدة تنقلب: «3–5» تصبح «5–3»
الشرطة القصيرة – وعلامة الضرب × محارف «محايدة» في خوارزمية Unicode ثنائية الاتجاه (Bidi)، فتأخذ اتجاه ما حولها. نطاق مثل «3–5 أيام» قد يُعرض «5–3». الحل: unicode-bidi: plaintext على العنصر الذي يحمل النطاق.
5. المحارف الضعيفة تتحرّك: «$75,600» تصبح «75,600$»
رمز العملة $ محرف «ضعيف» الاتجاه، فقد يقفز إلى الجهة الأخرى من الرقم داخل سياق عربي. الحل مختلف عن السابق: unicode-bidi: isolate مع direction: ltr على المبلغ.
6. النقطة تقفز إلى أول الجملة
جملة عربية تنتهي بمقطع لاتيني، مثل «نبني المواقع بـ Elementor.»، قد تُعرض والنقطة في غير موضعها لأنها محايدة وتلتصق بالمقطع اللاتيني. الحل: لفّ المقطع اللاتيني بـ <span dir="ltr">. وهذا ما توصي به W3C في مقالها عن الترميز ثنائي الاتجاه:
«لُفّ بإحكام كلَّ عبارة معاكسة الاتجاه بوسم، واستخدم السمة dir على ذلك الوسم.»
7. أسماء المتغيرات وقيم الألوان تنقلب
هذا خطأ يقع فيه من يكتب توثيقاً تقنياً بالعربية: اسم متغير CSS يبدأ بـ -- وقيمة لون تبدأ بـ # كلاهما يبدأ بمحارف محايدة، فينقلبان في صفحة RTL. القاعدة: اعزل كل مقطع لاتيني، مهما كان قصيراً.
8. قيود أدوات البناء: تجربتنا مع Elementor
بنينا كل صفحة مرتين: صفحة HTML مستقلة، وقالب Elementor Pro من Containers فقط (بلا sections ولا columns)، يولّده سكربت يقرأ الصفحة المبنية نفسها فلا ينحرف القالب عنها. وخرجنا بهذه الدروس:
- قيمة
width: 0%تُطبَّق حرفياً فتنهار الأعمدة؛ احذف المفتاح واستخدم flex-grow وflex-shrink. - النسب المئوية يجب أن تُحسب مع الفواصل: أعمدة مجموعها 90% مع ثلاثة فواصل كل منها 40px تتجاوز حاوية عرضها 1112px، فيهبط العمود الأخير سطراً.
- لا يوجد ويدجت جدول في Elementor، لا في النواة ولا في Pro.
- ويدجت Accordion القديم في طريقه للسحب، فاعتمدنا عنصر
<details>الأصلي: بلا JavaScript وصحيح لقارئات الشاشة. - ويدجت الفورم يرسل نص الخيار الظاهر لا رمزاً قصيراً، فأي سكربت يقرأ القيم يحتاج خريطة مرادفات.
9. الحركة التي تُخفي المحتوى
تأثيرات الظهور عند التمرير تعتمد غالباً على IntersectionObserver. وعند التمرير السريع قد تُدمج الإدخالات فتبقى عناصر عالقة على opacity: 0، أي أن المحتوى موجود لكنه غير مرئي. أضفنا مسحاً بتأخير (debounce) كشبكة أمان، وجعلنا كل حركة تحترم prefers-reduced-motion.
10. صفحة 404 كثغرة أمنية
صفحة الخطأ التي تعرض «الرابط الذي طلبته غير موجود» مع المسار نفسه يجب أن تكتبه بـ textContent لا بـ innerHTML، لأن المسار يتحكّم به الزائر، وكتابته كترميز HTML ثغرة Reflected XSS.
كيف تتحقّق من أن الموقع العربي سليم قبل الإطلاق؟
لم نعتمد على المراجعة بالعين. كل صفحة تمرّ ببوابة تحقّق آلية قبل التسليم:
| الفحص | طريقة القياس | معيار النجاح |
|---|---|---|
| التمرير الأفقي | عرض الصفحة على 1440×1000 و390×844 | لا تجاوز أفقياً في أي منهما |
| أخطاء JavaScript | رصد أخطاء المتصفح أثناء التحميل | صفر خطأ |
| نظام التصميم | التحقّق من أن متغيرات التصميم محقونة فعلاً | المتغير يُحلّ إلى قيمة |
| الحركة | تمرير متدرّج حتى يعمل كل IntersectionObserver | صفر عنصر عالق على opacity 0 |
| التباين | تدقيق برمجي وفق WCAG 2.1 AA | 4.5:1 للنص العادي و3:1 للنص الكبير |
| قالب Elementor | فحص بنيوي للـ JSON | لا معرّفات مكرّرة، وكل صف أفقي يعلن اتجاهه على الجوال |
| المحتوى | مقارنة نصوص الصفحة بالقالب | صفر نص مفقود |
ومعيار التباين مأخوذ مباشرةً من WCAG 2.1: نسبة 4.5:1 على الأقل للنص، و3:1 للنص الكبير (18 نقطة، أو 14 نقطة عريضة).
ما رأيناه في مشاريعنا
الدرس الأوضح من إعادة بناء noursky.com أن أخطاء RTL ثلاثة أصناف مختلفة لا صنف واحد: أخطاء تخطيط (الإزاحة والتوسيط) تُحلّ بالخصائص المنطقية، وأخطاء رسم (SVG) لا تُحلّ إلا بإعادة الرسم، وأخطاء نص (Bidi) لكل نوع محرف فيها علاج مختلف. محاولة حلّها كلها بقاعدة واحدة، مثل قلب الصفحة بـ transform أو بإضافة direction عامة، تُصلح صنفاً وتكسر آخر. والدرس الثاني: الفحص البرمجي التقط أخطاء لم تكن لتظهر في مراجعة بصرية سريعة، مثل عناصر عالقة على شفافية صفر لا تظهر إلا بتمرير سريع.
كيف تبدأ إذا كان موقعك الحالي مبنياً للإنجليزية فقط؟
- ابحث في ملفات CSS عن
leftوrightوmargin-leftوpadding-right، واستبدلها بالخصائص المنطقية. - أحصِ كل رسم SVG فيه اتجاه أو ترقيم، وخطّط لنسخة عربية منه.
- راجع كل نطاق أرقام وكل مبلغ مالي وكل مقطع لاتيني داخل النص العربي.
- اختبر على عرض الجوال أولاً، فأغلب زوّارك يأتون منه.
- اجعل الفحوص أعلاه آلية، حتى لا يعود الخطأ مع أول تعديل.
ولمعرفة ما يجعل الموقع يجلب عملاء بعد أن يصبح سليماً تقنياً، اقرأ تصميم مواقع الكترونية للشركات في السعودية: ما الذي يجعل الموقع يجلب عملاء.
موقع عربي يعمل كما صُمّم، على كل شاشة
تبني NourSky (نور سكاي) مواقع ثنائية اللغة للشركات في السعودية والإمارات، بتصحيحات RTL جاهزة من البداية وبوابة تحقّق آلية قبل كل تسليم.
الأسئلة الشائعة
لماذا تنقلب الأرقام والرموز في الموقع العربي؟
لأن محارف مثل الشرطة وعلامة الضرب «محايدة»، ورمز الدولار «ضعيف»، في خوارزمية Unicode ثنائية الاتجاه، فتأخذ اتجاه ما حولها. العلاج يختلف بحسب نوع المحرف: unicode-bidi: plaintext للمحايد، وisolate مع direction: ltr للضعيف.
هل أحتاج نسخة CSS منفصلة للعربية؟
ليس بالضرورة. إذا كُتب CSS بالخصائص المنطقية مثل inset-inline وmargin-inline، فإن ملفاً واحداً يخدم الاتجاهين، وتبقى استثناءات محدودة كالرسومات.
هل يدعم Elementor تصميم مواقع عربية RTL بشكل كامل؟
يدعم الاتجاه الأساسي، لكن تجربتنا كشفت قيوداً عملية: لا ويدجت جدول، وقيمة width: 0% تُطبَّق حرفياً، وويدجت Accordion القديم في طريقه للسحب. لذلك نعتمد Containers فقط وبدائل أصلية مثل <details>.
