دعم التخطيطات من اليمين إلى اليسار (RTL)

تكييف التخطيط الخاص بك للغات مثل العربية والعبرية

المشكلة

يتم بناء تخطيط التطبيق باستخدام خصائص CSS مثل margin-left و padding-right، والتي تفترض اتجاه النص من اليسار إلى اليمين (LTR). عندما تتم ترجمة التطبيق إلى لغة RTL مثل العربية أو العبرية، يظهر التخطيط بأكمله بشكل معكوس، مع محتوى غير متوافق وغير قابل للقراءة.

الحل

قم بالتبديل من خصائص CSS الاتجاهية (left/right) إلى معادلاتها المنطقية الحديثة المستقلة عن الاتجاه (start/end). قم بتعيين سمة dir على عنصر <html> بناءً على اللغة الحالية، وسيقوم المتصفح تلقائيًا بقلب التخطيط بشكل صحيح.

الخطوات

1. تحديد اللغات التي تستخدم RTL

أولاً، تحتاج إلى طريقة لمعرفة أي من اللغات المدعومة لديك تستخدم RTL.

قم بإنشاء ملف جديد app/i18n-config.ts (أو قم بتحديث الملف الموجود لديك) لتخزين هذه المعلومات.

// i18n-config.ts

export const locales = ['en', 'es', 'ar', 'he']; // ar=Arabic, he=Hebrew
export const defaultLocale = 'en';
export const localeCookieName = 'NEXT_LOCALE';

export const rtlLocales = ['ar', 'he'];

2. تعيين سمة dir في التخطيط الجذري

قم بتعديل app/[lang]/layout.tsx الخاص بك لإضافة سمة dir (الاتجاه) بشكل مشروط إلى وسم <html>.

// app/[lang]/layout.tsx
import { rtlLocales } from '@/i18n-config';

export async function generateStaticParams() {
  return [{ lang: 'en' }, { lang: 'es' }, { lang: 'ar' }, { lang: 'he' }];
}

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  // Determine if the current language is RTL
  const isRtl = rtlLocales.includes(params.lang);

  return (
    <html lang={params.lang} dir={isRtl ? 'rtl' : 'ltr'}>
      <body>
        {/* ...your providers and content... */}
        {children}
      </body>
    </html>
  );
}

من خلال إضافة dir="rtl" إلى وسم <html>، فإنك تخبر المتصفح أن تدفق المستند بأكمله يجب أن يكون من اليمين إلى اليسار لهذه الصفحة.

3. تحديث CSS لاستخدام الخصائص المنطقية

راجع CSS العام وأنماط المكونات الخاصة بك. استبدل جميع الخصائص الاتجاهية بمعادلاتها المنطقية.

  • margin-left يصبح margin-inline-start
  • margin-right يصبح margin-inline-end
  • padding-left يصبح padding-inline-start
  • padding-right يصبح padding-inline-end
  • left (في تحديد الموضع) يصبح inset-inline-start
  • right (في تحديد الموضع) يصبح inset-inline-end
  • text-align: left يصبح text-align: start
  • text-align: right يصبح text-align: end

مثال:

قبل (اتجاهي):

.card {
  padding-left: 16px;
  border-left: 4px solid blue;
}
.title {
  text-align: left;
}

بعد (منطقي):

.card {
  padding-inline-start: 16px;
  border-inline-start: 4px solid blue;
}
.title {
  text-align: start;
}

عندما يزور المستخدم /en (dir="ltr")، يتم تطبيق padding-inline-start على اليسار. عندما يزور المستخدم /ar (dir="rtl")، يقوم المتصفح تلقائياً بتطبيق padding-inline-start على اليمين، مما يعكس تخطيط المكون بشكل صحيح.