ليش المواقع ثنائية اللغة RTL/LTR بتجذب عملاء أكتر بالسوق العربي
أسرع طريقة لاكتشاف إنو موقع "مُترجَم" للعربي هي إنك تفتحه. النص بيصير من اليمين لليسار، بس كل شي تاني لسا بيتصرف متل موقع إنجليزي لابس زي عربي: سهم الرجوع لسا بيأشر بالاتجاه الغلط، أيقونات شريط التقدم لسا بتتحرك من اليسار لليمين، وسعر متل "25 د.أ" بينكسر بشكل غريب عالسطر لأنو حدا ما قال للتصميم إنو الحروف العربية واللاتينية لازم تتعايش مع بعض. هاد مش مشكلة ترجمة. هاي مشكلة اتجاه، وحلها بالـ CSS وبنية المكونات، مش بصياغة النص.
أكبر غلطة بشوفها تتكرر بالويب العربي هي التعامل مع `direction: rtl` على إنو هاي كل الشغلة. قلب اتجاه النص هو الخطوة الأولى من حوالي عشرة خطوات. الـ padding والـ margin المكتوبة بـ `left` و`right` لازم تصير خصائص منطقية (`margin-inline-start`, `padding-inline-end`) حتى تنقلب تلقائياً مع الاتجاه، بدل ما تكون ثابتة وبعدين تنكتب فوقها ورقة أنماط تانية خاصة بـ RTL حدا بينسى يحدّثها بعد ستة أشهر. الأسهم وأيقونات "التالي/السابق" لازم يتحدد اتجاهها حسب اللغة، مش بس انعكاس أعمى بـ `scaleX(-1)`، اللي بينكسر لما الأيقونة فيها نص أو شكل غير متماثل متل زر التشغيل.
السلايدرات والكاروسيل هي المكان اللي هاد الشي بيبين فيه أكتر شي. سلايدر مبني على افتراض إنو السكرول من اليسار لليمين رح يشتغل عكسي بالـ autoplay إذا اتجاه السكرول ومؤشرات النقاط ما كانوا مرتبطين باللغة. أنا بخلي حاوية السكرول نفسها بـ `dir="ltr"` ثابتة حتى يضل إحساس اللمس والسكرول متناسق، بينما أيقونات الأسهم والأحداث اللي بترتبط فيها بتقرأ اللغة وبتأشر بالاتجاه الصح. تفصيل صغير بس لما يكون مظبوط ما حدا بينتبهله، ولما يكون غلط بيبين فوراً.
الخطوط بتستاهل فقرة لحالها. خط عربي وخط لاتيني عايشين بنفس الصفحة لازم يكون عندهم ارتفاع أحرف متقارب، تدرج أوزان متقارب، وبالأفضل شخصية متقاربة، وإلا الصفحة بتبين متل موقعين مختلفين ملزّقين مع بعض حسب أي لغة عم تنقرا. أنا بستخدم IBM Plex Sans Arabic مع Space Grotesk بهاد الموقع بالذات لأنو نسبهم قريبة لبعض لدرجة إنو التنقل بين الإنجليزي والعربي ما بحس إنو قفزة مفاجئة. اختيار خط عربي هو بالأصل حروف خط لاتيني "ممطوطة" لأشكال عربية هو اختصار شائع، والقارئ العربي بيلاحظه فوراً حتى لو ما قدر يحدد ليش شايفه غلط.
المحتوى المختلط الاتجاه جوا سطر واحد، متل جملة عربية فيها اسم براند أو رقم تلفون أو سعر، بتحكمها خوارزمية ثنائية الاتجاه باليونيكود، وما دايماً بتعمل اللي متوقعه المصمم من غير مساعدة. لف الكلمات اللاتينية (كود منتج، سعر بالدولار، اسم براند إنجليزي) بترميز عزل صحيح بيمنعها من إنو ينعكس ترتيب حروفها جوا نفسها أو تقفز لجنب غلط من علامة ترقيم. هاد الشي غير مرئي لحد ما توصل عالحالة الوحيدة اللي فيها بينكسر، وهناك بيصير نوع الـ bug اللي العميل بيلتقطله screenshot ويبعته بعلامة استفهام محتار.
الـ SEO ثنائي اللغة هو الجزء اللي الوكالات بتتجاهله بالكامل. كل لغة لازم يكون إلها رابط خاص فيها (`/en/...`، `/ar/...`، مش زر تبديل على نفس الرابط)، وسوم `hreflang` بديلة بتربط كل نسخة لغة بالتانية، وبيانات وصفية وOpen Graph وبيانات منظمة مترجمة، مش بس النص الظاهر. موقع ثنائي اللغة بالواجهة بس أحادي اللغة بالـ `<head>` غير مرئي لنصف الزيارات المحتملة من محركات البحث.
ولا شي من هاد تجميلي. بالسوق العربي تحديداً، الزائر الناطق بالعربي بيقدر يميّز خلال ثواني إذا الموقع اتبنى من أجله أو اتكيّف من أجله، وهاد الانطباع الأول بيأثر على الثقة قبل ما يقرا كلمة وحدة من المحتوى. بالنسبة للتجارة الإلكترونية والخدمات المحلية وأي شي بيجمع بيانات تواصل أو دفعة، فجوة الثقة هاي هي فجوة بمعدل التحويل. تصميم RTL من أول يوم، بدل ما ينضاف لاحقاً، أرخص بالبناء وهو الفرق بين موقع "بيدعم" العربي وموقع "اتبنى فعلاً" لعميل ناطق بالعربي.
