01 / 08
Margin direction does not mirror in RTL
الهوامش لا تنعكس مع تغيّر الاتجاه
margin-left: 1rem;
margin-inline-start: 1rem;
Logical property mirrors automatically. No media query, no dir-based override.
الخاصية المنطقية تنعكس تلقائياً دون حاجة إلى media query أو تجاوز خاص بـ dir.
02 / 08
Mixed bidi text drifts in alert messages
النصوص ثنائية الاتجاه تنحرف داخل التنبيهات
"الضغط: 47.5 kPa"
<bdi>47.5 kPa</bdi>
UAX #9 reorders neutrals around numerics. bdi isolates the run.
قواعد UAX #9 تعيد ترتيب الأرقام؛ عنصر bdi يعزل الجزء.
03 / 08
Back-arrow icon points the wrong way
سهم الرجوع يشير إلى الاتجاه الخاطئ
<svg class="icon-back">
[dir=rtl] .icon-back { transform: scaleX(-1); }
Mirror directional glyphs only — never logos, photos, charts, or maps.
انعكاس الأيقونات الاتجاهية فقط — لا الشعارات أو الصور أو المخططات أو الخرائط.
04 / 08
Toast notifications strand on wrong side
إشعارات Toast تظهر في الجانب الخاطئ
position: fixed; right: 1rem;
inset-inline-end: 1rem;
inset-inline-end follows writing direction; right is a physical anchor.
inset-inline-end تتبع اتجاه الكتابة بينما right قيمة فيزيائية ثابتة.
05 / 08
Tab order broken by row-reverse hack
ترتيب Tab يتعطّل بسبب row-reverse
flex-direction: row-reverse;
dir="rtl" on container
row-reverse flips visuals but not focus order. Always use dir.
row-reverse يقلب الشكل لكنه لا يقلب ترتيب التركيز. استخدم dir دائماً.
06 / 08
Dates parse as Hijri in ar-SA by default
التواريخ تُفسَّر كهجرية افتراضياً في ar-SA
new Intl.DateTimeFormat('ar-SA')
{ calendar: 'gregory' }
Pass calendar: 'gregory' explicitly or you ship Hijri dates by accident.
مرّر calendar: 'gregory' صراحة وإلا ستُعرض تواريخ هجرية دون قصد.
07 / 08
Engineering units flip inside Arabic copy
الوحدات الهندسية تنعكس داخل النص العربي
<span>47.5 kPa</span>
<span dir="ltr">47.5 kPa</span>
Force LTR on engineering units even inside Arabic sentences.
افرض LTR على الوحدات الهندسية حتى داخل الجمل العربية.
08 / 08
Tabular numerics misalign across rows
الأرقام في الجداول تفقد محاذاة الأعمدة
font-family: 'IBM Plex Sans';
font-variant-numeric: tabular-nums;
Without tabular-nums, mono-style columns drift between rows.
بدون tabular-nums تنحرف الأعمدة الرقمية بين الصفوف.