Обозначение контента на разных языках

Проблема

Страница правильно определяется как английская, но она содержит цитату, имя или термин на иностранном языке (например, название французской книги). Программы чтения с экрана неправильно произносят этот текст, а браузеры могут применять некорректную типографику или проверку орфографии, так как они продолжают считать, что весь контент на английском языке.

Решение

Обрамите текст на иностранном языке в встроенный 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>Мой блог</h1>
      <ArticleText />
    </div>
  );
}

Когда экранный диктор встречает атрибут lang="fr", он переключается на французский голос, чтобы правильно произнести фразу. Браузеры также могут использовать эту подсказку для применения французской типографики (например, правильных кавычек) или исключения фразы из проверки орфографии на английском языке.