كيفية التعامل مع التخطيط من اليمين إلى اليسار في تطوير المواقع باللغة العربية

في مشاريع تطوير المواقع متعددة اللغات باللغة العربية، لا تعني «عكس الصفحة من اليسار إلى اليمين» إتمام تكييف RTL ‏(Right to Left، من اليمين إلى اليسار). ما يؤثر فعليًا في جودة الإطلاق هو إمكانية توافق اتجاه الصفحة وسلوك المكونات والنص ثنائي الاتجاه وأدوات الجهات الخارجية وقواعد تشغيل المحتوى في الوقت نفسه. إن تعديل direction: rtl واحد فقط يجعل النص الرئيسي بمحاذاة اليمين غالبًا، لكنه قد يسبب مشكلات غير متوقعة في مستويات القوائم والتحقق من النماذج والأيقونات والأرقام ومواصفات المنتجات وصفحات الهبوط الإعلانية.

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

ميّز أولًا بين «محاذاة النص إلى اليمين» و«RTL للصفحة»

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

إن إضافة text-align: right إلى النص الرئيسي فقط تحل مشكلة المحاذاة البصرية للفقرات، لكنها لا تغير الاتجاه المنطقي لـ Flex وGrid والعناصر ذات التموضع وعناصر التحكم في النماذج. وعلى العكس، فإن تطبيق RTL مباشرةً على الموقع بالكامل يجعل محتوى الاتجاه من اليسار إلى اليمين، مثل أرقام الهاتف والبريد الإلكتروني وأرقام الطلبات وطرازات المنتجات، صعب القراءة. وهنا تكمن صعوبة تطوير المواقع العربية متعددة اللغات: كون اللغة الرئيسية للصفحة RTL لا يعني أن جميع أحرف الصفحة يجب أن تُرتب وفق قواعد RTL.

يوصى بوضع التحكم في الاتجاه ضمن مسار اللغة أو الحاوية الجذرية للصفحة، بدلًا من وضعه في ملف أنماط محلي. على سبيل المثال، يمكن ضبط dir="rtl" على وسم HTML للصفحة في الدليل المستقل للغة العربية؛ أما في تطبيقات الصفحة الواحدة، فينبغي تحديث document.documentElement.lang وdocument.documentElement.dir بالتزامن عند تبديل اللغة. لا تعتمد على أسماء فئات CSS فقط لمحاكاة الاتجاه، وإلا فلن تعمل قدرات المتصفح الأصلية ودلالات إمكانية الوصول بشكل كامل.

استخدم «الخصائص المنطقية» في التخطيط، ولا تعتمد على left وright

أكثر ما يسهل تراكم الدين التقني في مشاريع RTL هو العدد الكبير من القيم المضمنة ثابتًا مثل left وright وmargin-left وpadding-right. تصف هذه الخصائص مواضع مادية، وعادةً ما تتطلب قواعد تجاوز إضافية بعد تبديل اللغة، لتتشكل في النهاية مجموعة أنماط LTR ومجموعة أنماط إصلاح RTL.

الأنسب للمواقع متعددة اللغات هو الخصائص المنطقية في CSS. فهي تصف المواضع باستخدام «بداية السطر المضمنة ونهايته وبداية الكتلة ونهايتها»، ويقوم المتصفح بتعيينها تلقائيًا وفق اتجاه الكتابة.

في المشاريع الجديدة، ينبغي اعتماد الخصائص المنطقية كجزء من مواصفات المكونات. ولا يلزم للمواقع القائمة إعادة كتابة جميع CSS دفعة واحدة، لكن ينبغي إعطاء أولوية للتحسين في مكونات التحويل عالية التكرار مثل التنقل والفلاتر والنماذج والنوافذ المنبثقة وتفاصيل المنتجات ووحدات الاستفسار. ويجب أيضًا الحذر عند استخدام flex-direction: row-reverse لعكس التخطيط قسرًا، إذ قد يؤدي ذلك إلى عدم تطابق الترتيب البصري مع ترتيب DOM، مما يؤثر في انتقال تركيز لوحة المفاتيح وقراءة قارئ الشاشة وبعض منطق التتبع.

