تصميم المواقع العربية RTL: الدليل الشامل | Blog

# تصميم المواقع العربية RTL: الدليل الشامل

خلاصة سريعة: تصميم موقع عربي RTL حقيقي ليس مجرد "قلب CSS" — بل يبدأ بـ dir="rtl" على مستوى المستند بأكمله، واستخدام خصائص CSS المنطقية (logical properties) بدلاً من left/right، واختيار خط عربي حقيقي بدلاً من الاعتماد على خط النظام الافتراضي، ومعالجة يدوية للأرقام وأرقام الهواتف وأسماء العلامات التجارية اللاتينية التي تبقى من اليسار إلى اليمين داخل صفحة عربية.

إذا كنت تستهدف السوق الإماراتي، فمعظم زوار موقعك ثنائيو اللغة بطبيعة الحال. يشكّل الوافدون نحو 88% من سكان الإمارات البالغ عددهم حوالي 11.6 مليون نسمة، مع جاليات كبيرة من الهند وباكستان وبنغلاديش والفلبين إلى جانب الناطقين بالعربية من الإماراتيين (Global Media Insight, UAE Population Statistics 2026). هذا يعني أن الموقع العربي لا يعمل تقريبًا بالعربية فقط، بل بالعربية والإنجليزية معًا، وغالبًا في الصفحة نفسها عبر زر تبديل اللغة. ضبط هذه الطبقة ثنائية اللغة وثنائية الاتجاه بشكل صحيح تخصص دقيق فعلاً. معظم الوكالات تتعامل معه بمجرد عكس قالب Bootstrap جاهز واعتبار المهمة منتهية، ولهذا لا تزال مواقع حكومية وتجارية "عربية" كثيرة تعرض الأسعار بترتيب معكوس أو أيقونات بحث في الجهة الخاطئة.

هذا الدليل يشرح ما الذي يتعطل فعليًا، وما هو الحل الحقيقي على مستوى CSS والخطوط والاختبار.

لماذا لا يكفي "قلب CSS فقط"

النهج الساذج للتعامل مع RTL هو أخذ الموقع الإنجليزي، وإضافة direction: rtl، وترك المتصفح يعكس كل شيء تلقائيًا. هذا يوصلك تقريبًا إلى 60% من الحل فقط. وهنا تبدأ المشكلات:

المحتوى المختلط ثنائي الاتجاه وليس فقط من اليمين إلى اليسار. فقرة عربية تحتوي على رقم هاتف أو بريد إلكتروني أو اسم علامة تجارية لاتيني أو رمز منتج إنجليزي تحتوي على مقاطع نصية RTL و LTR في السطر نفسه. خوارزمية Unicode Bidirectional Algorithm (UBA) هي المسؤولة عن حل الترتيب البصري لكل مقطع، والعكس الساذج لـ CSS لا يلمس هذه المشكلة إطلاقًا — فهي مشكلة على مستوى النص، وليست مشكلة تخطيط.
الأيقونات والعناصر ذات الاتجاه تحمل معنى. سهم "التالي"، سهم الرجوع، شريط التقدم، شريط التمرير — كل هذه يجب أن تُعكس بصريًا في RTL، لكن أيقونة البحث أو زر التشغيل أو شعار الشركة يجب ألا تُعكس.
خصائص CSS الفيزيائية لا تنعكس من تلقائيًا. margin-left: 16px تبقى على اليسار سواء كانت الصفحة RTL أو LTR ما لم تعالجها صراحة. هذا هو المصدر الأكبر لظاهرة "مترجم لكن معطّل" في المواقع ثنائية اللغة.
الخطوط تتصرف بشكل مختلف. معظم خطوط الويب اللاتينية لا تحتوي على أي رموز عربية إطلاقًا — يعود المتصفح بصمت إلى خط النظام الافتراضي، ولهذا تبدو مواقع عربية كثيرة وكأنها تستخدم خطًا مختلفًا تمامًا (وأقل جودة) عن النسخة الإنجليزية.

الحل الحقيقي في CSS: خصائص منطقية، لا left/right

الحل الدائم هو معيار CSS Logical Properties and Values الصادر عن W3C، والذي يتيح لك كتابة margin-inline-start بدلاً من margin-left، مع ترك المتصفح يحدد "البداية" و"النهاية" بناءً على direction وwriting-mode الفعليين للعنصر (MDN, padding-inline-start). خصائص المسافة الداخلية (padding) والهامش (margin) المنطقية تتمتع اليوم بدعم متصفحات جيد جدًا، فهذا ليس رهانًا على تقنية ناشئة — بل هو الأسلوب المعياري لكتابة CSS محايد الاتجاه في 2026.

