العربية والاتجاه

العربية ليست طبقة ترجمة إضافية. كل مكوّن مصمم ومختبر في الاتجاهين.

الإعداد

اضبط <html lang="ar" dir="rtl">.
غلّف التطبيق بـ <I18nProvider locale="ar-EG"> من React Aria.

jsx

import { I18nProvider } from "react-aria-components";

<I18nProvider locale="ar-EG">
  <App />
</I18nProvider>

ما الذي يتغير

التخطيط: المكونات تستخدم خصائص CSS منطقية (البداية والنهاية بدل اليسار واليمين)، فلا حاجة لملف أنماط منفصل.
لوحة المفاتيح: الأسهم تتبع اتجاه القراءة في القوائم والتبويبات وأشرطة التمرير والتقويم.
التواريخ والأرقام: التقويم وأول أيام الأسبوع والعطلات وترتيب التاريخ والأرقام تتبع اللغة.
النصوص المدمجة: مثل إلغاء وإغلاق وبحث تأتي باللغتين.

الخطوط

رموز الخطوط تضع الخط الإنجليزي أولًا ثم العربي، فيختار النص المختلط الخط المناسب لكل حرف تلقائيًا. العناوين العربية أصغر قليلًا والنص أكبر قليلًا، لأن الحروف العربية تبدو أصغر بنفس المقاس.

أجزاء من اليسار لليمين

أرقام الهواتف والأكواد والبريد الإلكتروني والمعرّفات تبقى من اليسار لليمين داخل النص العربي. مكونات الهاتف والكود تتعامل مع ذلك تلقائيًا، ولمحتواك أضف dir="ltr".