التصميم العربي RTL: 9 أخطاء تكلّف متاجر الخليج مبيعات

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

لماذا لا يكون التصميم العربي RTL مجرد صورة معكوسة

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

تسعة أخطاء في التصميم العربي RTL تكلّف متاجر الخليج مبيعات

1. عكس التخطيط دون عكس مسار القراءة

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

   الحل: اعكس البنية ولا تعكس المحتوى أبداً. أعد بناء التكوين بدل قلب لوح الرسم، واترك الصور وعلامات الهوية كما رُسمت، ثم اسأل السؤال المهم: ما أول ما ينبغي أن يراه القارئ العربي، وهل هو في أعلى اليمين؟

2. التعامل مع العربية كطبقة ترجمة

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

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

3. خط لاتيني عريض مع خط عربي بديل ملصق عليه

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

   الحل: اختر الخط العربي أولاً ثم اختر له رفيقاً لاتينياً يناسبه — والأفضل عائلة واحدة مرسومة بالنظامين معاً. حمّل الأوزان الحقيقية، واضبط ارتفاع السطر للعربية صراحةً (قيمة 1.4 التي تستخدمها مع اللاتيني تزحم النقاط، وأنا أقترب من 1.8)، ثم عاين النتيجة على iOS وأندرويد وويندوز.

4. تطبيق تباعد الحروف على النص العربي

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

   الحل: احصر التباعد في اللاتيني وحده. أعد ضبط letter-spacing: normal عند جذر الصفحة العربية، ثم أعد تطبيقه داخل غلاف لاتيني صريح. تباعد الكلمات آمن، أما تباعد الحروف فلا. وبما أن الحروف الكبيرة لا وجود لها في العربية، فالتراتب الذي كنت تكسبه منها يجب أن يأتي من الوزن أو الحجم أو اللون.

5. الأرقام والأسعار والهواتف والتواريخ تنقلب داخل النص العربي

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

   الحل: اعزل كل تتابع لاتيني أو رقمي. الوسم <bdi> هو الأداة الأنظف، وspan يحمل unicode-bidi: isolate; direction: ltr; يؤدي الغرض نفسه. غلّف الأسعار وأرقام الهواتف وأرقام الطلبات ورموز المنتجات وعناوين البريد. ثم اختر مرة واحدة بين الأرقام العربية الشرقية والغربية والتزم باختيارك في كل مكان — فالخلط بين الاثنين هو ما يربك الناس فعلاً.

6. عكس أيقونات لا يجوز عكسها أبداً

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

   الحل: احتفظ داخل ملف التصميم بقائمة صريحة لما يُعكس وما لا يُعكس، واقلب كل صنف من الأيقونات على حدة، مثل [dir="rtl"] .cs_icon_arrow { transform: scaleX(-1); }. ولا تقلب كل عنصر svg في الصفحة دفعة واحدة — فهكذا ينتهي بك الأمر إلى زر تشغيل مقلوب وشعار معكوس.

7. النماذج والنصوص الإرشادية ورسائل التحقق تُركت باتجاه LTR

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

   الحل: دع كل عنصر تحكم يرث الاتجاه من المستند، ثم عالج الاستثناءين الحقيقيين. حقول الهاتف والبريد تحتاج direction: ltr كي تبقى المحارف بترتيبها، مع text-align: right كي تلتصق بحافة البداية نفسها التي يلتصق بها كل شيء آخر. واكتب نصوص التحقق بالعربية بنفسك — فالفقاعة الأصلية في المتصفح تتكلم لغة المتصفح لا لغة الصفحة.

8. السلايدر والكاروسيل وأشرطة التقدم ما زالت تتحرك من اليسار إلى اليمين

   معظم مكوّنات JavaScript تقرأ الاتجاه من إعداداتها هي، لا من ملف CSS عندك. فتضبط dir="rtl"، فيطيع النص، ويظل السلايدر الرئيسي يبدأ من اليسار ويضع «التالي» مكان «السابق». وصفحات الدفع متعددة الخطوات تملأ شريط التقدم من اليسار بينما تُقرأ عناوين الخطوات من اليمين، فتبدو الخطوة الأولى وكأنها الخطوة الرابعة.

   الحل: مرّر الاتجاه إلى المكوّن صراحةً — rtl: true في Slick، وdir: 'rtl' في Swiper، والخيار المكافئ في مكتبة الشبكات التي تستخدمها — ثم أعد التهيئة عند تبديل اللغة. وبعدها اختبر بيدك: هل تظهر الشريحة الأولى على اليمين، وهل يمتلئ الشريط من الحافة اليمنى؟

