تصميم RTL للمتاجر العربية: دليل عملي للاتجاه من اليمين لليسار

المتجر العربي الذي يُقرأ بسلاسة من اليمين لليسار يبدو محليًا. أما المتجر المقلوب نصف قلب فيبدو ترجمة، والمتسوق يلاحظ ذلك خلال ثوانٍ.

والخبر الجيد أن تصميم RTL (من اليمين لليسار) له قواعد واضحة، ومعظم التخطيط ينعكس وحده بمجرد أن تعرف الصفحة أنها عربية.

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

ما هو تصميم RTL؟

تصميم RTL هو بناء الصفحة لتُقرأ من اليمين لليسار كما تُقرأ العربية. فالقائمة تبدأ من اليمين، والنص يحاذي اليمين، وتدفق الصفحة كله يسير في الاتجاه المعاكس.

وهو أكثر من مجرد ترجمة، لأن المتجر المترجم بتخطيط من اليسار لليمين يجبر المتسوق العربي على القراءة عكس عادته في كل شاشة.

أساسان تقنيان يقومان بمعظم العمل:

• اضبط الاتجاه في HTML: استخدم <html lang="ar" dir="rtl"> في الصفحات العربية. خاصية lang وحدها لا تغيّر الاتجاه، وخاصية direction في CSS ليست المكان الصحيح له.
• استخدم CSS المنطقي: اكتب margin-inline-start بدل margin-left، وtext-align: start بدل left. وفي Tailwind استخدم ms- وme- وps- وpe- وtext-start. عندها تعمل القاعدة نفسها في اللغتين.

ينعكس Flexbox وGrid تلقائيًا مع dir. أما العناصر العائمة يمينًا أو يسارًا (float) والمواضع المطلقة وtranslateX ومواضع الخلفيات فلا تنعكس، وتحتاج تعديلًا يدويًا.

منصتك تتكفل بكثير من هذا. وإذا كنت على شوبيفاي، فابدأ بـقالب عربي يدعم RTL قبل أن تلمس أي كود.

ما الذي تعكسه في المتجر العربي؟

اعكس كل ما يدل على ترتيب أو اتجاه. فإذا كان العنصر يعني "الأول" أو "التالي" أو "إلى الأمام"، فهو ينعكس.

هذه العناصر تنعكس عند التحويل إلى العربية:

• تخطيط الصفحة: يبدأ الشعار والقائمة من اليمين، وتنتقل لوحة الفلاتر والأشرطة الجانبية إلى اليمين أيضًا.
• التنقل: يسير مسار التنقل (breadcrumbs) من اليمين لليسار، وكذلك التبويبات وأرقام الصفحات.
• الأسهم: أسهم الرجوع والتالي و"عرض المزيد" وأسهم السلايدر كلها تشير للاتجاه المعاكس.
• التقدم: خطوات الدفع وأشرطة التقدم وخطوات تتبع الطلب تسير من اليمين لليسار.
• أشرطة التمرير ومفاتيح التبديل: كلها تسير من اليمين لليسار، لذا يكون مفتاح التبديل مفعّلًا حين يكون المقبض على اليسار.
• نجوم التقييم: تمتلئ النجمة الجزئية من جهة اليمين.
• القوائم المنزلقة: تنزلق سلة التسوق من اليسار، وهو جهة النهاية في RTL.
• الأيقونات الاتجاهية: الرد والتراجع والإعادة و"الخروج" وعلامات الاقتباس كلها تنعكس.

ما الذي لا تعكسه أبدًا؟

بعض العناصر تحتفظ بشكلها في كل اللغات. وإذا عكستها بدا المتجر معطوبًا أو حتى خاطئًا.

العنصر	يُعكس في RTL؟	السبب
الشعارات وأسماء العلامات		الشعار رسم ثابت. يتغير مكانه لا شكله.
صور المنتجات والعارضين		النص على العبوة سيظهر مقلوبًا.
تشغيل وإيقاف وترجيع وتقديم		أزرار التشغيل تمثل اتجاه الشريط لا اتجاه القراءة.
الساعات والمؤقتات وأيقونة التحديث		الساعة تدور مع عقاربها في كل مكان.
علامة الصح والزائد والناقص والإغلاق والبحث		رموز متماثلة أو عالمية.
الأسعار وأرقام الجوال والطلبات والبطاقات		الأرقام تُقرأ دائمًا من اليسار لليمين.
أسماء العلامات اللاتينية ورموز المنتجات		تبقى بترتيبها اللاتيني داخل النص العربي.
حقول البريد والجوال والبطاقة والآيبان		اجعل هذه الحقول من اليسار لليمين.
أسهم الرجوع والتالي		تدل على اتجاه الحركة.
خطوات الدفع وأشرطة التقدم		التقدم يسير مع اتجاه القراءة.

