كيفية وضع علامات على المحتوى متعدد اللغات في 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>
  );
}

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