جدول التحويل العملي:

الخاصية الفيزيائية (LTR فقط)	الخاصية المنطقية (تراعي الاتجاه)
`margin-left` / `margin-right`	`margin-inline-start` / `margin-inline-end`
`padding-left` / `padding-right`	`padding-inline-start` / `padding-inline-end`
`left: 0` / `right: 0`	`inset-inline-start: 0` / `inset-inline-end: 0`
`text-align: left`	`text-align: start`
`border-left`	`border-inline-start`
`float: left`	(تجنب float للتخطيط؛ استخدم flex/grid مع gap منطقي)

بعض النقاط الدقيقة يستحق التوقف عندها لأنها غالبًا سبب المشاكل الحقيقية للفرق:

١. ضع `dir` على `<html>`، وليس فقط على `<div>` تغليف. خاصية direction في CSS موجودة، لكن سمة dir في HTML هي ما تعتمد عليه المتصفحات وقارئات الشاشة وخوارزمية Unicode Bidi فعليًا — توصية MDN نفسها هي تفضيل سمة dir على خاصية CSS كلما أمكن، لأنها تستمر بالعمل حتى قبل/بدون تحميل CSS (MDN, direction). في تطبيق Next.js يعني هذا ضبط dir={locale === 'ar' ? 'rtl' : 'ltr'} على عنصر <html> الجذري في الـ layout، وليس مدفونًا داخل div محتوى على عمق ثلاث طبقات.

٢. خاصية `unicode-bidi` مهمة للعناصر المضمّنة. لكي تؤثر خاصية direction فعليًا على العناصر المضمّنة (مثل <span> داخل فقرة)، يجب أن تكون قيمة unicode-bidi هي embed أو override — فمجرد direction: rtl على عنصر inline بدون هذا لا يفعل شيئًا في بعض الحالات (MDN, unicode-bidi).

٣. اعزل المقاطع المضمّنة LTR باستخدام `<bdi>`. بالنسبة للمحتوى الديناميكي — اسم مستخدم، رمز منتج، اسم علامة تجارية إنجليزية وسط جملة عربية — لفّه بعنصر <bdi> (العزل ثنائي الاتجاه). هذا يمنع اتجاه ذلك المقطع من التسرب وإعادة ترتيب النص العربي المحيط به، ويعمل حتى بدون تحميل CSS (MDN, `<bdi>`).

٤. `:dir()` صالحة للاستخدام الآن — مع حل بديل. الفئة الزائفة :dir(rtl) / :dir(ltr) هي المحدد الصحيح من الناحية النظرية، ولم تعد تمثل المخاطرة التي كانت عليها: فايرفوكس يدعمها منذ الإصدار ١٧، وسفاري منذ ١٦.٤، وكروم وإيدج منذ ١٢٠، ما يرفع الدعم العالمي إلى نحو ٩٢٪ (Can I Use). إذا كان الحد الأدنى للمتصفحات لديك يشمل إصدارات أقدم من كروم ١٢٠، فأبقِ محددات السمة [dir="rtl"] كحل بديل واستخدم :dir() كتحسين تدريجي؛ وإن لم يكن كذلك، فيمكنك استخدامها مباشرة (LogRocket, Exploring the CSS :dir pseudo-class).

٥. توجد أدوات لتفادي التحويل اليدوي لكل شيء. إذا كنت تعمل على Tailwind، فإن tailwindcss-logical يستبدل صيغ ml-4/pr-2 بمكافئات منطقية. أما إذا كنت تدير CSS عادي أو نظام تصميم، فإن postcss-logical يمكنه تحويل الخصائص المنطقية إلى بدائل خاصة بالاتجاه وقت البناء لدعم متصفحات أقدم (npm, tailwindcss-logical؛ GitHub, postcss-logical).

الأرقام هي الفخ الذي يقع فيه الجميع تقريبًا

هذا هو التفصيل الذي يفصل بين موقع إماراتي ثنائي اللغة حقيقي وموقع معكوس فقط: النص العربي RTL، لكن الأرقام العربية الغربية (0–9) لا تزال تُكتب وتُقرأ من اليسار إلى اليمين، حتى داخل جملة RTL. سعر مثل "1,250 درهم" يحتاج إلى بقاء الأرقام 1,250 بترتيب LTR بينما تتدفق الكلمات المحيطة بها RTL — خوارزمية Unicode Bidi تتعامل مع هذا بشكل صحيح عمومًا في حالة سلاسل الأرقام البسيطة، لكنها تتعطل حول:

