مصيدة (Honeypot) أفسدت صفحاتي العربية

تعمل Convertica بسبع لغات. ست لغات تُقرأ من اليسار إلى اليمين، بينما تُقرأ العربية من اليمين إلى اليسار. هذا التباين كلفني ساعات من تصحيح الأخطاء (debugging).

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

لم يتغير الرابط (URL) وHTML. عرض Chrome الصفحة، لكن Headless Chrome لم يعرض شيئًا. تستخدم بوتات Google وBing متصفحات بدون واجهة (headless browsers)، لذا كان هذا الأمر مهمًا.

كان السبب هو "مصيدة سبام" (spam honeypot). لقد أضفت حقل إدخال مخفيًا للإمساك بالبوتات ووضعته بعيدًا جدًا خارج منطقة العرض (viewport):

  • position: absolute
  • left: -9999px
  • opacity: 0

في المستندات التي تُقرأ من اليسار إلى اليمين، يقوم المتصفح بقص المحتوى الزائد (overflow)، لذا تظل المصيدة في مساحة فارغة غير مرئية.

عندما قمت بتعيين dir="rtl"، قفز أصل التمرير (scroll origin) إلى الحافة اليمنى. أصبح المحتوى الزائد جهة اليسار مساحة حقيقية، مما أدى إلى تمدد المستند بعرض عشرة آلاف بكسل بينما ظل المحتوى متكدسًا في أقصى اليمين.

قام متصفحي بالتمرير تلقائيًا إلى الأصل الأيمن، لذا لم أرَ أي خطأ. أما محرك الرندرة بدون واجهة (headless renderer) فيبدأ من الزاوية اليسرى القصوى، فقام برندرة تسعة آلاف بكسل من الفراغ.

يمكنك إصلاح ذلك بتغيير خاصية واحدة فقط.

استبدل left بـ inset-inline-start.

  • القديم: position: absolute; left: -9999px;
  • الجديد: position: absolute; inset-inline-start: -9999px;

تتبع inset-inline-start اتجاه الكتابة—حيث تعمل كـ left في اللغات التي تُقرأ من اليسار إلى اليمين (LTR) وكـ right في اللغات التي تُقرأ من اليمين إلى اليسار (RTL)—مما يبقي المصيدة خارج الشاشة في الجانب الصحيح.

راجع حيلك القديمة لإخفاء العناصر خارج الشاشة عند إضافة دعم اللغات التي تُقرأ من اليمين إلى اليسار (RTL). يشمل ذلك المصائد (honeypots)، وروابط التخطي (skip links)، وعناصر div المخفية. استبدل left/right بالخصائص المنطقية (logical properties).

متصفحك ليس اختبارًا جيدًا لهذا الخطأ؛ فهو يخفي الفشل عن طريق التمرير نيابة عنك. قم برندرة الصفحة بدون واجهة (headless) لترى البكسلات الفعلية.

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

المصدر: https://dev.to/convertica/a-honeypot-field-made-every-arabic-page-on-my-site-render-blank-3aji