R030: خصائص فيزيائية حساسة للاتجاه بلا تجاوز للاتجاه من اليمين إلى اليسار

حين تُظهر ورقة الأنماط أنها كُتبت أولًا من اليسار إلى اليمين، تترك margin-left أو padding-right أو left المسافات والإزاحات العربية في الجهة الخاطئة؛ وإلا يُبلَّغ عنها خطرًا بثقة أدنى.

الفحص

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

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

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

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

الصفحات من اليسار إلى اليمين، والقواعد التي لمحدِّدها نظير [dir=rtl]، والقواعد التي لا تطابق شيئًا ظاهرًا في الصفحة. الخصائص المنطقية مثل margin-inline-start لا يُبلَّغ عنها أبدًا.

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

before.css

.card .icon {
  margin-left: 12px;
}

after.css

.card .icon {
  margin-inline-start: 12px;
}

افحصه يدويًا

شغّل [...document.styleSheets].flatMap((s) => { try { return [...s.cssRules]; } catch { return []; } }).filter((r) => /(margin|padding)-(left|right)\s*:|border-(left|right)(-width)?\s*:|[;{]\s*(left|right)\s*:/.test(r.cssText)).map((r) => r.selectorText) في وحدة تحكم DevTools لتسرد القواعد التي تضبط جانبًا فيزيائيًا. أوراق الأنماط من نطاق آخر لا تُقرأ بهذه الطريقة؛ لوحة Computed تُظهر قيمها على العنصر المحدد.

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

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

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

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

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

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