لوحة الأوامر

الصفوف عربية الاتجاه وأسماء الأوامر تأتي مختلطة: «فتح Pull Request جديد» أو «تصدير التقرير إلى PDF». والمحارف المحايدة الملاصقة للمقطع اللاتيني (النقطتان، القوسان، النقاط الثلاث، الشرطة المائلة) تلتحق بالنصّ العربي حولها فتنتقل إلى الطرف الآخر من السطر. لفّ كل تسمية في <bdi>، فهو يحمل dir="auto" و unicode-bidi: isolate معاً ويجعل التسمية وحدة اتجاه مستقلّة لا يُعاد ترتيب ما بداخلها مع ما حولها. ولا تكتفِ بـ dir="auto" على حاوية اللائحة كلها: الخوارزمية تحسب الاتجاه من أوّل محرف قويّ في العنصر، فيرث كل صفّ اتجاه الصفّ الأوّل.

التلميح يجلس عند نهاية الصفّ المنطقية، فينتقل إلى يسار الصفّ في العربية: استعمل margin-inline-start: auto داخل صفّ flex، لا margin-left: auto ولا float. أما ترتيب المفاتيح داخل التلميح فلا ينعكس أبداً، والرموز ⌘ و⇧ و⌥ فئتها الاتجاهية في Unicode هي ON أي محايد آخر، فإذا وقعت في سياق عربي أخذت اتجاه الفقرة وانفصلت عن الحرف اللاتيني الذي تسبقه، فيظهر ⌘K بالرمز على يمين الحرف بدل يساره. اكتب على حاوية المفاتيح dir="ltr" أو لفّها بـ <bdi dir="ltr">. وإذا رسمت كل مفتاح في <kbd> مستقلّ داخل صفّ flex فالمحور المضمّن نفسه سينعكس ويعرض K قبل ⌘: العلاج direction: ltr على الحاوية لا flex-direction: row-reverse.

لا تثبّت dir="rtl" على حقل الأمر. المستخدم في لوحة عربية يكتب settings و PDF بحروف لاتينية، وفي حقل مقفول على rtl تلتحق النقطة والشرطة المائلة والقوس بالفقرة العربية فتقفز إلى الطرف المقابل من الحقل. اكتب dir="auto" على الـ input نفسه: قاعدة HTML أن اتجاه الحقل يُحسب من أوّل محرف قويّ في قيمته، ويرث اتجاه العنصر الأب ما دامت القيمة فارغة، فيبقى النصّ الإرشادي العربي على اليمين وينقلب الحقل إلى ltr مع أوّل حرف لاتيني. ووضع dir="auto" على الغلاف حول الحقل لا يفعل شيئاً، لأن الحساب هناك يمرّ على النصّ الظاهر ولا يرى قيمة الـ input أصلاً.

الشريط الرفيع الذي يعلّم الصفّ النشط يقف عند بداية الصفّ المنطقية: إما عنصر ::before بـ inset-inline-start: 0، وإما border-inline-start-width: 2px على الصفّ نفسه مع لون شفّاف في بقيّة الصفوف حتى لا يتزحزح النصّ عند انتقال التمييز. ولا ترسمه بـ box-shadow: inset 2px 0، فإزاحات الظلّ فيزيائية بحتة ولا مكافئ منطقي لها في CSS، فيبقى الشريط على الجهة الخطأ بعد الانعكاس. وأيقونة الأمر تتبع البداية المنطقية نفسها بفضل ترتيب flex، فلا تحتاج إلى margin-right أبداً.

مطابقة الضغطة بـ event.key === "k" تسقط عند المستخدم العربي: event.key يحمل المحرف الذي ينتجه التخطيط، والمفتاح الذي عليه K في التخطيط العربي القياسي يعطي «ن». أما event.code فيصف الموضع الفيزيائي ويبقى "KeyK" مهما تبدّل التخطيط، فاعتمده أو اقبل القيمتين معاً. والوجه الآخر أن ما تعرضه في التلميح يجب أن يطابق ما هو مطبوع على المفتاح تحت يد المستخدم، فاقرأ الحرف من navigator.keyboard.getLayoutMap() حيث تتوفّر مع حرف لاتيني احتياطياً، ولا تشتقّه من الكود ثابتاً. وهذه المسألة ليست مسألة اتجاه: القاعدة نفسها تسري على الفارسية والعبرية وعلى كل تخطيط غير QWERTY.