تمييز المحتوى متعدد اللغات

المشكلة

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

الحل

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

الخطوات

1. تحديد المحتوى متعدد اللغات

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

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        "C'est la vie."
      </p>
    </article>
  );
}

بدون أي تغييرات، ستحاول قارئة الشاشة نطق "C'est la vie" باستخدام قواعد النطق الإنجليزية، مما يؤدي إلى نطق غير صحيح.

2. تغليف النص الأجنبي في عنصر

قم بتعديل المكون لتغليف العبارة المحددة في عنصر <span>. هذا يعزل النص بحيث يمكنك تطبيق سمة عليه.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        <span>"C'est la vie."</span>
      </p>
    </article>
  );
}

3. إضافة سمة lang

أضف سمة lang إلى عنصر <span> مع رمز اللغة الصحيح لتلك العبارة. في هذه الحالة، رمز اللغة الفرنسية هو fr.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        <span lang="fr">"C'est la vie."</span>
      </p>
    </article>
  );
}

4. استخدام المكون في صفحتك

يمكنك الآن استخدام هذا المكون في صفحتك.

// app/[lang]/page.tsx
import ArticleText from '@/app/components/ArticleText';

export default function Home() {
  return (
    <div>
      <h1>My Blog Post</h1>
      <ArticleText />
    </div>
  );
}

عندما تواجه قارئة الشاشة السمة lang="fr" ستقوم بالتبديل إلى صوت اللغة الفرنسية لنطق العبارة بشكل صحيح. قد تستخدم المتصفحات أيضًا هذه الإشارة لتطبيق قواعد الطباعة الخاصة باللغة الفرنسية (مثل علامات الاقتباس الصحيحة) أو استبعاد العبارة من التدقيق الإملائي للغة الإنجليزية.