دليل مرجعي

دليل RTL لعناصر الواجهة

لما الصفحة تنعكس من اليمين لليسار، مش كل حاجة بتنعكس معاها. الجزء الصعب مش تفعيل dir="rtl"، لكن معرفة إيه اللي المفروض ينقلب، وإيه اللي لو قلبته هيبان مكسور، وأنهي خاصية CSS منطقية تحلّ المشكلة من جذرها بدل ما تكتب قاعدتين لكل عنصر. ده المرجع اللي بيجمع الإجابات دي في مكان واحد.

من الخصائص المادية إلى المنطقية

أغلب أعطال التخطيط العربي سببها خاصية واحدة مكتوبة بالجهة بدل الاتجاه. الجدول ده هو الاستبدال المباشر: اكتب العمود الأوسط، وانسَ إنك محتاج قاعدة منفصلة لكل اتجاه.

لا تكتب	اكتب بدلها	لماذا
`margin-left / margin-right`	`margin-inline-start / margin-inline-end`	أكثر سبب منفرد لانكسار التخطيط العربي. القاعدة الواحدة تخدم الاتجاهين.
`padding-left / padding-right`	`padding-inline-start / padding-inline-end`	الحشو الداخلي للأزرار والحقول التي تحمل أيقونة على جانب واحد.
`left / right`	`inset-inline-start / inset-inline-end`	مواضع العناصر العائمة: الإشعارات، الأزرار الطافية، القوائم المنبثقة.
`text-align: left / right`	`text-align: start / end`	يجعل النص يتبع اتجاه المحتوى بدل أن يُثبَّت على جهة واحدة.
`border-left / border-right`	`border-inline-start / border-inline-end`	الخط الملوّن على حافّة التنبيهات والاقتباسات. ينتقل للجهة الصحيحة وحده.
`border-radius: a b c d`	`border-start-start-radius …`	مهمّ في الأزرار المتلاصقة ومجموعات الحقول، حيث تُدوَّر الأطراف الخارجية فقط.
`transform: translateX(100%)`	`translateX(calc(100% * var(--dir)))`	لا يوجد بديل منطقي للتحويلات، فعرِّف متغيّر اتجاه واضربه في القيمة.
`transform-origin: left`	`transform-origin: inline-start`	أشرطة التقدّم ومؤقّتات الإشعارات التي تفرغ في اتجاه القراءة.
`float: left`	`float: inline-start`	الصور الملتفّة بالنص داخل المقالات.
`background-position: left`	`background-position-x + [dir]`	لا يوجد بديل منطقي، فتحتاج قاعدة صريحة داخل [dir="rtl"].

إيه اللي ينعكس وإيه اللي ممنوع ينعكس

عكس كل الأيقونات بـ scaleX(-1) خطأ شائع بينتج واجهة غريبة: ساعة بعقارب مقلوبة وكاميرا مقلوبة. القاعدة: اعكس ما يدلّ على اتجاه في القراءة أو في التسلسل، واترك ما يمثّل شيئاً مادياً أو معياراً عالمياً.

ينعكس

الأسهم الاتجاهية: التالي والسابق، والرجوع، وسهم التراجع، وسهم «شوف المزيد».
أيقونات المحاذاة والمسافة البادئة، وأيقونات القوائم المرقّمة.
أشرطة التقدّم والمنزلقات، فهي تبدأ من اليمين.
ترتيب الأزرار في تذييل النوافذ الحوارية.
اتجاه لمعان الهياكل التحميلية وحركات الانزلاق.

لا ينعكس أبداً

الساعات والمؤقّتات وأي شيء يمثّل عقارب، فالوقت لا ينعكس.
رمز التحميل الدوّار، فدورانه ليس اتجاهاً في القراءة.
أيقونات الحالة: صح، خطأ، تحذير، معلومة.
الأيقونات التي تمثّل أشياء مادية معروفة: المفتاح، القفل، الكاميرا، عربة التسوّق.
الشعارات، وأي أيقونة تحمل حرفاً لاتينياً أو رقماً.
أزرار تشغيل الوسائط ▶، وهي معيار عالمي لا يتبع اتجاه اللغة.
رمز السهم المتّجه لأسفل في القوائم المنسدلة، لأنه عمودي لا أفقي.

الخلط الاتجاهي (Bidi)

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

الأرقام والمعرّفات داخل نص عربي

الأرقام تُكتب من اليسار لليمين حتى داخل الجملة العربية. الخلل يظهر عند التصاقها بعلامات مثل # أو % أو + أو -، فقد ينتقل الرمز للطرف الخطأ. الحلّ: لفّها بـ <bdi> أو span بـ unicode-bidi: isolate.

أسماء الكود داخل جملة عربية

اسم مثل aria-expanded أو max-width: 100% في نهاية جملة عربية قد تُزاح شرطته أو نقطتاه إلى الجانب الآخر. أي مقطع لاتيني منشور داخل نص عربي يجب أن يكون معزولاً اتجاهياً.

المحتوى الذي يكتبه المستخدم

لا تفترض لغة تعليق أو اسم ملف كتبه المستخدم. استخدم dir="auto" على الحقول وعلى مواضع العرض، فيتولّى المتصفّح تحديد الاتجاه من أول حرف ذي اتجاه قويّ.

الخطوط والارتفاع السطري

الحروف العربية أعلى وأكثر تشابكاً من اللاتينية، فارتفاع سطر مضبوط على الإنجليزية يبدو خانقاً بالعربية. ارفع line-height بمقدار 0.15 إلى 0.25 تقريباً في النصوص العربية، وألغِ letter-spacing تماماً لأنه يفكّك الحروف المتّصلة.

ملاحظات RTL لكل عنصر

219

كل صفحة عنصر في القاموس فيها قسم RTL خاص بيه. دي فهرسة سريعة لكل الملاحظات المنشورة.