تصميم النماذج والحقول لـ RTL
حقول تبقى من اليسار إلى اليمين
بعض القيم تُكتب وتُقرأ دائمًا من اليسار إلى اليمين حتى في الصفحة العربية. اضبط <code>;dir="ltr"</code>; على هذه الحقول:
- عناوين البريد الإلكتروني والروابط.
- أرقام الهاتف.
- الرموز، مثل رموز التحقق ورموز الخصم والمعرّفات.
والسبب عملي. فعنوان البريد مثل <code>;name@example.com<;/code>; المكتوب في حقل من اليمين إلى اليسار قد تظهر فيه علامة @ والنقاط في أماكن مربكة، وقد يظهر رمز التحقق معكوسًا. أما الحقول من اليسار إلى اليمين فتُبقي هذه القيم مقروءة وسهلة المقارنة بمصدرها.
يمكن أن يبقى الحقل في الجهة اليمنى من التخطيط، فالنص داخله وحده يجري من اليسار إلى اليمين. ويفضّل كثير من المصممين محاذاة القيمة إلى حافة البداية لتتوافق مع التسمية.
الأسماء والنص الحر
قد يستقبل حقل الاسم نصًا عربيًا أو لاتينيًا. استخدم <code>;dir="auto"</code>; ليتبع الاتجاه ما يكتبه المستخدم. وينطبق ذلك على التعليقات والعناوين وحقول البحث.
مع الاتجاه التلقائي يبدأ النص من الجهة الصحيحة فور كتابة أول حرف قوي. لا تثبّت اتجاهًا على هذه الحقول، لأن ذلك يضع الأسماء العربية في صندوق محاذٍ لليسار أو الأسماء اللاتينية في صندوق محاذٍ لليمين.
التسميات والنص الإرشادي والرسائل
- حاذِ التسميات إلى حافة البداية، وهي الحافة اليمنى في العربية.
- اكتب النص الإرشادي ورسائل التحقق بعربية طبيعية وليس ترجمة حرفية للصياغة الإنجليزية.
- أبقِ المثال مثل <code>;name@example.com<;/code>; بحروف لاتينية لأن القيمة نفسها لاتينية.
- لا تستخدم النص الإرشادي بديلًا عن التسمية.
- ضع نص المساعدة وعلامات الحقول الإلزامية عند حافة البداية قرب التسمية، حيث تقع العين أولًا.
أنواع الحقول والصيغ والعناصر
استخدم الخاصيتين المناسبتين في كل حقل، وهما نوع الحقل <code>;type<;/code>; ووضع الإدخال <code>;inputmode<;/code>;، مثل <code>;type="email"</code>; و<code>;type="tel"</code>; و<code>;inputmode="numeric"</code>;، ليعرض الهاتف لوحة مفاتيح مناسبة.
نسّق العملات والتواريخ بحسب اللغة والمنطقة بدل كتابتها يدويًا. ويجب أن تنعكس منتقيات التاريخ ومؤشرات الخطوات: الشهر السابق في اليمين والتالي في اليسار، ويمتلئ مؤشر الخطوات من اليمين إلى اليسار.
العملات والتواريخ تحتاج إلى تنسيق بحسب اللغة والمنطقة. فقد يقع رمز العملة قبل المبلغ أو بعده، وقد يتغير ترتيب اليوم والشهر والسنة. استخدم واجهات Intl وتجنب الأنماط المكتوبة يدويًا.
ورسائل التحقق تستحق العناية. قل ما الخطأ وكيف يُصلح، وضع الرسالة تحت الحقل محاذاة لحافة البداية. وأبقِ أيقونة الخطأ في جهة البداية كذلك ليُقرأ النص والأيقونة وحدة واحدة.
اختبر كل نموذج بإدخال عربي ولاتيني ومختلط قبل الإطلاق.
المصادر
- W3C. Right-to-left text in HTML forms. https://www.w3.org/International/questions/qa-html-dir
- MDN Web Docs. inputmode. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.