ما أخطاء واجهات RTL العربية الشائعة، وكيف تُصلحها؟
ستة أخطاء تكسر الواجهة العربية، ومع كلٍّ منها إصلاحه:
- اتجاه غير مُعلَن من الجذر: ضع dir بقيمة rtl وlang بقيمة ar على عنصر html نفسه لا على مكوّن داخلي، فترث الصفحة كلها الاتجاه.
- هوامش ومحاذاة لم تنعكس: margin-left وpadding-right وtext-align: left كلها فيزيائية؛ استبدلها بنظيراتها المنطقية: margin-inline-start وpadding-inline-end وtext-align: start.
- ما لا تنقذه الخصائص المنطقية: translateX والإزاحة الأفقية في box-shadow واتجاه linear-gradient تبقى فيزيائية؛ فاقلب إشارتها أو اتجاهها صراحة عند RTL.
- عكس الأيقونات بلا تمييز: اعكس ما يدلّ على اتجاه داخل الواجهة، كسهمَي الرجوع والتالي وشريط تقدّم التحميل، ولا تعكس الساعة ولا أزرار تشغيل الوسائط ولا الشعارات.
- أرقام تتبعثر داخل الجملة: رقم الهاتف الدولي داخل جملة عربية تنقلب مجموعاته وتنتقل علامة + إلى طرفه الآخر، ورمز العملة ينتقل إلى الجهة الأخرى من السعر. لُفّ كل قيمة ديناميكية بعنصر bdi، وضع dir بقيمة ltr على الهاتف والبريد وIBAN في النص وفي حقول الإدخال.
- نصّ يُقتطع من الجهة الخطأ: النقاط الثلاث في text-overflow: ellipsis تقع في نهاية السطر بحسب اتجاه العنصر، فالعنصر الذي ورث اتجاه LTR خطأً يقصّ أول الجملة العربية ويُبقي آخرها؛ فصحّح اتجاهه أولًا.
ما الذي تضيفه المهارة إلى هذه القائمة؟
مدقّق واجهات RTL العربية مهارة أصلية تحوّل مساعدك إلى مدقّق يمشي في ثماني تمريرات ثابتة على واجهتك العربية، ويُخرج جدولًا لا مقالًا: عقد الاتجاه، ثم الخصائص المنطقية، ثم عزل النصّ ثنائي الاتجاه، ثم المرايا، ثم ما يكسر العربية في شيفرة الواجهة، ثم الأرقام، ثم حقول الإدخال، ثم التحقّق. كل صفّ في التقرير له ملف وسطر ودرجة خطورة ونصّ إصلاح.
بماذا تحصل
- الخريطة الكاملة من الفيزيائي إلى المنطقي، ومعها خريطة أصناف Tailwind، وقائمة ما ينعكس وحده فلا يُعكس مرّتين.
- القائمة الحرجة لما لا تصلحه الخصائص المنطقية أبدًا: التحويلات، والظلال، والقصّ، والتدرّجات، وإحداثيات الرسم، وحساب التمرير والسحب، ومعالِجات مفاتيح الأسهم.
- اثنتان وأربعون سلسلة اختبار للنصّ ثنائي الاتجاه — رقم طلب، سعر، هاتف، بريد، مسار، مدى تاريخ، IBAN — ولكل واحدة ما يحدث لها فعلًا بلا عزل وإصلاحها، وصفحة اختبار جاهزة تفتحها ثم تعيد إنتاجها داخل مكوّناتك.
- جدول قرار المرايا: ستة وستون عنصرًا موزّعة بين «يُعكس» و«لا يُعكس» و«قرار»، وصفوف القرار تحمل المفاضلة مكتوبة بدل إجماع مُختلَق.
- وصفات الأطر: Tailwind، وMUI مع Emotion، وNext.js، وVue، وFlutter، وReact Native، وSwiftUI — لكل واحد ما ينعكس تلقائيًا وما يبقى عليك وفحص سريع يحسم.
- قائمة CSS الممنوعة على النصّ العربي بأسبابها، ومكدّس الخط الاحتياطي، وقائمة خطوط حرّة.
نموذج من مخرجات المهارة
هذا مثال على بيانات اختبار لا على عميل حقيقي. أعطيتُ المهارة خمسة عشر ملفًا من واجهة متجر قهوة تجريبي بنسختين عربية وإنجليزية (Next.js مع Tailwind) ومعها مقتطف من CSS المولَّد، بلا لقطات شاشة. خرج جدول من 34 صفًّا: 10 منها S1، و19 S2، و5 S3، مع 3 صفوف قرار. هذه خمسة أمثلة منه:
- الاتجاه على عنصر داخلي: السطر 10 في layout.tsx بلا dir، فخرج التنبيه المُلحَق بـ body بالاتجاه ltr وقُرئت رسالته «بنجاح، ORD-2291، تم، تأكيد، طلبك، رقم». ويحذّر الصفّ من نقل dir وحده، لأن الدرج المغلق يظهر حينها كاملًا على الشاشة، وعرضه 320 بكسلًا.
- عزل القيم: رقم المندوب +971 50 000 1234 ظهر 1234 000 50 971+، وقيمة البريد 12345@example.com في سياق RTL ظهرت example.com@12345، وكلاهما S1. أما معرّف الطلب ORD-2291 فعُرض سليمًا في القياس، فسُجّل وقاية S3 لا عطلًا.
- الاختصار الرباعي: الهامش margin: 4px 8px 12px 16px لا ينعكس. التحويل الساذج إلى margin-inline: 8px 16px قلب بناء LTR (يسار 8 ويمين 16)، والصحيح margin-inline: 16px 8px أعطى يسار 16 ويمين 8 في LTR، ويسار 8 ويمين 16 في RTL.
- اتجاه العدد: شريط التقدّم عند 25% امتلأ 80 بكسلًا من 320 مبتدئًا من اليسار، وأول خطوة في أقصى اليمين (S1). بعد الإصلاح امتلأ من 240 إلى 320.
- الأمان وما لم يُفحص: اسم ملف يحوي U+202E عُرض في حاوية LTR invoice-exe.pdf وأُخفي امتداده الحقيقي، وأعاده التنظيف إلى invoice-fdp.exe (S1 أمني). وسُجّل في «ما لم يُفحص» أن scrollBy قيس في Chrome فقط، وأن بوابة Tailwind جرت على مقتطف مُلصق لا على بناء كامل.
وما تعيد استعماله هو الجدول نفسه، يصلح قائمة عمل لفريقك: لكل صفّ ملف وسطر وخطورة ونصّ إصلاح، ولكل صفّ مرجّح فحص واحد يحسمه.
لمن هي؟
لمطوّري الواجهات الذين يعرّبون منتجًا قائمًا أو يبنون واجهة عربية من البداية، ولمن يراجع عمل غيره ويحتاج تقريرًا قابلًا للتنفيذ بدل ملاحظات عامة.
التثبيت
ثلاث طرق كاملة — Claude على الويب والتطبيق، وClaude Code، وأدوات أخرى — مشروحة خطوة بخطوة في الدليل العربي README-AR.md داخل الحزمة.
الحدود
المهارة تدقّق عرض النصّ لا محتواه: لا ترجمة، ولا توليد مستندات على الخادم، ولا مساس بطبقة التخزين والبحث في قاعدة البيانات، ولا اختيار عائلة خطّ وضبط مقاييسها — وتُسمّي هذه الحالات وتحيلها بدل أن تعالجها. ولا تذكر إصدارًا يدعم خاصية بعينها، بل تذكر الخاصية وتطلب التحقّق في بيئتك. وما استُنتج من لقطة شاشة يُوسَم «مرجّح» ومعه الفحص الذي يحسمه. وفي كل تقرير قسم صريح باسم كل تمريرة لم تُنفَّذ وسببها.
