بناء مواقع متعددة اللغات ويسهل الوصول إليها

يبدو دعم تعدد اللغات مهمة ترجمة بسيطة إلى أن تضيف العربية فيبدأ نصف الصفحة بالدوران في الاتجاه الخاطئ. إليك بعض الأمور التي علّمتنا دروسًا قاسية. خصائص CSS المنطقية (logical properties) وحدها لا تكفي. استبدال `margin-left` بـ `margin-inline-start` يحل الكثير تلقائيًا، لكن ليس كل شيء. التخطيطات المبنية على `translateX` بدقة البكسل للحركة تنكسر في اتجاه اليمين لليسار لأن اتجاه الحركة نفسه يجب أن ينعكس - ولا توجد خاصية منطقية تقوم بذلك نيابة عنك. ترتيب Flexbox وGrid يمكن أن يخرّب الحركات التي تفترض ترتيبًا ثابتًا. شريط شعارات العملاء المتحرك لدينا، على سبيل المثال، اختفى تمامًا خارج الشاشة في اتجاه اليمين لليسار، لأن الصناديق التي تتقلص لتناسب محتواها تُحاذى لليمين افتراضيًا في هذا الاتجاه، مع حركة كانت تفترض حركة من اليسار لليمين. كان الحل هو فرض `direction: ltr` على حاوية الشريط المتحرك صراحةً وترك المرآة البصرية للحاوية الأم. اللغة العربية خط متصل - الحروف تتصل بشكل مختلف حسب جيرانها. تقنية استخدمناها لتأثيرات النص المتدرج بالإنجليزية (تقسيم النص إلى عناصر منفصلة لكل حرف) دمّرت تلك الاتصالات تمامًا وأنتجت نصًا مشوهًا يتعذر قراءته. كان الحل هو اكتشاف النص العربي عبر تعبير نمطي (regex) وتحريكه على مستوى الكلمة بدلاً من مستوى الحرف.