الرسوم البيانية الرقمية مسألة اختيار، ومعظم المواقع الخليجية تُبقي محور الزمن من اليسار لليمين. اختر طريقة واحدة والتزم بها في المتجر كله.

كيف تتعامل مع الأيقونات والأسهم؟

اسأل سؤالًا واحدًا عن كل أيقونة: هل تشير إلى اتجاه؟ إذا كانت تشير فاعكسها، وإذا لم تكن فاتركها كما هي.

مثلًا، زر "المتابعة إلى الدفع" يشير سهمه إلى اليسار في العربية. أما أيقونة الحقيبة والقلب لقائمة الأمنيات وسلة المهملات للحذف فتبقى كما هي تمامًا.

بعض الأيقونات تحتاج قرارًا بشريًا:

• أيقونة الإرسال (الطائرة الورقية): بعض المنتجات تعكسها وبعضها لا، فاختر طريقة والتزم بها.
• الأيقونات التي تُمسك باليد اليمنى، مثل القلم، تبقى كما رُسمت تمامًا.
• الأيقونات التي فيها نص أو أرقام: أعد رسمها بدل عكس الرسم كله، وإلا ظهر النص داخلها مقلوبًا.

تتيح معظم مكتبات الأيقونات عكسًا خاصًا بـ RTL عبر CSS، مثل [dir="rtl"] .icon-arrow مع transform: scaleX(-1). طبّقه على كل أيقونة وحدها، لا على مجموعة الأيقونات كلها.

كيف يعمل النص المختلط بين العربية والإنجليزية؟

صفحات المنتجات العربية مليئة بالنص اللاتيني: أسماء العلامات وأرقام الموديلات والمقاسات والبريد والروابط. وخوارزمية الاتجاه الثنائي (bidi) في المتصفح ترتب هذه الكلمات تلقائيًا، وغالبًا تصيب.

لكنها تخطئ عند الأطراف. فعلامات الترقيم وعلامة الزائد والشرطة المائلة ورموز العملات بجانب كلمة لاتينية قد تقفز إلى الطرف الخطأ من السطر.

مثلًا، العنوان "سماعات لاسلكية X2 Pro - أسود" قد يظهر فيه الشرطة أو رقم الموديل في مكان غريب. والحل أن تحيط الجزء اللاتيني بوسم يجعل المتصفح يعامله ككتلة واحدة:

• استخدم <bdi> أو <span dir="ltr"> حول رموز المنتجات وأرقام الموديلات والبريد والروابط وأسماء المستخدمين.
• استخدم dir="auto" في التقييمات والأسئلة وكل محتوى يكتبه العملاء، لأنه قد يأتي بأي من اللغتين.
• استخدم علامات يونيكود في الحالات العنيدة داخل الحقول النصية البسيطة، مثل قوالب الرسائل النصية: LRM (U+200E) أو RLM (U+200F) أو العوازل U+2066–2069.

والأسعار تحتاج العناية نفسها. ضع السعر كاملًا داخل <bdi>، حتى لا تتبدل أجزاء "SAR 249" أو "249 ر.س".

الخط العربي: الأحجام وارتفاع السطر والتباعد

الحروف العربية متصلة، وهي أطول من اللاتينية، مع نقاط وحركات فوقها وتحتها. لذلك فإعدادات الخط المنسوخة من التصميم الإنجليزي ستقص الحروف أو تزحمها أو تكسرها.

ابدأ بهذه القيم:

أعد ضبط letter-spacing إلى 0 في كل عنصر عربي يرثه. والعناوين الصغيرة بالأحرف الكبيرة والأزرار هي المصدر المعتاد للمشكلة.

وأعطِ الأزرار عرضًا أدنى وحشوًا مرنًا. فـ "Add to cart" تصبح "أضف إلى السلة"، والزر ذو العرض الثابت سيقص النص.

