R020: حاوية مجبرة على الاتجاه من اليسار، أو تجاوز لخوارزمية الاتجاه، فوق محتوى عربي

تحت صندوق dir="ltr" أو direction: ltr يبدأ النص العربي من الحافة الخاطئة وتختل مواضع علامات ترقيمه، وbidi-override قد يقلب حروفه أو يعكس الأرقام المضمّنة فيه.

الفحص

المعرّف: R020
الفئة: الاتجاه والنص ثنائي الاتجاه
الخطورة الافتراضية: عالية

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

عالية
على صفحة من اليمين إلى اليسار، يحمل عنصر dir="ltr"، والنص الذي يرث اتجاهه عربي في معظمه، 20 حرفًا عربيًا على الأقل. يبدأ ذلك النص العربي من الحافة الخاطئة، وتقع علامات ترقيمه في الجهة الخاطئة.
الإصلاح: احذف dir="ltr" لترث الحاوية اتجاه الصفحة من اليمين إلى اليسار (أو استخدم dir="auto" للمحتوى المختلط الذي يكتبه المستخدمون).
عالية · ثقة متوسطة
الحالة نفسها، لكن الاتجاه يأتي من CSS: العنصر يُعرض بـdirection: ltr داخل أب من اليمين إلى اليسار، دون سمة dir تعلن ذلك.
الإصلاح: احذف تجاوز direction: ltr في CSS لهذه الحاوية.
حرجة
عنصر يضبط unicode-bidi: bidi-override أو isolate-override مع direction: ltr فوق 10 حروف عربية على الأقل. خوارزمية الاتجاه معطّلة، فتُعرض العربية مقلوبة حرفًا حرفًا، لا محاذاة إلى اليسار فحسب.
الإصلاح: احذف تجاوز unicode-bidi. لعزل مقطع لغته غير معروفة استخدم unicode-bidi: isolate مع dir="auto"، فهذا يُبقي خوارزمية الاتجاه عاملة داخل المقطع المعزول. صيغ التجاوز مصممة لعرض النص معكوسًا عن قصد، ونادرًا ما يريدها أي تخطيط.
عالية
التجاوز نفسه داخل عنصر من اليمين إلى اليسار يحمل 10 حروف لاتينية على الأقل. العربية سليمة؛ أما المقاطع اللاتينية والأرقام حولها، أي أسماء العلامات والأسعار والعناوين التي يحتاج القارئ إلى نسخها، فتُعرض معكوسة.
الإصلاح: احذف تجاوز unicode-bidi. لعزل مقطع لغته غير معروفة استخدم unicode-bidi: isolate مع dir="auto"، فهذا يُبقي خوارزمية الاتجاه عاملة داخل المقطع المعزول. صيغ التجاوز مصممة لعرض النص معكوسًا عن قصد، ونادرًا ما يريدها أي تخطيط.

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

الصفحات من اليسار إلى اليمين، فهي من شأن R001؛ وdir="auto"؛ وكتل الكود؛ وعناصر النماذج، التي يفحصها R023 وR072؛ والحاوية من اليسار إلى اليمين تحت lang غير عربية؛ وأحفاد العنصر الذي ضبط الاتجاه، فهي تُعدّ مرة واحدة من خلاله. النص الذي يعود إلى اليمين إلى اليسار داخله، كشرائح شريط عرض من اليسار إلى اليمين، لا يُحسب.

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

before.html

<div class="card" dir="ltr">
  <p>أدر مشاريعك ومهامك بسهولة من لوحة تحكم واحدة.</p>
</div>

after.html

<div class="card">
  <p>أدر مشاريعك ومهامك بسهولة من لوحة تحكم واحدة.</p>
</div>

افحصه يدويًا

حدّد العنصر المشتبه به في لوحة Elements وشغّل [getComputedStyle($0).direction, getComputedStyle($0).unicodeBidi, $0.closest('[dir]')?.dir] في وحدة تحكم DevTools. فوق النص العربي تريد rtl، وunicode-bidi بقيمة normal أو embed أو isolate. القيمة ltr، أو أي قيمة تنتهي بـ-override، هي الملاحظة.

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

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

dirAttr: للحاوية من اليسار إلى اليمين: سمة dir كما كُتبت، أو لا شيء حين يأتي الاتجاه من CSS.
subtreeArabicChars: الحروف العربية تحت العنصر. في الحاوية من اليسار إلى اليمين، النص الذي يرث اتجاهها وحده.
subtreeLatinChars: الحروف اللاتينية، معدودة بالطريقة نفسها.
unicodeBidi: للتجاوز: قيمة unicode-bidi التي عطّلت الخوارزمية.
direction: للتجاوز: الاتجاه المحسوب للعنصر، وهو ما يحدد أي نصفي النص ينعكس.

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

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

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

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

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