كيفية وضع علامات على المحتوى متعدد اللغات في Next.js (Pages Router) v16

المشكلة

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

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

الحل

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

من خلال تغليف النص الأجنبي في عناصر بسمة lang الصحيحة، فإنك تنشئ حدودًا لغوية واضحة داخل المحتوى الخاص بك تحافظ على سلامة النص متعدد اللغات.

الخطوات

1. إنشاء مكون نص محدد باللغة

قم ببناء مكون React يغلف المحتوى بلغة أجنبية في عنصر span بسمة lang المناسبة.

interface ForeignTextProps {
  lang: string;
  children: React.ReactNode;
}

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

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

2. استخدم المكون لتمييز العبارات الأجنبية

قم بتغليف النص بلغة أجنبية داخل محتواك باستخدام المكون، مع تحديد رمز اللغة المناسب وفقًا لمعيار ISO 639-1.

export default function ArticlePage() {
  return (
    <article>
      <h1>Understanding French Cuisine</h1>
      <p>
        The concept of <ForeignText lang="fr">mise en place</ForeignText> is
        fundamental to professional cooking. It means having all ingredients
        prepared and organized before you begin.
      </p>
      <p>
        The restaurant <ForeignText lang="fr">Le Bernardin</ForeignText> in New
        York has maintained three Michelin stars for decades.
      </p>
    </article>
  );
}

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

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

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

export default function QuotePage() {
  return (
    <article>
      <h1>Universal Declaration of Human Rights</h1>
      <h2>Article 1</h2>
      <blockquote lang="es">
        <p>
          Todos los seres humanos nacen libres e iguales en dignidad y derechos
          y, dotados como están de razón y conciencia, deben comportarse
          fraternalmente los unos con los otros.
        </p>
      </blockquote>
    </article>
  );
}

يؤدي تطبيق lang مباشرة على عناصر مستوى الكتلة مثل blockquote أو p إلى تمييز المقطع بأكمله، مما يسمح لقارئات الشاشة بالحفاظ على نطق متسق طوال الوقت وللمتصفحات بتطبيق قواعد اللغة على السياق الكامل.

4. تمييز النص الأجنبي في الرسائل المنسقة

عندما يظهر محتوى بلغة أجنبية ضمن رسائل مترجمة، استخدم المكون داخل تنسيق النص المنسق للرسالة.

import { FormattedMessage } from "react-intl";

export default function RecipePage() {
  return (
    <div>
      <FormattedMessage
        id="recipe.description"
        defaultMessage="This dish is called {dishName} in French cuisine."
        values={{
          dishName: <ForeignText lang="fr">coq au vin</ForeignText>,
        }}
      />
    </div>
  );
}

يتكامل المكون مع تنسيق النص المنسق في react-intl، مما يسمح لك بتمييز المصطلحات الأجنبية ضمن المحتوى المترجم مع الحفاظ على الحدود اللغوية للتقنيات المساعدة.

5. إنشاء متغيرات للتأكيد الدلالي

قم بتوسيع النمط لاستخدام عناصر HTML الدلالية عندما يتطلب النص الأجنبي أيضًا تأكيدًا أو تنسيقًا اصطلاحيًا.

interface ForeignEmphasisProps {
  lang: string;
  children: React.ReactNode;
}

export function ForeignEmphasis({ lang, children }: ForeignEmphasisProps) {
  return <i lang={lang}>{children}</i>;
}

يمثل عنصر i دلاليًا نصًا بصوت أو مزاج بديل، مما يجعله مناسبًا للمصطلحات الأجنبية التي يتم أيضًا فصلها عن النص المحيط. تضمن سمة lang النطق الصحيح بينما يوفر العنصر المعنى الدلالي.

6. توثيق رموز اللغات المدعومة

أنشئ نوعًا أو ثابتًا يحدد رموز اللغات التي يدعمها تطبيقك لضمان الاتساق واكتشاف الأخطاء في وقت التطوير.

export const SUPPORTED_LANGUAGES = {
  FRENCH: "fr",
  SPANISH: "es",
  GERMAN: "de",
  ITALIAN: "it",
  JAPANESE: "ja",
  CHINESE: "zh",
} as const;

type LanguageCode =
  (typeof SUPPORTED_LANGUAGES)[keyof typeof SUPPORTED_LANGUAGES];

interface ForeignTextProps {
  lang: LanguageCode | string;
  children: React.ReactNode;
}

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

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