تعمل كل مكوّنات SDAIA UI بالعربية. والواجهة من اليمين إلى اليسار ليست مجرد نص محاذى إلى اليمين، بل تخطيط معكوس بالكامل: بداية الصفحة وترتيب القراءة واتجاه الحركة كلها تبدأ من اليمين.
اضبط الاتجاه مرة واحدة
اضبط dir="rtl" وlang="ar" على العنصر <html>. تقرأ المكوّنات الاتجاه الموروث، فلا حاجة إلى تمرير dir لكل مكوّن.
// app/layout.tsx (Next.js) export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="ar" dir="rtl"> <body>{children}</body> </html> ); }
- اضبط الخاصيتين معًا. تعكس
dirالتخطيط، وتحدّدlangصوت قارئ الشاشة والخطوط وقواعد اللغة، وتعتمد عليها بعض أدوات بناء CSS لعكس المسافات (انظر الملاحظة أدناه). - إن كان المستخدم يبدّل اللغة دون إعادة تحميل الصفحة، فحدّث الخاصيتين وأعد عرض شجرة المكوّنات. بعض المكوّنات (مثل ترقيم الصفحات والرسوم البيانية ومشغّلات الوسائط) تقرأ الاتجاه عند تحميلها.
الخاصية dir
- تقبل المكوّنات
dir?: 'ltr' | 'rtl'. مرّرها فقط لمنطقة يختلف اتجاهها عن اتجاه الصفحة، مثل نموذج عربي داخل صفحة إنجليزية. - بعض المكوّنات الأقدم تقبل أيضًا
rtl?: boolean، وهي خاصية مُهمَلة: استخدمdir="rtl"بدلًا منها. وإن ضُبطت الاثنتان فالأولوية لـdir. - دون
dirيتبع المكوّن اتجاه الصفحة.
استخدم المسافات والمحاذاة المنطقية
اكتب شيفرة التخطيط بأصناف منطقية (البداية والنهاية) بدل الأصناف الفيزيائية (اليسار واليمين). الأصناف المنطقية تنعكس مع الاتجاه، والفيزيائية لا تنعكس.
| استخدم | بدلًا من |
|---|---|
| ps-* و pe-* (الحشوة عند البداية/النهاية) | pl-* و pr-* |
| ms-* و me-* (الهامش عند البداية/النهاية) | ml-* و mr-* |
| start-* و end-* (الموضع) | left-* و right-* |
| text-start و text-end | text-left و text-right |
| border-s و border-e و rounded-s و rounded-e | border-l و border-r و rounded-l و rounded-r |
// ينعكس تلقائيًا <div className="ps-4 me-2 text-start border-s">…</div> // يبقى على اليسار في الاتجاهين — تجنّبه في التخطيط <div className="pl-4 mr-2 text-left border-l">…</div>
بعض أدوات بناء CSS (مثل Next.js مع أهداف متصفحات قديمة) تحوّل الخصائص المنطقية إلى قواعد مرتبطة بالخاصية lang. في هذه الحالة لا يكفي dir="rtl" وحده لعكس المسافات، بل يحتاج العنصر أيضًا إلى lang="ar". ضبط الخاصيتين على <html> يتجنّب المشكلة.
ما يُعكس وما لا يُعكس
| يُعكس | يبقى كما هو |
|---|---|
| تخطيط الصفحة والتنقّل والأشرطة الجانبية | الشعارات وعلامات الهوية والأعلام |
| أسهم الرجوع والتقدّم والتالي والسابق (استخدم flipOnRtl) | أيقونات التشغيل والإيقاف المؤقت وسائر أيقونات الوسائط |
| أشرطة التقدّم والمنزلقات ومؤشرات الخطوات | شريط زمن الوسائط والتوقيت (12:30 / 45:00) |
| المحاور الزمنية في الرسوم البيانية وترتيب الفئات | الأرقام وأرقام الهواتف والمعرّفات والمبالغ |
| ترتيب أعمدة الجداول ومحاذاة النص | الشيفرات والأوامر وعناوين الويب والبريد الإلكتروني |
| مسار التنقّل وترقيم الصفحات والتبويبات | علامة الصح والساعات وأيقونات الأشياء الحقيقية |
تتبع المكوّنات هذا الجدول بالفعل: يُبقي مقتطف الشيفرة الشيفرة من اليسار إلى اليمين، وتُبقي مشغّلات الوسائط أيقونة التشغيل وعدّاد الوقت من اليسار إلى اليمين، وتعكس الرسوم البيانية محورها الأفقي، ويبدّل منتقي التاريخ مفتاحي السهم الأيمن والأيسر ليتبعا اتجاه القراءة.
المحتوى متعدد الاتجاهات
كثيرًا ما يتضمن النص العربي كلمات إنجليزية وأرقامًا ورموزًا. يتعامل المتصفح مع معظم ذلك، لكن ساعده حين يكون الترتيب مهمًا:
- ضع أي جزء من اليسار إلى اليمين (شيفرة، مسار ملف، اسم منتج إنجليزي في بداية الجملة) داخل عنصر يحمل
dir="ltr"، وأضفlang="en"أيضًا. - استخدم
dir="auto"للنصوص التي يكتبها المستخدمون ولا تعرف لغتها، مثل الأسماء والتعليقات. - لا تبنِ الجمل بدمج أجزاء نصية، فترتيب الكلمات يختلف بين اللغتين. اكتب جملة كاملة لكل لغة.
// مثال شيفرة إنجليزي داخل صفحة عربية <div dir="ltr" lang="en"> <CodeSnippet … /> </div> // مكوّن يجب أن يبقى من اليمين إلى اليسار داخل صفحة إنجليزية <DatePicker dir="rtl" locale="ar-SA" calendar="hijri" labels={arabicDateLabels} />
الأرقام
- يستخدم هذا الموقع والمكوّنات الأرقام الغربية (0–9) في النص العربي. اختر نظام أرقام واحدًا لمنتجك والتزم به في كل مكان.
- يعرض منتقي التاريخ وترقيم الصفحات وحقل الأرقام والتقييم ورفع الملف الأرقام الغربية دائمًا.
- تنسّق الرسوم البيانية الأرقام وفق
localeالذي تمرّره. معlocale="ar-SA"تظهر الأرقام العربية المشرقية (٠–٩)، ومرّرar-SA-u-nu-latnللإبقاء على الأرقام الغربية. - نسّق الأرقام باستخدام Intl.NumberFormat، لا يدويًا.
// أرقام غربية داخل نص عربي new Intl.NumberFormat('ar-SA-u-nu-latn').format(12500.75); // "12,500.75" new Intl.NumberFormat('ar-SA').format(12500.75); // "١٢٬٥٠٠٫٧٥" (أرقام عربية مشرقية)
التاريخ الهجري والميلادي
يدعم منتقي التاريخ التقويم الهجري (أم القرى) والتقويم الميلادي عبر الخاصية calendar، والقيمة الافتراضية hijri.
<DatePicker calendar="hijri" /> // هجري فقط (الافتراضي) <DatePicker calendar="hijri-gregorian" /> // الهجري أولًا مع عرض الميلادي <DatePicker calendar="gregorian" /> // ميلادي فقط <DatePicker calendar="gregorian-hijri" /> // الميلادي أولًا مع عرض الهجري
- اعرض التقويمين حيث يحتاج المستخدم إلى المطابقة مع الوثائق الرسمية، واذكر التقويم الذي يتبعه كل تاريخ.
- مرّر
locale="ar-SA"إلى منتقي التاريخ لعرض أسماء الأشهر والأيام بالعربية، والخاصيةlabelsلتسميات الأزرار والحقول (إلغاء، إرسال، تاريخ البدء…). بدونlabelsتبقى هذه النصوص بالإنجليزية. - تستخدم محاور الرسوم البيانية أسماء الأشهر والأيام الميلادية.
النص والخطوط
- تحتاج العربية إلى ارتفاع سطر أكبر من النص اللاتيني. استخدم رموز الطباعة، ولا تضبط ارتفاع سطر ثابتًا ضيّقًا.
- لا تستخدم تباعد الحروف أو الخط المائل مع النص العربي، فالعربية لا مائل فيها وحروفها متصلة.
- لا تقتطع النص العربي في منتصف الكلمة، ودع التسميات تلتفّ إلى سطر جديد.
قائمة الاختبار
العنصر html يحمل dir="rtl" وlang="ar".
لا أصناف فيزيائية لليسار واليمين في شيفرة التخطيط.
الأيقونات الاتجاهية تشير إلى الاتجاه الصحيح، وأيقونات الوسائط والهوية غير معكوسة.
ترتيب Tab ومفاتيح الأسهم يتبعان اتجاه القراءة.
الأرقام والرموز والكلمات الإنجليزية تُقرأ بالترتيب الصحيح.
التواريخ تعرض التقويم المتوقّع وأسماء الأشهر بالعربية.
تمت المراجعة في السمتين الفاتحة والداكنة، على الحاسوب والهاتف.