R031: `float: left` أو `right` على عناصر المحتوى في سياق من اليمين إلى اليسار بلا تجاوز

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

الفحص

المعرّف: R031
الفئة: CSS باتجاهات فيزيائية
الخطورة الافتراضية: متوسطة

متى يُطلق ملاحظة

متوسطة · ثقة متوسطة
ورقة الأنماط تُظهر أنها كُتبت أولًا من اليسار إلى اليمين: للصفحة hreflang بقيمة en أو x-default، أو تستخدم الورقة محدِّدات [dir=ltr] أو [dir=rtl]، أو تضبط محدِّدات مختلفة القيمة نفسها على جانبين متقابلين، كـmargin-left في أحدها وmargin-right في آخر. على صفحة من اليمين إلى اليسار، تعوّم قاعدة عنصرًا ظاهرًا إلى left أو right بلا تجاوز للاتجاه من اليمين إلى اليسار لمحدِّدها. في العربية يجب أن ينعكس التعويم؛ وكما هو مكتوب يلتف المحتوى في الجهة الخاطئة.
الإصلاح: استبدل float: left أو float: right بـfloat: inline-start أو float: inline-end (وتحقق من الحافة المقصودة في الاتجاه من اليسار إلى اليمين).
متوسطة · ثقة منخفضة
التعويم نفسه، ولا شيء في الصفحة يقول إن الورقة كُتبت أولًا من اليسار إلى اليمين. قد تكون الجهة مقصودة، لذلك يُبلَّغ بثقة منخفضة.
الإصلاح: استبدل float: left أو float: right بـfloat: inline-start أو float: inline-end (وتحقق من الحافة المقصودة في الاتجاه من اليسار إلى اليمين).

ما الذي يتجاهله عمدًا

الصفحات من اليسار إلى اليمين، والتعويم الذي له نظير [dir=rtl]، والصناديق بحجم 2px أو أقل، كمسابر القياس التي تضيفها مكتبات أشرطة التمرير، فهي لا تلف شيئًا. يُبلَّغ عن كل عنصر مرة واحدة، مهما كان عدد القواعد التي تعوّمه.

قبل الإصلاح وبعده

before.css

.post img {
  float: left;
}

after.css

.post img {
  float: inline-start;
}

افحصه يدويًا

حدّد العنصر وشغّل getComputedStyle($0).float في وحدة تحكم DevTools. القيمتان left وright فيزيائيتان؛ أما inline-start وinline-end فتتبعان الاتجاه.

ما يعرضه لك التقرير

تحمل كل ملاحظة من R031 ما ينطبق عليها من الحقول أدناه، فترى سبب ظهورها دون إعادة الفحص.

cssSelector: محدِّد القاعدة التي تضبط التعويم.
float: left أو right، كما تضبطه القاعدة.
source: ورقة الأنماط التي جاءت منها القاعدة.
affectedElements: ما يصل إلى ثلاثة عناصر ظاهرة تعوّمها القاعدة في هذه الصفحة.
ltrFirstEvidence: ما يقول إن الورقة كُتبت أولًا من اليسار إلى اليمين، أو لا شيء حين لم توجد أي إشارة.

هل تخفق صفحتك في الفحص R031؟

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

افحص صفحة مجانًا تصفّح الفحوص