R043: حاوية بعرض ثابت بالبكسل يتجاوز نصها العربي المساحة

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

الفحص

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

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

متوسطة
نص مقصوص تمامًا كما يجده R042، في عنصر قيمة width له ثابتة بالبكسل، مضبوطة في style المضمّن أو في قاعدة من ورقة الأنماط تطابقه. يسمّي التصريح الذي يجب تغييره، وتُسقط ملاحظة R042 على العنصر نفسه لصالحه.
الإصلاح: استبدل width: …px بتحجيم max-width أو fit-content في القاعدة أو النمط المضمّن الذي يضبطه.

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

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

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

before.css

.plan-name {
  width: 140px;
  overflow: hidden;
}

after.css

.plan-name {
  inline-size: fit-content;
  max-inline-size: 100%;
}

افحصه يدويًا

حدّد العنصر المقصوص وشغّل [$0.style.width, getComputedStyle($0).width] في وحدة تحكم DevTools: القيمة في الخانة الأولى تعني عرضًا مضمّنًا. وإلا فابحث عن width في لوحة Computed ووسّعها لترى القاعدة التي تضبطه.

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

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

widthValue: العرض الثابت، كما كُتب.
widthSource: موضع ضبطه: inline style (النمط المضمّن)، أو محدِّد قاعدة ورقة الأنماط.
scrollWidth: عرض النص، بالبكسل.
clientWidth: عرض الصندوق، بالبكسل.
sample: النص، مقصوصًا عند 120 حرفًا.

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

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

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

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

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