الورقة السفلية

المقبض متمركز أفقياً، وشكله متماثل حول محوره الرأسي، فليس فيه ما ينعكس. الفخّ في طريقة التمركز لا في الشكل: inset-inline-start: 50% مع transform: translateX(-50%) تبدو سليمة لأنها تعمل في LTR، لكنها تنكسر في RTL لأن الخاصّية المنطقية صارت تقيس من اليمين بينما translateX ظلّ فيزيائياً، فينزاح المقبض بمقدار عرضه كاملاً إلى الجهة الخطأ. ضَعْه في المنتصف بحاوية flex فيها justify-content: center، أو بـ margin-inline: auto، واترك التموضع المطلق كلّه.

زوج «إلغاء / تمّ» في رأس الورقة يتبادل الطرفين: إلغاء عند البداية المنطقية وتمّ عند النهاية، فيكون إلغاء يميناً في العربية ويساراً في الإنجليزية. ثبّت ترتيب الـ DOM (إلغاء أوّلاً) واستخدم justify-content: space-between فينعكس الصفّ وحده مع direction، ولا تكتب flex-direction: row-reverse داخل [dir="rtl"] لأن القلب سيقع مرّتين وينفصل الترتيب البصري عن ترتيب التنقّل بلوحة المفاتيح أو بـ VoiceOver. وفي SwiftUI حافّتا leading و trailing منطقيّتان تنعكسان وحدهما متى ورثت الواجهة layoutDirection = .rightToLeft، والذي لا ينعكس هو ‎.offset(x:) لأنه إزاحة فيزيائية، والبديل عنه حشو أو محاذاة.

الدالّتان env(safe-area-inset-left) و env(safe-area-inset-right) تصفان حافّتَي الجهاز نفسه، النتوء وفتحة الكاميرا وانحناء الزجاج، ولا مقابل منطقيّ لهما في CSS، فلا وجود لشيء اسمه env(safe-area-inset-inline-start). ومن يمشّط الملفّ ليستبدل كل left و right بنظيرتها المنطقية يقلب هاتين معهما، فيدفع محتوى الورقة تحت النتوء لحظة يدور الجهاز أفقياً. اتركهما فيزيائيتين، وادمج حشوك أنت في التعبير نفسه: padding-left: max(1rem, env(safe-area-inset-left)) ومثلها لـ padding-right، فلو كتبت padding-inline بعدهما دهس الإعلانُ المتأخّر قيمةَ الأمان وعاد المحتوى إلى تحت النتوء. والقاعدة نفسها على أندرويد: WindowInsets.safeDrawing يسلّمك left و right بوصفهما جهتَي الجهاز لا بداية السطر ونهايته، فطبّقهما كما جاءا ولا تعكسهما بيدك.

كل حركة الورقة على المحور الكتلي: السحب صعوداً وهبوطاً، ونقاط التوقّف، وعتبة السرعة التي تقرّر الإغلاق. ولا شيء من ذلك يتأثّر بـ direction، فلا تكتب له أي قاعدة داخل [dir="rtl"] ولا تلمس translateY. والخطأ يقع عند من يعامل الورقة معاملة الدرج فيضيف سحباً أفقياً للإغلاق: ذاك محور مضمّن ينقلب معناه بين اللغتين، وعلى iOS يصطدم بإيماءة الرجوع التي موضعها الحافّة البادئة، وهي في الواجهة العربية الحافّة اليمنى. أبقِ الإغلاق على ثلاثة طرق محايدة: السحب لأسفل، وزرّ صريح، والنقر على الطبقة الحاجبة.

انعكاس الورقة لا يعني أن ما بداخلها انعكس معها. على أندرويد لا ينعكس شيء أصلاً ما لم يكن android:supportsRtl="true" في الـ manifest، وبعدها لا بدّ من paddingStart و layout_marginStart بدل نظائرها اليسارية. وداخل الصفوف: الأيقونة القائدة والشيفرون يتبادلان الطرفين، والشيفرون نفسه اتجاهيّ فاقلبه بـ transform: scaleX(-1) داخل [dir="rtl"] أو بـ rtl:-scale-x-100 في Tailwind، أو خُذ الأيقونة من Icons.AutoMirrored في Compose؛ أمّا النجمة وأيقونات الحالة فلا تنعكس أبداً وقلبها يجعلها تبدو مكسورة. واضبط المحاذاة بـ text-align: start لا left، ولفّ الأسعار وأرقام الهواتف بـ <bdi> أو unicode-bidi: isolate حتى لا ينزلق رمز العملة إلى الطرف الخطأ من السطر العربي.