ثلاثة أشياء تعطلت عند إضافة العربية

إضافة نسخة عربية من هذا الموقع تطلبت ضبط dir="rtl" على الصفحة وعكس التخطيط. معظم الأمور عملت مباشرة. الأجزاء التي تعطلت لم تكن الكبيرة الواضحة، بل قطعًا صغيرة من CSS ونصوص افترضت بصمت اتجاه اليسار إلى اليمين طوال الوقت.

1. فخ العسل

يحتوي نموذج التواصل على حقل فخ مخفي لرسائل السبام: البوتات تملؤه، بينما لا يراه الأشخاص الحقيقيون أبدًا. كان مخفيًا باستخدام position: absolute; left: -9999px;. في صفحة من اليسار إلى اليمين، هذا يضعه ببساطة خارج الحافة اليسرى، بعيدًا عن الأنظار. في dir="rtl" تكون بداية السطر المنطقية للصفحة على اليمين، فيتحول المحتوى البعيد جهة اليسار إلى تجاوز قابل للتمرير بدلًا من ذلك. اكتسبت الصفحة الرئيسية العربية شريط تمرير جانبيًا ضخمًا، وظهرت لقطة شاشة بلا واجهة كحقل فارغ بلون الخلفية. الحل هو نمط "الإخفاء البصري" المعياري، الذي لا يعتمد على الاتجاه إطلاقًا:

.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}

2. تباعد الأحرف

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

:lang(ar) * { letter-spacing: 0 !important; }
:lang(ar) body { line-height: 1.8; }

3. عبارتان إنجليزيتان متتاليتان

انتهى العنصر البارز العربي بـ ...علوم حاسوب في SFU. Vancouver, BC. تعامل خوارزمية الاتجاه ثنائي الوجهة في المتصفح مع النقطة والمسافة كعنصرين محايدين، لذا اندمج SFU مع Vancouver, BC ضمن سياق واحد من اليسار إلى اليمين. ظهرت الجملة بترتيب أجزاء خاطئ: بدت وكأنها SFU. Vancouver, BC تطفو في غير موضعها، مع وقوع النقطة الأخيرة في الجهة الخاطئة. وضع كلمة عربية بين العبارتين فصل السياقين عن بعضهما: علوم حاسوب في SFU. مقيم في Vancouver, BC. كذلك كان تغليف كل عبارة داخل <bdi>، أو إضافة علامة اتجاه من اليمين إلى اليسار (U+200F) مباشرة بعد SFU.، كافيًا لحل المشكلة أيضًا.

ما لم يتطلب أي جهد إطلاقًا

معظم التخطيط كان يستخدم بالفعل خصائص CSS المنطقية: margin-inline-start، inset-inline-end، text-align: start. تبديل dir إلى rtl عكس كل ذلك مجانًا. الأجزاء المتبقية التي كانت لا تزال تستخدم خصائص فعلية، نقاط الجدول الزمني، علامات القوائم، سهم الرجوع، كانت الأجزاء الوحيدة التي احتاجت مراجعة. خريطة النجوم والمخططات بقيت من اليسار إلى اليمين عن قصد: فهي ليست نصًا، وعكسها كان سيجعلها خاطئة.

الدرس المستفاد

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