كيفية تمييز المحتوى متعدد اللغات في TanStack Start v1

المشكلة

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

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

الحل

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

الخطوات

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

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

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

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

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

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

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

import { ForeignText } from "~/components/ForeignText";

export default function ArticlePage() {
  return (
    <article>
      <p>
        The book <ForeignText lang="es">Cien años de soledad</ForeignText> is
        considered a masterpiece of magical realism.
      </p>
      <p>
        She said <ForeignText lang="fr">c'est la vie</ForeignText> and walked
        away.
      </p>
    </article>
  );
}

توجه سمة اللغة (lang) على العنصر المناسب التقنيات المساعدة لتبديل اللغات مؤقتًا، مما يضمن النطق الدقيق.

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

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

export default function QuotePage() {
  return (
    <article>
      <p>The original German text reads:</p>
      <blockquote lang="de">
        <p>Die Grenzen meiner Sprache bedeuten die Grenzen meiner Welt.</p>
      </blockquote>
      <p>
        This translates to: The limits of my language mean the limits of my
        world.
      </p>
    </article>
  );
}

يمكن استخدام سمة اللغة (lang) مع جميع عناصر HTML تقريبًا، مما يسهل تغيير اللغات داخل الصفحة عن طريق إضافة السمة إلى عناصر مثل blockquote.

4. ابحث عن رموز اللغة للمحتوى الخاص بك

استخدم علامات اللغة من سجل الرموز الفرعية للغة IANA، والتي يمكنك العثور عليها باستخدام أداة البحث غير الرسمية عن الرموز الفرعية للغة.

export default function MultilingualPage() {
  return (
    <div>
      <p>
        Common examples: <ForeignText lang="fr">bonjour</ForeignText> (French),
        <ForeignText lang="de">Gesundheit</ForeignText> (German),
        <ForeignText lang="ja">ありがとう</ForeignText> (Japanese),
        <ForeignText lang="ar">شكرا</ForeignText> (Arabic)
      </p>
    </div>
  );
}

لأي لغة، استخدم الرمز المكون من حرفين إذا كان موجودًا، واستخدم فقط الرمز المكون من ثلاثة أحرف إذا لم يكن هناك رمز آخر متاح.