نظام التصميم الذي يبدأ من اليمين إلى اليسار (RTL-First) يعامل الاتجاه والمحتوى العربي والنص المختلط كمتطلبات أصيلة في كل مكوّن. وضع dir="rtl" ضروري، لكنه لا يحدد الأيقونة التي تنعكس، أو ترتيب رقم هاتف داخل جملة، أو تنقل جدول بلوحة المفاتيح، أو ارتفاع السطر المناسب للخط العربي. الهدف هو نظام واحد يشترك في رموز التصميم والسلوك، ويتكيّف اتجاهه ونصه وفق قواعد موثقة، بدلاً من استثناءات متأخرة تتراكم مع كل صفحة.
ضع اللغة والاتجاه عند الجذر
حدد lang وdir على الوثيقة أو المنطقة المعزولة. اجعل locale في رابط المحتوى العام حتى يبقى الرابط بلغة ثابتة. لا تستنتج الاتجاه من لوحة المفاتيح أو حرف واحد. ترث المكونات اتجاه الصفحة، إلا محتوى له اتجاه مستقل معروف. تشرح قصة العربية أولاً الدافع، ويبين دليل Flutter وLaravel لماذا تدخل اللغة في عقد البيانات أيضاً.
استخدم الخصائص المنطقية
اعتمد inline وblock: مثل margin-inline-start وpadding-inline وinset-inline-end وtext-align: start. دع flex وgrid يتبعان القراءة ما لم يحمل التسلسل معنى ثابتاً. لا تنشئ stylesheet ثانية مليئة بـ left وright. سمّ tokens حسب الغرض. راجع transform وabsolute positioning لأن الافتراض الفيزيائي يبقى فيهما بعد إصلاح المسافات.
وثّق سياسة الأيقونات
أسهم السابق والتالي والتقدم غالباً تنعكس. الشعارات والتشغيل والساعة والهاتف وعلامات التحقق لا تنعكس عادة. بعض الرموز يعتمد على السياق. خزّن القرار في مكون الأيقونة أو metadata، لا في CSS متناثر. اربط الرمز المهم بنص أو accessible name. اختبر أن ترتيب لوحة المفاتيح والاسم المنطوق يتفقان مع الحركة بعد الانعكاس.
اعزل النص ثنائي الاتجاه
تحتوي العربية أسماء منتجات وبريداً وروابط وأكواداً وأرقاماً. استخدم <bdi> أو dir مناسباً للمقطع المولد أو إدخال المستخدم. لا تحفظ Unicode controls داخل البيانات كحل عرض لأنها تصعب الفحص والتصدير. اختبر الأقواس وعلامات الترقيم. قد يكون حقل الهاتف أو الكود LTR بينما يبقى label والتخطيط RTL. لا تغير قيمة البيانات لإجبار شكلها.
اضبط الخطوط لكل نظام كتابة
تختلف المقاييس الرأسية والحجم المرئي والوزن وline-height بين العربية واللاتينية. اختر خطوطاً بتغطية glyph وdiacritics وأوزان فعلية، واختبر الأرقام. لا تفرض قيمة تقص العلامات العربية. اسمح للزر والحقل بالنمو ولف النص. جرّب zoom وتكبير النظام. لقطة بعبارة قصيرة لا تختبر component مترجماً.
حافظ على ترتيب المستند وسهولة الوصول
اكتب ترتيباً منطقياً للقراءة والتنقل، ثم دع CSS يعكس العرض. تجنب order الذي يجعل الشاشة مختلفة عن قارئ الشاشة. اربط رؤوس الجدول واختبر horizontal scroll من logical start. ضع رسالة الخطأ قرب الحقل. راجع focus والد dialogs والقوائم والcarousel في الاتجاهين. اللون أو الموضع وحدهما لا يكفيان لتوصيل الحالة.
أدخل المحتوى في عقد النظام
امنح الكاتب رسالة كاملة وسياقاً بدلاً من fragments تُجمع بترتيب إنجليزي. استخدم أدوات plural والتنسيق، ولا تفترض موضع الرقم والاسم. لا تضع حد أحرف إلا لسبب حقيقي، وصمم component لمعنى أطول. اكتب SEO title وdescription لكل لغة بنية بحثها، ولا تستخدم H1 مترجماً طويلاً كعنوان نتائج. راجع الروابط كي تبقى اللغة.
اختبر المكوّن ثم رحلة الاستخدام
اعرض story بالعربية والإنجليزية والنص الطويل والمختلط والخطأ والتحميل والفراغ. lint يلتقط physical properties أو dir ناقصاً لكنه لا يحكم المعنى. اختبر نموذجاً كاملاً وpagination وتنقلاً، لا بطاقة منفصلة. استخدم جهازاً وتكبيراً وقارئ شاشة عند الإمكان. سجل سياسة الانعكاس حتى لا يعيد redesign التخمين.
حدّد اتجاه الرسم وفق معناه
قد يتبع timeline لغة القراءة، لكن الخريطة والإحداثيات لا تُعكس. تحتاج المحاور والlegend والtooltip والتنقل قراراً. تبدأ خطوات التقدم غالباً من inline-start، بينما media timeline يتبع النمط المعروف. اسأل ماذا يمثل الاتجاه قبل scaleX(-1) الذي يقلب النص والنقر أيضاً. اختبر الأرقام والعملات داخل الرسم.
أدر الاستثناءات والترحيل
أنشئ check للممتلكات الفيزيائية الجديدة، مع قائمة استثناءات مبررة. رحّل المكونات الأعلى استخداماً وأزل overrides بعد اكتمال كل واحد. صنف العيوب إلى bidi وأيقونات وترتيب وقص، كي يصلح النظام لا الصفحة فقط. اطلب دليلاً عربياً وإنجليزياً في review. جودة الاتجاه مسؤولية release وليست تنظيفاً لاحقاً لفريق الترجمة.
اضبط النماذج والبيانات الجدولية
تحتاج labels وhelp وerrors إلى ترتيب قراءة واحد، بينما قد يكون input نفسه باتجاه مختلف. اختبر prefix وsuffix والعملات وأزرار إظهار كلمة المرور والتاريخ. في الجداول، حافظ على علاقة header بالخلايا وقرار واضح لتثبيت الأعمدة والتمرير. لا تعكس ترتيب أعمدة يحمل معنى قانونياً أو محاسبياً بلا مراجعة، ولا تجعل overflow يخفي أول إجراء في الاتجاه العربي.
راجع النسخ والتصدير والطباعة
قد تبدو الشاشة صحيحة بينما يخرج PDF أو البريد أو CSV باتجاه أو ترميز خاطئ. اختبر الطباعة والأسماء العربية والخطوط المضمنة والأرقام والنص المختلط. لا تحفظ رموز اتجاه خفية في البيانات لإصلاح ملف واحد. عالج التنسيق عند طبقة العرض، واحتفظ بالقيمة الأصلية قابلة للبحث والتصدير. ضع عينات ثنائية اللغة في اختبارات التقارير.
ثبّت مصفوفة قبول ثنائية الاتجاه
اختر مكونات عالية الخطورة مثل الجدول والحقل المختلط والقائمة المنسدلة والتنبيه والملف المطبوع. اختبرها بنص عربي طويل، واسم لاتيني، وأرقام، وحالة خطأ، ولوحة مفاتيح، وتكبير. سجّل السلوك المتوقع في Story أو اختبار بصري مناسب. المصفوفة تمنع إصلاح الصفحة نفسها مراراً وتحوّل RTL إلى عقد مكوّن قابل للصيانة.
الخلاصة: اجعل الاتجاه عقداً قابلاً لإعادة الاستخدام
ينجح النظام عندما يبني الفريق صفحة جديدة من دون إعادة قرار left وright، مع محتوى طبيعي ووصول صحيح. ثبت document direction وlogical tokens وسياسة الأيقونات وbidi والخط والاختبار الثنائي. لتقييم مكتبة قائمة، اطلب مراجعة Design System RTL-first تشمل النماذج والجداول والتنقل والنص المختلط ولوحة المفاتيح.