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

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

المشكلة

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

الحل

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

الخطوات

1. تحديد اللغات التي تكتب من اليمين إلى اليسار

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

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

// i18n-config.ts

export const locales = ['en', 'es', 'ar', 'he']; // ar=العربية، he=العبرية
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 };
}) {
  // تحديد ما إذا كانت اللغة الحالية من اليمين إلى اليسار
  const isRtl = rtlLocales.includes(params.lang);

  return (
    <html lang={params.lang} dir={isRtl ? 'rtl' : 'ltr'}>
      <body>
        {/* ...مزودي الخدمة والمحتوى الخاص بك... */}
        {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 على اليمين، مما يؤدي إلى قلب تخطيط المكون بشكل صحيح.