اختر خطًا عربيًا دائمًا وعن قصد. فدونه يختار المتصفح خطًا عشوائيًا من النظام لكل حرف عربي، ويبدو المتجر غير مكتمل. وخطوط IBM Plex Sans Arabic وTajawal وCairo وNoto Kufi Arabic كلها مجانية. قارن بينها في دليل أفضل الخطوط العربية للمتاجر.

أي الأرقام يستخدم المتجر العربي؟

استخدم الأرقام الغربية (1، 2، 3) في الأسعار والكميات والمقاسات وأرقام الجوال والطلبات. فالمتسوقون يكتبون هذه الأرقام في البحث والنماذج، والمتاجر الإقليمية الكبرى تعرضها.

ما زالت الأرقام العربية المشرقية (١، ٢، ٣) مستخدمة في السعودية، خاصة في النصوص الرسمية والتحريرية. ويمكنك استخدامها في المقالات أو التواريخ الهجرية إن شئت، لكن لا تخلط النظامين في صفحة واحدة أبدًا.

وهنا الفخ. الكود الذي ينسق الأرقام بلغة ar-SA يُخرج الأرقام المشرقية افتراضيًا، فيتحول "1,299" إلى "١٬٢٩٩". اطلب من مطورك استخدام ar-SA-u-nu-latn، فهو يفرض الأرقام الغربية.

جرّب الشكلين على سعر حقيقي هنا.

واحفظ الأرقام وتحقق منها كأرقام غربية عادية أيضًا. فبعض لوحات مفاتيح الجوال ترسل أرقامًا مشرقية إلى حقول الجوال ورمز التحقق، لذا حوّلها قبل التحقق.

وللقرار الكامل، اقرأ دليل الأرقام الغربية والمشرقية.

النماذج وصفحة الدفع في RTL

صفحة الدفع هي المكان الذي يكلّفك فيه تخطيط RTL المعطوب طلبات حقيقية. فالعناوين ورسائل الخطأ والأزرار تتبع اتجاه العربية، بينما تتبع حقول البيانات اتجاه البيانات نفسها:

• حقول من اليسار لليمين: الجوال والبريد ورقم البطاقة والآيبان ورمز التحقق والعنوان المختصر للعنوان الوطني السعودي تبقى dir="ltr"، مع عنوان الحقل بالعربية.
• الحقول العربية: الاسم والشارع والحي وملاحظات التوصيل تستخدم dir="auto"، ليكتب العميل بأي لغة بسهولة.
• أرقام الجوال: املأ مفتاح الدولة مسبقًا (‎+966 أو ‎+971) واقبل الرقم مع الصفر في أوله أو بدونه.
• رسائل الخطأ: ضعها تحت الحقل، محاذية لجهة البداية (اليمين)، ومكتوبة بالعربية.
• منتقي التاريخ: اعكس أسهم الشهور، واعرض التاريخ الميلادي افتراضيًا، وأضف الهجري حيث يفيد.
• أزرار الكمية: يتبادل زرا الزائد والناقص مكانيهما، بينما يُقرأ الرقم نفسه بشكل طبيعي.

ومنذ يناير 2026 تحتاج الشحنات في السعودية إلى العنوان الوطني، فخصص له حقلًا واضحًا. فالعنوان الصحيح يمنع فشل التوصيل أكثر من أي تحسين في التصميم.

صمّم للجوال أولًا، وبالعربية أولًا

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

على الجوال، هذه تفاصيل RTL الأهم:

• وصول الإبهام: أيقونة القائمة الرئيسية تكون عادة أعلى اليمين. وضع الأزرار المهمة مثل "أضف إلى السلة" في شريط ثابت أسفل الشاشة.
• اتجاه السحب: في سلايدر RTL تأتي الصورة التالية بالسحب من اليسار إلى اليمين. وإعدادات السلايدر القديمة تحتاج غالبًا تفعيل خيار RTL صراحة.
• الأزرار العائمة: يجب أن تكون أزرار واتساب والدردشة وشريط الكوكيز في الجهة الصحيحة، وألا تغطي زر الدفع.
• طول النص: قد تلتف عناوين القائمة العربية على سطرين، فاختبر الهيدر على شاشة ضيقة بعرض 375 بكسل.

