كيفية تمييز المحتوى متعدد اللغات في Next.js (موجه الصفحات) الإصدار 16

المشكلة

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

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

الحل

تطبيق سمة 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>;
}

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