أرقام الهواتف المنسّقة (+971 4 xxx xxxx) — قد تُعاد إعادة ترتيب علامة + والمسافات والشرطات بصريًا إذا لم تُعزل السلسلة بـ <bdi> أو dir="ltr" على <span>.
سلاسل العملة المختلطة — "AED 4,500" مقابل "4,500 درهم" تحتاجان ترتيبًا مختلفًا للأرقام/الكلمات حسب جهة رمز العملة، وقوالب أنظمة إدارة المحتوى (CMS) التي تدمج السلاسل النصية بسذاجة سترتكب هذا الخطأ حسب اللغة.
صيغ التاريخ — DD/MM/YYYY مقابل التقويم الهجري (لا يزال يُستخدم إلى جانب الميلادي في الجهات الحكومية الإماراتية وبعض السياقات التجارية) هو قرار محتوى، لا قرار CSS فقط؛ حدد لكل حقل ما إذا كنت تعرّب التقويم أو اللغة فقط.
الأرقام الهندية الشرقية العربية (٠١٢٣٤٥٦٧٨٩) — بعض جماهير الخليج تتوقع استخدامها بدلاً من الأرقام الغربية في سياقات معينة (الفواتير، النماذج الحكومية)؛ هذا قرار محتوى/لغة يجب أن يتيحه نظام إدارة المحتوى لكل حقل على حدة، وليس مجرد تبديل خط عام.

الحل في الكود مملّ لكنه أساسي: لفّ المقاطع الرقمية/اللاتينية المستقلة بـ <bdi> أو <span dir="ltr">، وعدم الاعتماد أبدًا على دمج السلاسل النصية عبر اللغات لتنسيق العملة أو الهاتف، واختبار كل مكوّن يحتوي أرقامًا (جداول الأسعار، النماذج، صفحة الدفع) تحديدًا في اللغة العربية — وليس فقط في نص التسويق.

اختيار الخطوط: ما الذي يظهر بشكل جيد فعليًا

نمط الفشل هنا خفي: مجموعة خطوط لاتينية مثل font-family: 'Inter', sans-serif لا تُصدر خطأً مع النص العربي — بل تعود بصمت إلى أي خط عربي يوفره نظام تشغيل الزائر، والذي يختلف بشكل كبير بين Windows وmacOS وiOS وAndroid، ونادرًا ما يطابق وزن الخط اللاتيني لعلامتك التجارية أو ارتفاع حروفه. الحل هو الإعلان صراحة عن خط عربي متناسق، وليس فقط توسيع قائمة الخطوط الاحتياطية.

خيارات قوية ومُحدَّثة بفعالية على Google Fonts حتى 2026:

Cairo — خط عربي/لاتيني معاصر (sans-serif) مصمم للوضوح، يجمع بين بساطة الخطوط اللاتينية sans-serif وتناسب النسخ العربي بأسلوب النسخ. من أكثر الخطوط العربية استخدامًا في واجهات الويب اليوم (Google Fonts / مقارنة مجتمعية).
Tajawal — خط هندسي بسيط بأوزان متعددة، خيار قوي لواجهات العلامات التجارية الحديثة الشبيهة بالتطبيقات (Google Fonts).
IBM Plex Sans Arabic — الامتداد العربي لنظام Plex من IBM، صممه Mike Abbink وفريق IBM BX&D بالتعاون مع Bold Monday؛ الخيار الصحيح إذا كان خط علامتك التجارية اللاتيني هو Plex أصلاً، لأن الأوزان والنسب مصممة لتتطابق (Google Fonts, IBM Plex Sans Arabic).
Noto Sans Arabic / Noto Kufi Arabic — جزء من عائلة Noto من Google، مصمم لتغطية واسعة للنصوص وموثوقية عالية؛ Noto Kufi Arabic هو أسلوب كوفي نظيف وغير مموّج إذا أردت شيئًا أكثر هندسية/عرضية من خط أساسي بأسلوب النسخ (Google Fonts, Noto Kufi Arabic).

قواعد عملية للمزاوجة بين الخطوط:

١. طابق ارتفاع الحروف (x-height) والوزن، لا مجرد "يبدو متشابهًا". النصوص العربية واللاتينية لها نسب مختلفة جدًا؛ عنوان لاتيني عريض مقترن بمكافئ عربي يبدو رفيعًا بصريًا (حتى مع نفس قيمة font-weight المُعلنة) يُظهر تسلسلًا هرميًا مكسورًا.

٢. حمّل فقط المجموعة الفرعية العربية التي تحتاجها. ملفات خطوط الويب العربية كبيرة الحجم إذا شملت نطاق Unicode الكامل؛ استخدم unicode-range أو نسخة فرعية مبنية خصيصًا لتقليل زمن التحميل، خصوصًا أن تكلفة بيانات الجوال وسرعة الصفحة كلاهما عاملان مهمان لجمهور الإمارات على شبكات 4G/5G.

