R042: نص مقصوص: محتوى أعرض من صندوقه مع `overflow` مخفي وبلا علامة حذف

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

الفحص

المعرّف: R042
الفئة: التخطيط
الخطورة الافتراضية: عالية

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

عالية
نص عنصر ظاهر أعرض من صندوقه بأكثر من 2px، والصندوق مضبوط على overflow: hidden أو clip، ولا علامة حذف، فتُقص الكلمات في منتصفها. لا يقتصر على النص العربي.
الإصلاح: اسمح للنص بالالتفاف أو للصندوق بالنمو؛ وإن كان القص مقصودًا فأضف text-overflow: ellipsis.
منخفضة
الحالة نفسها، مع text-overflow: ellipsis. القص مقصود، لذلك الخطورة منخفضة: دعوة للتحقق من أن الجزء الظاهر ما زال يحمل المعنى.
الإصلاح: تأكد من أن الجزء الظاهر يحمل المعنى؛ فالعربية تحتاج غالبًا إلى مساحة أفقية أكبر من الإنجليزية التي صُمّمت لها الواجهة.

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

الصناديق الأصغر من 8px، كالتسميات المخفية بصريًا؛ والنص الأقصر من 4 حروف؛ ونمط استبدال النص بصورة، أي نص مدفوع إلى الخارج عن قصد بـtext-indent: -9999px أو font-size: 0 لتحل محله صورة خلفية. حتى ثماني حالات في الصفحة. حين يأتي القص من عرض ثابت بالبكسل، يُبلغ عنه R043 بدلًا من ذلك، مشيرًا إلى العرض الذي يجب تغييره.

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

before.css

.tab-label {
  overflow: hidden;
  white-space: nowrap;
}

after.css

.tab-label {
  overflow: hidden;
  white-space: normal;
}

افحصه يدويًا

حدّد العنصر وشغّل [$0.scrollWidth, $0.clientWidth, getComputedStyle($0).overflowX, getComputedStyle($0).textOverflow] في وحدة تحكم DevTools. الرقم الأول الأكبر من الثاني مع hidden أو clip هو الملاحظة؛ وellipsis تعني أن القص مقصود.

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

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

scrollWidth: عرض النص، بالبكسل.
clientWidth: عرض الصندوق، بالبكسل.
sample: النص، مقصوصًا عند 120 حرفًا.
whiteSpace: قيمة white-space للعنصر؛ nowrap هي السبب المعتاد لعجز النص عن الالتفاف ليتسع.

مكوّنات تجتاز هذا الفحص بطريقة بنائها

تجتاز مكوّنات ريتلا هذه الفحص R042 بالطريقة التي بُنيت بها. إذا استخدمتها كما يصفها التوثيق، فلن تُدخل هذا الخلل إلى صفحتك.

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

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

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