كيفية وضع علامات على المحتوى متعدد اللغات في 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>International Cuisine</h1>
      <p>
        The restaurant's signature dish is{" "}
        <ForeignText lang="fr">coq au vin</ForeignText>, a classic French
        preparation that pairs perfectly with their house wine.
      </p>
      <p>
        Their dessert menu features{" "}
        <ForeignText lang="es">tres leches</ForeignText> and{" "}
        <ForeignText lang="it">tiramisu</ForeignText>.
      </p>
    </article>
  );
}

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

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

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

export default function QuotePage() {
  return (
    <article>
      <h1>Universal Declaration of Human Rights</h1>
      <h2>Article 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، بينما يحتفظ عنوان الكتاب بلغته الألمانية الأصلية مع تمييز اللغة المناسب لإمكانية الوصول.