كيفية دعم اللغات من اليمين إلى اليسار (RTL) في Next.js (Pages Router) v16

عكس التخطيطات للعربية والعبرية

المشكلة

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

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

الحل

قم بتعيين سمة اتجاه النص للمستند لتتطابق مع اللغة الحالية، مما يسمح للمتصفحات بعكس تدفق التخطيط تلقائيًا للغات RTL. استبدل خصائص CSS الفيزيائية بخصائص منطقية تشير إلى تدفق المحتوى بدلاً من موضع الشاشة. الخصائص المنطقية مثل margin-inline-start و padding-inline-end تُطابق تلقائيًا الحافة الفيزيائية الصحيحة بناءً على اتجاه النص، مما يمكّن التخطيطات من عكس نفسها دون كود إضافي أو تنسيق شرطي.

ينشئ هذا النهج تخطيطات محايدة للاتجاه تعمل بشكل صحيح لكل من لغات LTR و RTL دون تكرار الأنماط أو إضافة منطق معقد.

الخطوات

1. إنشاء دالة مساعدة لتحديد اتجاه النص من اللغة

الخصائص المنطقية تتكيف بناءً على اتجاه النص، حيث يكون margin-inline-start مكافئًا لـ margin-left في سياقات LTR و margin-right في سياقات RTL. قم ببناء دالة مساعدة تربط اللغات المحلية باتجاه النص الخاص بها.

export function getDirection(locale: string): "ltr" | "rtl" {
  const rtlLocales = ["ar", "he", "fa", "ur"];
  return rtlLocales.includes(locale) ? "rtl" : "ltr";
}

تحدد هذه الدالة لغات RTL وتُرجع قيمة الاتجاه المناسبة للاستخدام في HTML و CSS.

2. تعيين سمة اتجاه المستند

يمكن لفئات المستند المخصصة تجاوز طريقة العرض لتخصيص عنصر HTML بسمات مثل lang و dir. قم بإنشاء مستند مخصص لتعيين سمة dir على عنصر HTML الجذر بناءً على اللغة المحلية الحالية.

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
} from "next/document";
import { getDirection } from "../utils/direction";

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);
    return initialProps;
  }

  render() {
    const locale = this.props.__NEXT_DATA__.locale || "en";
    const dir = getDirection(locale);

    return (
      <Html lang={locale} dir={dir}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

يوفر موجه Next.js اللغة المحلية النشطة حاليًا عبر خاصية locale. يقرأ المستند اللغة المحلية من بيانات التوجيه في Next.js ويطبق الاتجاه المقابل على عنصر HTML، مما يتيح دعم RTL على مستوى المتصفح.

3. استبدال خصائص CSS الفيزيائية بمكافئاتها المنطقية

الخصائص المنطقية مثل margin-inline-start و padding-inline-start والأشكال المختصرة الخاصة بها margin-inline و padding-inline تُربط تلقائيًا بالخصائص الفيزيائية بناءً على وضع الكتابة والاتجاه. قم بتحديث أنماط المكونات الخاصة بك لاستخدام الخصائص النسبية للتدفق.

export default function Navigation() {
  return (
    <nav className="nav">
      <ul className="nav-list">
        <li className="nav-item">Home</li>
        <li className="nav-item">About</li>
        <li className="nav-item">Contact</li>
      </ul>
    </nav>
  );
}

.nav {
  padding-inline: 1rem;
  border-inline-start: 4px solid blue;
}

.nav-list {
  display: flex;
  gap: 1rem;
  margin-block: 0;
  padding-inline-start: 0;
}

.nav-item {
  margin-inline-end: 1.5rem;
}

الخصائص المنطقية للهامش والحشو والإدراج تجعل وضع العناصر أسهل وأكثر كفاءة عبر أوضاع الكتابة. تنعكس هذه الخصائص تلقائيًا في سياقات RTL دون الحاجة إلى أنماط إضافية أو استعلامات وسائط.

4. استخدام الخصائص المنطقية لتحديد المواضع

بالنسبة للعناصر ذات المواضع المطلقة أو النسبية، استبدل left و right بـ inset-inline-start و inset-inline-end.

export default function Sidebar() {
  return (
    <aside className="sidebar">
      <button className="close-button">×</button>
      <p>Sidebar content</p>
    </aside>
  );
}

.sidebar {
  position: fixed;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 250px;
  block-size: 100vh;
  padding-inline: 1rem;
}

.close-button {
  position: absolute;
  inset-inline-end: 0.5rem;
  inset-block-start: 0.5rem;
}

يتم استبدال خاصية width بـ inline-size وheight بـ block-size في منهجية الخصائص المنطقية. تضمن هذه الخصائص ظهور العناصر الموضعة على الجانب الصحيح لاتجاه النص الحالي.

5. تطبيق المحاذاة المنطقية للنص

استبدل text-align: left وtext-align: right بـ text-align: start وtext-align: end.

.content {
  text-align: start;
}

.metadata {
  text-align: end;
  margin-inline-start: auto;
}

تشير الخصائص المنطقية إلى حواف الصندوق من حيث علاقتها بتدفق المحتوى بدلاً من أبعاد منفذ العرض الفعلية. تتكيف قيم محاذاة النص start وend تلقائياً مع اتجاه النص، مما يؤدي إلى محاذاة المحتوى بشكل مناسب لكل من اللغات التي تُكتب من اليسار إلى اليمين ومن اليمين إلى اليسار.