ويشرح دليل التجارة عبر الجوال صفحة الدفع على الجوال والسرعة بالتفصيل.

مثال تطبيقي: بطاقة منتج من LTR إلى RTL

لنأخذ بطاقة نموذجية لسماعات لاسلكية. بالإنجليزية تُقرأ من اليسار لليمين: الصورة، ثم "Wireless Earbuds X2 Pro"، ثم "SAR 249"، ثم زر ذهبي "Add to cart" مع سهم.

وهذه البطاقة نفسها بالعربية كما يجب:

1

اعكس ترتيب البطاقات

في شبكة المنتجات تصبح البطاقة الأولى على اليمين، ويحاذي النص داخل كل بطاقة اليمين. أما الصورة فتبقى دون عكس.

2

اعزل اسم الموديل اللاتيني

يصبح العنوان: سماعات لاسلكية X2 Pro. ضع الجزء اللاتيني داخل وسم bdi حتى يبقى اسم الموديل قطعة واحدة.

3

أصلح السعر

اعرض 249 ر.س أو SAR 249 بأرقام غربية داخل وسم bdi. وتأكد أن تنسيق ar-SA لم يحوّله إلى ٢٤٩.

4

عدّل حجم الخط

اجعل العنوان العربي أكبر من الإنجليزي بـ 1–2 بكسل، مع تباعد حروف 0 وارتفاع سطر 1.6. وتأكد أن الحركات لا تُقص.

5

اعكس السهم ووسّع الزر

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

خمسة تعديلات صغيرة، وتبدو البطاقة كأنها صُممت في الرياض.

كيف تختبر متجر RTL قبل الإطلاق؟

اختبر بمحتوى عربي حقيقي على جوالات حقيقية. فالنص الوهمي (lorem ipsum) والإنجليزية المعكوسة يخفيان معظم الأخطاء، لأن للنص العربي طوله وارتفاعه وطريقة اتصاله الخاصة.

ولفحص أعمق صفحة بصفحة، استخدم قائمة فحص RTL للمتاجر العربية.

أخطاء RTL الشائعة وطريقة إصلاحها

معظم أخطاء RTL تأتي من عدد قليل من الأسباب، ولكل منها إصلاح سريع.

ملاحظات لمتاجر شوبيفاي

• منذ تحديث شوبيفاي في 2 أكتوبر 2026، تعرض قوالب Horizon المجانية العربية من اليمين لليسار، ومعها صفحة الدفع وحسابات العملاء. أما قالب Dawn فما زال بلا دعم RTL أصلي، فلا تبنِ عليه متجرك العربي.
• ولمظهر احترافي، يعرض فلتر الاتجاه من اليمين لليسار في متجر القوالب 24 قالبًا مدفوعًا. قارن بينها في دليل قوالب شوبيفاي العربية.
• تأكد أن ملف theme.liquid يُخرج dir="rtl" حين تكون اللغة عربية. ومعظم قوالب RTL تفعل ذلك مسبقًا.
• إضافات التطبيقات والسكربتات المخصصة هي المصدر المعتاد للأرقام المشرقية والعناصر المثبتة على اليسار.
• للترجمة وصفحة الدفع وخطوات الإطلاق، اتبع دليل تعريب متجر شوبيفاي.

ملاحظات لمتاجر سلة وزد

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

ملاحظات لووكومرس والمتاجر المبنية خصيصًا

• يعكس ووردبريس لوحة التحكم والقوالب الداعمة لـ RTL حين تكون لغة الموقع عربية. وكثير من القوالب يحمّل ملف rtl.css منفصلًا، فتأكد أن قالبك يتضمنه.
• إضافات الترجمة مثل WPML وPolylang وTranslatePress تتولى اللغة، لكن الاتجاه يبقى معتمدًا على القالب وعلى كل إضافة.
• في المتاجر المبنية خصيصًا أو بنظام headless، اكتب CSS منطقيًا من اليوم الأول. فتعديل كود مبني على left وright لاحقًا يستغرق وقتًا أطول بكثير من بنائه ثنائي الاتجاه من البداية.

تصميم RTL هو الأساس لمتجر يثق به المتسوق الخليجي. أتقنه مرة واحدة، وسيبدو كل منتج وحملة وموسم بعدها محليًا.