ما العناصر التي تحتاج إلى انعكاس، وما العناصر التي لا ينبغي انعكاسها

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

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

من الأفضل أن ينشئ نظام الأيقونات علامة «حساسة للاتجاه». يمكن للأيقونات مثل الأسهم والدخول والرجوع والخطوة التالية استخدام متغيرات RTL أو قلبها أفقيًا في بيئة RTL؛ أما الأيقونات التي لا تحمل دلالة اتجاهية، مثل التنزيل والإغلاق والبحث والهاتف، فعادةً تبقى دون تغيير. لا تطبق transform: scaleX(-1) على حاوية الأيقونات كاملة، لأن ذلك سيعكس بالخطأ كثيرًا من الرسومات التي لا ينبغي قلبها.

النص ثنائي الاتجاه نقطة عالية المخاطر في النماذج ومعلومات المنتجات

تختلط في الصفحات العربية غالبًا أسماء العلامات التجارية الإنجليزية وعناوين URL والبريد الإلكتروني وأرقام الهواتف والمبالغ والأبعاد وSKU وطرازات المنتجات. على سبيل المثال، قد يتضمن سجل استفسار نصًا وصفيًا عربيًا مع AB-1200 و220V وعنوان بريد إلكتروني في الوقت نفسه. إذا تم الاعتماد على الحكم التلقائي للمتصفح، فقد يحدث اختلال بصري في علامات الترقيم والأقواس والأرقام، وقد يختلف الترتيب بعد النسخ عن الترتيب الظاهر.

مبدأ المعالجة هو أن يكون لكل نوع من البيانات اتجاه واضح: ترث حقول الوصف العربية RTL؛ ويستخدم البريد الإلكتروني وعناوين المواقع وأرقام التتبع والرموز والطرازات التقنية dir="ltr"؛ ويجب أن تُخرج المبالغ والتواريخ والكميات من خلال مكون تنسيق موحد. وبالنسبة إلى حقول إدخال النماذج، يجب أيضًا فحص موضع التسمية ونقطة بداية المؤشر ورسائل الخطأ والقوائم المنسدلة ومنتقي التاريخ ورمز التحقق كلًا على حدة. فظهور الصفحة بشكل طبيعي لا يعني بالضرورة أن المستخدم يستطيع إتمام التعبئة بسلاسة.

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

ينبغي أن تتجنب البنية متعددة اللغات اعتبار «العربية مجرد سمة واجهة»

ينبغي إدارة اللغة والمحتوى والاتجاه على طبقات منفصلة. يتولى مسار اللغة تحديد lang وdir وعنوان الصفحة وعلاقة اللغات البديلة؛ ويتولى نظام المكونات عرض التخطيط الصحيح في LTR وRTL؛ وتتولى إدارة المحتوى صيانة النصوص المحلية ووصف الصور وحقول النماذج؛ بينما يحتاج نظام التحليلات إلى ضمان اتساق معنى أحداث التحويل في الصفحات بمختلف اللغات.

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

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

ينبغي إجراء القبول قبل الإطلاق وفق مهام حقيقية

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

• تحقق مما إذا كانت العقدة الجذرية تعلن في الوقت نفسه عن خصائص اللغة والاتجاه الصحيحة.
• تحقق مما إذا كان اتجاه فتح التنقل ومسار التنقل والترقيم والعروض الدوارة والأشرطة الجانبية والنوافذ المنبثقة يتوافق مع عادات القراءة.
• تحقق من عرض ونتائج نسخ الهاتف والبريد الإلكتروني وURL والمبالغ والتواريخ وSKU والأبعاد والأقواس عند خلطها في النص.
• تحقق مما إذا كان ترتيب تركيز Tab في لوحة المفاتيح ودلالات قارئ الشاشة ورسائل الخطأ لا تزال متسقة مع الترتيب البصري.
• تحقق من أداء RTL في الدردشة والدفع والخرائط ونوافذ Cookie المنبثقة والنماذج ونصوص تتبع الإعلانات التابعة لجهات خارجية.
• تحقق من التفاف السطور بعد تحميل الخطوط العربية وارتفاع الأزرار وفيضان الجداول والتمرير الأفقي على الهاتف المحمول.

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