R001: اتجاه المستند مفقود أو متناقض أو معلن في CSS وحدها

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

الفحص

المعرّف: R001
الفئة: المستند والبيانات الوصفية
الخطورة الافتراضية: حرجة

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

حرجة
الصفحة عربية، و<html> بلا dir أو يقول dir="ltr"، ولا شيء في CSS يجعلها من اليمين إلى اليسار. التخطيط كله يسير من اليسار إلى اليمين.
الإصلاح: أضف dir="rtl" إلى العنصر الجذري: <html dir="rtl" lang="ar">.
حرجة
<html dir="rtl"> معلن، لكن ورقة أنماط تضبط direction: ltr على html أو body، فتُعرض الصفحة من اليسار إلى اليمين رغم ذلك. قراءة HTML وحدها لن تكشف هذا.
الإصلاح: ابحث عن القاعدة التي تضبط direction: ltr على html أو body واحذفها، أو اقصرها على العناصر التي تحتاجها فعلًا. سمة dir لا تتغلب على ورقة الأنماط.
متوسطة
التخطيط يُعرض من اليمين إلى اليسار، لكن <html> لا يقول dir="rtl": الاتجاه يأتي من CSS أو من <body dir="rtl">. الشكل صحيح، والناقص هو الإعلان.
الإصلاح: اضبط dir="rtl" على العنصر الجذري: <html dir="rtl" lang="ar">. CSS تحرّك الصناديق، أما سمة dir فهي ما تعتمد عليه :dir() وعناصر النماذج وdir="auto" والتقنيات المساعدة.

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

الصفحات غير العربية، والصفحة التي تعلن الاتجاه من اليمين إلى اليسار على <html> وتُعرض كذلك. يحكم على الجذر وحده: dir على عنصر داخل الصفحة من شأن R020.

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

before.html

<html lang="ar">
<body>
  <h1>نظّم عمل فريقك في مكان واحد</h1>
</body>
</html>

after.html

<html dir="rtl" lang="ar">
<body>
  <h1>نظّم عمل فريقك في مكان واحد</h1>
</body>
</html>

افحصه يدويًا

افتح DevTools على الصفحة وشغّل [document.documentElement.dir, getComputedStyle(document.body).direction] في وحدة التحكم. الصفحة العربية السليمة تطبع ['rtl', 'rtl']. القيمة الأولى الفارغة تعني أن الإعلان مفقود، و['rtl', 'ltr'] تعني أن ورقة أنماط تتجاوزه.

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

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

dirAttr: سمة dir على <html> كما كُتبت، أو لا شيء إن غابت.
computedRootDirection: الاتجاه الذي تُعرض به الصفحة فعلًا، مقروءًا من النمط المحسوب لـbody.
detectionSignals: سبب عدّ الصفحة عربية: lang عربية، أو dir بقيمة rtl، أو 40% على الأقل من حروف النص الظاهر عربية.
arabicLetterRatio: نسبة الحروف العربية من حروف النص الظاهر، من 0 إلى 1.

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

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

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