٣. اختبر ارتفاع السطر (line-height) بشكل منفصل. التشكيل والروابط في النص العربي غالبًا ما تحتاج مساحة رأسية إضافية طفيفة مقارنة بارتفاع السطر اللاتيني الذي نسخته من ورقة الأنماط الإنجليزية.

٤. لا تنشر أبدًا نص المحتوى العربي بخط لاتيني بحت — حتى كحل احتياطي "مؤقت". هذه هي العلامة الأكثر شيوعًا على أن الموقع تُرجم فقط، ولم يُصمَّم فعلاً للعربية.

تفاصيل التخطيط وتجربة المستخدم التي غالبًا ما تُهمَل

التنقل والمسارات التوجيهية (breadcrumbs) ومؤشرات التقدم يجب أن تُعكس. شريط تقدم الدفع الذي يمتلئ من اليمين إلى اليسار صحيح في RTL؛ سهم رجوع معكوس صحيح؛ لكن شعار الشركة أو زر تشغيل الفيديو أو الاتجاه الفعلي الذي ينظر إليه شخص في صورة يجب أن يبقى عمومًا كما صُمم — عكس هذه العناصر قد يبدو معطلاً، أو في حالة الصور، مضحكًا دون قصد.
النماذج تحتاج رسائل تحقق (validation) متوافقة مع RTL ومحاذاة إدخال صحيحة، بما في ذلك dir="rtl" على عناصر <input>/<textarea> نفسها، وليس فقط على الحاويات المحيطة بها، حتى يتصرف موضع المؤشر والنص التوضيحي (placeholder) بشكل صحيح.
العروض المتحركة (carousels) وأشرطة التمرير يجب أن تتقدم في اتجاه القراءة — "التالي" يتحرك من اليمين إلى اليسار في العربية، وهو عكس ما يفعله مكوّن carousel إنجليزي مُنسوخ افتراضيًا.
الجداول تحتاج عكس ترتيب الأعمدة، وهذا من أكثر المجالات عرضة للخطأ لأن أدوات تخطيط الجداول المبنية على تنسيق left/right الفيزيائي (بدلاً من الخصائص المنطقية أو CSS المدرك لـ [dir]) غالبًا ما تعكس النص فقط، دون ترتيب الأعمدة.

أين يندرج هذا ضمن الامتثال وقواعد البيانات في الإمارات

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

ضريبة القيمة المضافة تبقى عند النسبة القياسية 5%. ظلت ضريبة القيمة المضافة في الإمارات 5% منذ إدخالها عام 2018 وتبقى 5% في 2026؛ لاحظ أن تغييرات قواعد التحقق من الموردين والفوترة الإلكترونية دخلت حيز التنفيذ اعتبارًا من يناير 2026، وهذا يؤثر على قوالب الدفع والفواتير أكثر من تأثيره على النسبة نفسها (Daftra, VAT in UAE 2026).
تخضع البيانات الشخصية لقانون المرسوم بقانون اتحادي رقم 45 لسنة 2021 (PDPL)، الساري منذ 2 يناير 2022، والذي يُطبَّق على مستوى الإمارات (باستثناء المناطق الحرة) وله امتداد خارج الحدود يشمل أي جهة تحكم أو تعالج بيانات مقيمين في الإمارات — مشابه من حيث البنية لـ GDPR (Securiti, Overview of UAE PDPL). إذا كان موقعك أو جزء منه يقع ضمن منطقة حرة مثل DIFC، لاحظ أن DIFC تطبّق قانون حماية البيانات الخاص بها رقم 5 لسنة 2020، وهو نظام منفصل متوافق مع GDPR ويُطبَّق عبر جهته التنظيمية الخاصة — نقل البيانات بين البر الرئيسي و DIFC يُعتبر تقنيًا نقلاً عبر الحدود، وهذا مهم إذا كانت البنية الخلفية أو نظام CRM أو الاستضافة لموقعك ثنائي اللغة يمتد بين الاثنين (PrivacyEngine, Federal PDPL vs DIFC & ADGM). يجب أن تكون لغة الموافقة وصفحات سياسة الخصوصية وإشعارات ملفات تعريف الارتباط معرّبة بالكامل وبشكل منفصل — وليست مترجمة آليًا — لأن الموافقة يجب أن تكون مستنيرة فعليًا باللغة التي يقرأ بها المستخدم.

قائمة اختبار مختصرة

