الأسس
مبادئ العربية والاتجاه
الخصائص المنطقية، والانعكاس المقصود، والخط العربي الأصيل، والأرقام، وعزل المقاطع اللاتينية، والحقول، والبوابات: القرارات التي يتخذها كل مكوّن نيابةً عنك.
عكسُ التخطيط إلى اليمين هو الجزء السهل، وأغلب المكتبات تفعله اليوم. لكن المنتج العربي يظل ينكسر في مواضع لا تصل إليها المرآة: الخط، وارتفاع السطر، وترتيب الأرقام داخل الجملة، واتجاه حقل الهاتف، واللغة التي ينطق بها قارئ الشاشة. كل مكوّن في Ritla UI مبني على الفحوص نفسها التي تشغّلها ريتلا على المواقع الحيّة، فتُحسم هذه المسائل مرة واحدة داخل المكوّن، لا في كل شاشة من جديد.
هذه الصفحة خلاصة تلك القرارات. في كل قسم تجد الفحوص التي تلتقط الخطأ إن وصل إلى الإنتاج رغم ذلك.
خصائص منطقية، لا فيزيائية#
التخطيط المكتوب بالاتجاهات الفيزيائية يُكتب مرتين: مرة للإنجليزية، ومرة أخرى فوقها للعربية. أما المكتوب بالاتجاهات المنطقية فيُكتب مرة واحدة ويتبع dir.
| فيزيائي (خطأ) | منطقي (ما نعتمده) | ما يقابله في CSS |
|---|---|---|
ml-4، mr-4 | ms-4، me-4 | margin-inline-start، margin-inline-end |
pl-4، pr-4 | ps-4، pe-4 | padding-inline-start، padding-inline-end |
left-0، right-0 | start-0، end-0 | inset-inline-start، inset-inline-end |
text-left، text-right | text-start، text-end | text-align: start، text-align: end |
border-l، border-r | border-s، border-e | border-inline-start، border-inline-end |
rounded-l-8 | rounded-s-8 | border-start-start-radius، border-end-start-radius |
لا يحتوي أي مكوّن على صنف باتجاه فيزيائي، ويفشل بناء كنز إن ظهر واحد. وفي كودك أنت، تظهر الأخطاء نفسها في الفحوص R030 وR031 وR032 وR033. ولا تُحاكِ الصف من اليمين بـ flex-direction: row-reverse، فالشاشة تنعكس وترتيب التنقل بمفتاح Tab لا ينعكس معها (R081).
انعكاس مقصود#
الانعكاس قرار يُتخذ لكل عنصر على حدة، لا تحويل يُطبَّق على الصفحة كلها.
ينعكس: الأسهم، وعلامات التوجيه، وأزرار الرجوع والتالي، والتنقل، وأشرطة التقدم، والمنزلقات، والخطوات، ومسارات التنقل، وكل ما يشير في اتجاه القراءة.
لا ينعكس أبدًا: أزرار الوسائط (التشغيل والإيقاف والتقديم)، والساعات والمؤقتات، وعلامات الصح، والشعارات، والمحور الرقمي في الرسوم البيانية، وأرقام الهواتف، وأرقام البطاقات، والكود.
الأيقونات الاتجاهية في Ritla UI تنعكس وحدها عبر أداة الأيقونات، من قائمة تُحدَّث مع ملف Figma، فلا يقلب أحد أيقونة بيده فيخطئ في اختيارها. السهم الذي يشير عكس الاتجاه الذي يتحرك فيه عنصره يلتقطه R025، والنص الذي يقول «اضغط السهم على اليمين» خاطئ في إحدى اللغتين (R082).
خط عربي أصيل#
- خط عربي دائمًا. النص اللاتيني بخط Geist، والعربي بخط IBM Plex Sans Arabic، وكل قائمة خطوط تتضمن العائلة العربية، فلا تسقط العربية إلى خط نظام يصادف أنه يحوي الحروف (
R050). - أسطر أعلى. تحتاج العربية مساحة فوق السطر وتحته أكثر مما تحتاجه اللاتينية، فلا يقل ارتفاع سطر النص العربي عن 1.5 (
R052). - بلا تباعد بين الحروف. العربية خط متصل، والتباعد يقطع الوصل، فلا يُضاف إلى النص العربي أبدًا (
R051)، ولا يُطبَّق عليه أسلوب العناوين اللاتينية بالأحرف الكبيرة والتباعد (R055). - بلا مائل وبلا حجم صغير. ليس للعربية مائل حقيقي (
R054)، وتضيع تفاصيلها تحت 14 بكسل (R053).
تبديل اللغة يبدّل عائلة الخط وارتفاع الأسطر والتباعد عبر متغيرات الثيم، فلا يحمل أي مكوّن صنفًا مشروطًا بالاتجاه أو بالوضع الداكن مثل rtl: أو dark:.
الأرقام#
تستخدم الواجهات العربية نظامين للأرقام، وكلاهما صحيح، أما الخلط بينهما في الشاشة نفسها فليس صحيحًا (R061).
- الأرقام الغربية:
0123456789 - الأرقام المشرقية:
٠١٢٣٤٥٦٧٨٩
يعتمد Ritla UI الأرقام الغربية افتراضيًا، ويتحوّل إلى المشرقية بإعداد واحد هو numerals في المزوّد. تُنسَّق الأرقام بـ Intl.NumberFormat مع الامتداد -u-nu- لا باستبدال المحارف، فتتبع فواصل الآلاف والكسور الاختيار نفسه. والتواريخ كذلك: اسم شهر إنجليزي أو تاريخ بصيغة MM/DD/YYYY داخل نص عربي يلتقطه R060، وتبقى علامة النسبة والوحدات في ترتيب ثابت (R063).
عزل المقاطع اللاتينية#
خوارزمية الاتجاه الثنائي في يونيكود تعيد ترتيب المحارف المحايدة حول المحارف القوية المجاورة لها. داخل جملة عربية قد يظهر رقم الهاتف أو البريد الإلكتروني أو اسم المنتج أو رقم الطلب بترتيب خاطئ، وتنتقل علامات الترقيم إلى الطرف الآخر (R021، R024).
- أرقام الهواتف والبطاقات ورموز التحقق والمعرّفات والكود توضع في عزل من اليسار إلى اليمين:
<bdi dir="ltr">، أوunicode-bidi: isolateمعdir="ltr". - أسماء العلامات والمنتجات داخل النص العربي توضع في
<bdi>. - النص الذي قد يصل بأي من اللغتين (محتوى المستخدم، ورسائل الخادم، وحقول البحث) يأخذ
dir="auto"، فتبقى النقطة في آخر الرسالة الإنجليزية داخل تخطيط عربي. - المقطع الإنجليزي المقصود داخل نص عربي يحمل
lang="en"، فيبدّل قارئ الشاشة صوته وتبدّل قائمة الخطوط عائلتها (R080).
وضع المعاينة «معكوس» في صفحة كل مكوّن موجود لالتقاط هذا النوع من الأخطاء: هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، فيفصل خطأ الاتجاه عن خطأ الترجمة.
الحقول#
- حقول النص تتبع اتجاه الصفحة، والمؤشر والنص الإرشادي في جهة البداية حتى والحقل فارغ (
R023). - الحقول التي محتواها من اليسار إلى اليمين بطبيعته تبقى كذلك داخل النموذج العربي:
telوemailوurlوأرقام البطاقات ورموز التحقق (R070). - قائمة
<select>بخيارات عربية تُعرض من اليمين إلى اليسار (R072). - التسميات والنصوص المساعدة ورسائل التحقق مترجمة كلها، لا النص الإرشادي وحده (
R071،R012)، وحقول الهوية تحتفظ برموزautocompleteالخاصة بها (R073).
البوابات والطبقات#
النوافذ الحوارية والأدراج والنوافذ المنبثقة والقوائم والتلميحات والإشعارات تُعرض خارج العنصر الذي فتحها، غالبًا في آخر <body>. فإن كانت الصفحة عربية وفيها قسم إنجليزي، أو العكس، أخطأت البوابة التي تقرأ الاتجاه من المستند.
طبقات Ritla UI تقرأ أقرب dir وlang للعنصر الذي فتحها وتضعهما على الطبقة نفسها، فالقائمة التي تُفتح من بطاقة إنجليزية داخل صفحة عربية تظهر بالإنجليزية، وتتحرك أسهم لوحة المفاتيح في الاتجاه الصحيح في الحالتين.
المستند نفسه#
كل ما سبق يفشل بصمت إن لم تصرّح الصفحة بما هي. ضع dir وlang على <html> لا على <div> يغلّف الصفحة (R001، R002)، وأعطِ كل صفحة عربية زوج hreflang الخاص بها (R003)، ورابطًا أساسيًا بلغتها (R006)، وعنوانًا ووصفًا عربيين وog:locale (R004، R005).
افحص صفحاتك#
كل فحص مذكور في هذه الصفحة تشغّله ريتلا. افحص موقعك لترى في أيها تخفق صفحاتك، أو اقرأ قائمة الفحوص كاملة (EN).