9. نصوص واجهة إنجليزية متناثرة داخل واجهة عربية

   شارة SALE مطبوعة داخل صورة بانر. ومسار تصفح مكتوب Home / Products. ونص في القالب لم يعثر عليه أحد في لوحة التحكم، فظلت السلة الفارغة تقول Your cart is empty. المتسوق الخليجي يقرأ هذا كله على أنه هذا المتجر لم يُبنَ من أجلي — وهي الإشارة الخطأ في اللحظة التي يقرر فيها تسليم رقم بطاقته.

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

«الاتجاه من اليمين لليسار ليس إعداداً
تشغّله في النهاية. إنه التخطيط الذي
تبدأ منه.»

الطبقة التقنية: خاصية dir والخصائص المنطقية وكود JavaScript الواعي بالاتجاه

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

ضع dir="rtl" على العنصر الجذر

اضبط <html lang="ar" dir="rtl"> — لا dir على div غلاف، ولا على body وحده. فالنوافذ المنبثقة والتلميحات وأدوات الطرف الثالث تُعرض غالباً في نهاية المستند، خارج غلافك، فترث من الجذر أو لا ترث شيئاً على الإطلاق. والجذر هو أيضاً الاتجاه الأساسي الذي تبني عليه خوارزمية الاتجاه الثنائي حساباتها، وهو ما يبقي الخطأ الخامس تحت السيطرة.

اكتب خصائص منطقية بدل اليمين واليسار

الخصائص الفيزيائية تجبرك على صيانة ملفَّي أنماط ينحرف أحدهما عن الآخر ببطء. أما الخصائص المنطقية فتجعل قاعدة واحدة تخدم الاتجاهين معاً:

• margin-left / margin-right → margin-inline-start / margin-inline-end

• padding-right → padding-inline-end، وborder-left → border-inline-start

• left / right → inset-inline-start / inset-inline-end، وtext-align: left → text-align: start

أما الفلكس والجريد فيفكران منطقياً بالفعل. والاستثناءات هي التي تعضّ بعد الإطلاق: transform: translateX() وإزاحات box-shadow وbackground-position وزوايا التدرجات اللونية، كلها خصائص فيزيائية لا منطقية، وما زالت تحتاج تجاوزاً بمحدد [dir="rtl"] مع عكس الإشارة.

أخبر كود JavaScript باتجاه الصفحة

كل ما يقيس عناصر DOM أو يحرّك موضعاً يحتاج إخباراً صريحاً: السلايدر وشبكات الماسونري والسحب والإفلات والرسوم البيانية والإزاحات اللاصقة. اقرأ الاتجاه مرة واحدة عند الإقلاع — var isRTL = document.documentElement.getAttribute('dir') === 'rtl'; — ثم مرّر هذه الراية إلى إعدادات كل مكوّن. التخطيط تمنحه لك CSS، والسلوك تمنحه JavaScript، وواحدة منهما فقط هي التي تقرأ خاصية dir عندك.

كيف أبني التصميم العربي RTL داخل كل متجر أصممه

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

على سلة تكون معظم أساسات RTL جاهزة أصلاً، وتتسلل الأخطاء من الأقسام المخصصة والبانرات المستوردة وتطبيقات الطرف الثالث — وهو ما أتناوله بالتفصيل في دليل تصميم متجر سلة. وهذه المشكلات التسع أشدّ ضرراً في صفحة المنتج، حيث يجتمع في شاشة واحدة سعر مقلوب وحقل كمية باتجاه LTR وزر شراء ما زال مكتوباً بالإنجليزية؛ والاثنا عشر عنصراً التي تحوّل المتصفح إلى مشترٍ كلها حساسة للاتجاه. ويمكنك رؤية شكل التخطيطات النهائية في أعمالي في المتاجر والواجهات.

قائمة تحقق سريعة قبل الإطلاق

نفّذ هذه الاختبارات على هاتف، بالعربية، قبل أن تنشر متجرك:

• كل سعر ورقم هاتف ورقم طلب يُقرأ بترتيبه الصحيح داخل الجمل العربية.

• لا يحمل أي عنوان تباعد حروف، ولا يزيّف المتصفح أي وزن من أوزان الخط.

• السلايدر الرئيسي يبدأ من اليمين ويستجيب للسحب كما يتوقع المتسوق.

• حقول الدفع وعناوينها ومربعات الاختيار ورسائل الخطأ كلها محاذاة لحافة واحدة.

• لم يُعكس بالخطأ زر تشغيل ولا شعار ولا صورة منتج.

لا شيء من هذا صعب. هو عمل مكانه البداية لا النهاية، وهو الفرق بين متجر يبدو مستورداً ومتجر يبدو ابن بيئته. والهوية البصرية تشدّ في الاتجاه نفسه — وقد كتبت عن ذلك في دليل الهوية البصرية للتجارة الإلكترونية، من الشعار إلى التغليف.

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