قبل اعتبار موقع إماراتي ثنائي اللغة جاهزًا، تحقق من كل نقطة من هذه تحديدًا في نسخة اللغة ar، وليس فقط بإلقاء نظرة سريعة على النسخة الإنجليزية:

[ ] <html dir="rtl" lang="ar"> مضبوطة على المستوى الجذري، وليس على div تغليف
[ ] كل خاصية margin-left/right، وpadding-left/right، وموضع left/right أُعيدت كتابتها كخاصية منطقية
[ ] أرقام الهواتف والأسعار والتواريخ تُعرض بترتيب أرقام صحيح (اختبر رقم هاتف إماراتي حقيقي وسلسلة سعر بالدرهم)
[ ] مزاوجة الخط العربي تُحمَّل وتطابق وزن/ارتفاع الحروف اللاتيني — افحص font-family المحسوبة فعليًا، لا تثق بنموذج التصميم فقط
[ ] الأيقونات التي تحمل معنى اتجاهيًا (الأسهم، مؤشرات التقدم) معكوسة؛ أصول العلامة التجارية/الصور ليست كذلك
[ ] النماذج: سمة dir للحقول، ومحاذاة رسائل التحقق، والنص التوضيحي كلها تعمل بشكل صحيح
[ ] العروض المتحركة/أشرطة التمرير تتقدم من اليمين إلى اليسار
[ ] سياسة الخصوصية وإشعار الموافقة ونص صفحة الدفع معرّبة باحترافية، وليست مترجمة آليًا

هذا بالضبط نوع العمل الدقيق الذي يتولاه فريق UI/UX design لدينا لعملاء الإمارات الذين يديرون مواقع ثنائية اللغة — ليس قالبًا معكوسًا، بل نظام تخطيط وطباعة مصمم فعلاً للعربية بدءًا من مستوى المكوّن.

الأسئلة الشائعة

هل `direction: rtl` في CSS يكفي وحده لموقع عربي؟

لا. فهو يعكس التخطيط على مستوى الكتل، لكنه لا يُصلح خصائص left/right الفيزيائية المُثبَّتة يدويًا في أماكن أخرى، ولا يعالج النص ثنائي الاتجاه (الأرقام، أرقام الهواتف، أسماء العلامات التجارية اللاتينية داخل نص عربي)، ولا يلمس اختيار الخط. تحتاج إلى dir="rtl" على <html>، وخصائص CSS منطقية في كل مكان، وعزل <bdi> للمقاطع المضمّنة LTR، ومجموعة خطوط مخصصة للعربية.

هل يمكنني فقط استخدام Google Translate على موقعي الإنجليزي للحصول على نسخة عربية؟

لموقع أعمال حقيقي، لا. الترجمة الآلية تفوّت السجل اللغوي المناسب، وتُخطئ في قراءة سلاسل الأرقام/العملة ثنائية الاتجاه، والأهم — في أي شيء يتعلق بالموافقة أو سياسات الخصوصية أو الدفع — يجب أن تُفهَم فعليًا من القارئ، لا أن تكون صحيحة تقريبًا. الكتابة الاحترافية بالعربية، مقترنة بتخطيط RTL مبني بشكل صحيح، هي ما يحوّل الزوار فعليًا.

ما الفرق بين قانون PDPL الاتحادي الإماراتي وقانون بيانات منطقة حرة مثل DIFC؟

القانون الاتحادي PDPL (المرسوم بقانون اتحادي رقم 45 لسنة 2021) يُطبَّق على البر الرئيسي للإمارات؛ بينما تُطبّق DIFC والمناطق الحرة الأخرى أنظمتها الخاصة المنفصلة والمتوافقة مع GDPR عبر جهات تنظيمية خاصة بها. إذا كانت بنية موقعك التحتية أو قاعدة مستخدميه تمتد بين البر الرئيسي ومنطقة حرة، فقد تحتاج للامتثال لكليهما، وتُعتبر البيانات المنقولة بينهما نقلاً عبر الحدود.

أي خط ويب عربي يجب أن أستخدمه إذا لم أكن أعرف من أين أبدأ؟

Cairo و Tajawal كلاهما خياران قويان وواسعا الاستخدام ومُحدَّثان بفعالية على Google Fonts مع نطاق أوزان جيد لعمل الواجهات. إذا كان خط علامتك التجارية اللاتيني هو IBM Plex أصلاً، استخدم IBM Plex Sans Arabic لمزاوجة متطابقة. تجنب نشر نص المحتوى العربي بخط لاتيني فقط وترك نظام التشغيل يستبدله بصمت بخط احتياطي — أعلن عن العائلة العربية صراحة.