كيفية تمييز المحتوى متعدد اللغات في React Router v7

المشكلة

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

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

الحل

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

استخدم عناصر HTML الدلالية مثل <span> أو <i> لتغليف النص الأجنبي المضمن دون تعطيل التخطيط. تقبل سمة lang رموز لغة ISO 639-1 (مثل fr للفرنسية أو es للإسبانية) ورموز المنطقة الاختيارية للتعامل الخاص باللهجة.

الخطوات

1. إنشاء مكون لتمييز النص باللغة الأجنبية

قم ببناء مكون قابل لإعادة الاستخدام يغلف النص في عنصر span مع سمة lang المناسبة.

type ForeignTextProps = {
  lang: string;
  children: React.ReactNode;
};

export function ForeignText({ lang, children }: ForeignTextProps) {
  return <span lang={lang}>{children}</span>;
}

يقبل هذا المكون رمز لغة ويغلف أبناءه في span مع سمة lang، مما يسمح لقارئات الشاشة بتبديل قواعد النطق للنص المضمن.

2. استخدم المكون لتمييز النص الأجنبي المضمن

قم بتغليف الكلمات أو العبارات الأجنبية داخل المحتوى الخاص بك باستخدام مكون ForeignText.

export default function ArticlePage() {
  return (
    <article>
      <h1>المطبخ العالمي</h1>
      <p>
        الطبق المميز للمطعم هو{" "}
        <ForeignText lang="fr">coq au vin</ForeignText>، وهو تحضير فرنسي
        كلاسيكي يتناسب تمامًا مع نبيذ المنزل الخاص بهم.
      </p>
      <p>
        تتضمن قائمة الحلويات{" "}
        <ForeignText lang="es">tres leches</ForeignText> و{" "}
        <ForeignText lang="it">tiramisu</ForeignText>.
      </p>
    </article>
  );
}

ستنطق قارئات الشاشة الآن "coq au vin" باستخدام الصوتيات الفرنسية، و"tres leches" باستخدام الصوتيات الإسبانية، و"tiramisu" باستخدام الصوتيات الإيطالية، بينما يستخدم النص الإنجليزي المحيط النطق الإنجليزي.

3. تمييز مقاطع أطول باللغة الأجنبية

للمحتوى الأجنبي متعدد الجمل، قم بتطبيق سمة lang مباشرة على العناصر على مستوى الكتلة.

export default function QuotePage() {
  return (
    <article>
      <h1>الإعلان العالمي لحقوق الإنسان</h1>
      <h2>المادة 1</h2>
      <blockquote lang="fr">
        <p>
          Tous les êtres humains naissent libres et égaux en dignité et en
          droits. Ils sont doués de raison et de conscience et doivent agir les
          uns envers les autres dans un esprit de fraternité.
        </p>
      </blockquote>
    </article>
  );
}

إن تطبيق lang على عنصر blockquote يميز الاقتباس بأكمله كنص فرنسي، مما يضمن النطق والطباعة الصحيحة للمقطع بأكمله.

4. الجمع مع نص واجهة المستخدم المترجم

عند عرض محتوى أجنبي إلى جانب نص واجهة مستخدم مترجم، استخدم react-intl لعناصر واجهة المستخدم وسمات lang للمحتوى المنشأ من قبل المستخدم أو المقتبس.

import { FormattedMessage } from "react-intl";
import { ForeignText } from "~/components/ForeignText";

export default function BookReview() {
  return (
    <article>
      <h1>
        <FormattedMessage id="review.title" defaultMessage="Book Review" />
      </h1>
      <p>
        <FormattedMessage
          id="review.intro"
          defaultMessage="The novel {title} explores themes of identity and belonging."
          values={{
            title: <ForeignText lang="de">Der Steppenwolf</ForeignText>,
          }}
        />
      </p>
    </article>
  );
}

يتكيف نص الواجهة مع اللغة المحلية للمستخدم من خلال react-intl، بينما يحتفظ عنوان الكتاب بلغته الألمانية الأصلية مع وضع علامة لغة مناسبة لإمكانية الوصول.