انتقل إلى المحتوى الرئيسي
RTL — من اليمين إلى اليسار

التدويل بشكل صحيح

عرض حي باستخدام Next.js لتخطيط RTL، وتوجيه اللغة، وتنسيق Intl — مهارات التدويل التي تحتاجها فرق المؤسسات فعلاً.

٤ لغاتRTL + LTRIntl APIخصائص CSS المنطقية
تصفح باللغة:EnglishFrançaisالعربيةעברית

ما يوضحه هذا العرض

تخطيط RTL

دعم كامل للكتابة من اليمين إلى اليسار باستخدام الخصائص المنطقية في CSS. انتقل إلى العربية أو العبرية — يتحول التخطيط بالكامل دون استخدام margin-left واحد في قاعدة الكود.

تنسيق Intl

تنسيق التواريخ والأرقام والعملات بشكل صحيح لكل لغة عبر Intl API الأصلي. لا مكتبات خارجية. لا تنسيق يدوي.

توجيه اللغة

عناوين URL مدركة للغة مدعومة بـ next-intl middleware. يعيد اكتشاف Accept-Language توجيه المستخدمين تلقائياً إلى لغتهم المفضلة.

مقارنة التنسيق الحي

نفس القيم، منسقة بشكل صحيح للغات الأربع في آنٍ واحد.

اللغةالتاريخالرقمالعملةالاتجاه
enEnglishJanuary 15, 20241,234,567.89$9,999.99يسار إلى يمين
frFrançais15 janvier 20241 234 567,899 999,99 €يسار إلى يمين
arالعربية15 يناير 20241,234,567.89‏9,999.99 ر.س.‏يمين إلى يسار
heעברית15 בינואר 20241,234,567.89‏9,999.99 ‏₪يمين إلى يسار

الخصائص المنطقية في CSS

انتقل إلى العربية أو العبرية أعلاه — تنعكس الصفحة بالكامل. لا CSS مكرر. لا تجاوزات JavaScript. فقط هذا:

card.module.css
.card {
  padding-inline: 1.5rem;  /* ≠ padding-left/right */
  margin-block-end: 1rem;  /* ≠ margin-bottom */
  border-inline-start: 2px solid var(--color-accent);  /* ≠ border-left */
  text-align: start;  /* ≠ text-align: left */
  inset-inline-start: 0;  /* ≠ left: 0 */
}

/* No margin-left. No margin-right.
   Direction is handled by the browser. */
Jane Smithنُشر في ١٥ يناير ٢٠٢٤

بطاقة مثال

تستخدم هذه البطاقة الخصائص المنطقية لـ CSS فقط. غيّر الاتجاه أعلاه لمشاهدتها تنعكس.

ما الذي يغيّره RTL فعلياً

الإنجليزية (LTR)

  • nav direction
  • border-inline-start
  • text-align: start
  • icon flips

العربية (RTL)

  • nav direction
  • border-inline-start
  • text-align: start
  • icon flips

تستخدم الصفحة بأكملها هذه الخصائص — كل هامش وحشو وحدود. غيّر اللغة في شريط التنقل لرؤيتها مباشرةً.