كيفية دعم اللغات من اليمين إلى اليسار (RTL) في Next.js (مسار الصفحات) الإصدار 16

تصميمات معكوسة للغة العربية والعبرية

المشكلة

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

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

الحل

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

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

الخطوات

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

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

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

تحدد هذه الدالة لغات اليمين إلى اليسار وتعيد قيمة الاتجاه المناسبة للاستخدام في 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;
}

يتم استبدال خاصية العرض بـ inline-size والارتفاع بـ 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 تتكيف تلقائيًا مع اتجاه النص، مما يؤدي إلى محاذاة المحتوى بشكل مناسب لكل من لغات LTR وRTL.