وضع علامات على المحتوى متعدد اللغات

المشكلة

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

الحل

قم بتغليف النص بلغة أجنبية في عنصر 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"، سيتحول إلى صوته باللغة الفرنسية لنطق العبارة بشكل صحيح. قد تستخدم المتصفحات أيضًا هذا التلميح لتطبيق الطباعة الخاصة بالفرنسية (مثل علامات الاقتباس الصحيحة) أو استبعاد العبارة من التدقيق الإملائي الإنجليزي.