Как отмечать контент на разных языках в 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>
        Книга <ForeignText lang="es">Cien años de soledad</ForeignText>
        считается шедевром магического реализма.
      </p>
      <p>
        Она сказала <ForeignText lang="fr">c'est la vie</ForeignText> и ушла.
      </p>
    </article>
  );
}

Атрибут lang на соответствующем элементе инструктирует вспомогательные технологии временно переключать язык, обеспечивая точное произношение.

3. Обозначьте более длинные отрывки на иностранном языке

Для многострочного контента на иностранном языке применяйте атрибут lang непосредственно к блочным элементам.

export default function QuotePage() {
  return (
    <article>
      <p>Оригинальный текст на немецком языке:</p>
      <blockquote lang="de">
        <p>Die Grenzen meiner Sprache bedeuten die Grenzen meiner Welt.</p>
      </blockquote>
      <p>
        Это переводится как: Пределы моего языка означают пределы моего мира.
      </p>
    </article>
  );
}

Атрибут lang можно использовать практически с любым HTML-элементом, что упрощает смену языка на странице, добавляя атрибут к таким элементам, как blockquote.

4. Найдите коды языков для вашего контента

Используйте языковые теги из реестра IANA Language Subtag Registry, которые можно найти с помощью неофициального инструмента Language Subtag Lookup.

export default function MultilingualPage() {
  return (
    <div>
      <p>
        Общие примеры: <ForeignText lang="fr">bonjour</ForeignText> (французский),
        <ForeignText lang="de">Gesundheit</ForeignText> (немецкий),
        <ForeignText lang="ja">ありがとう</ForeignText> (японский),
        <ForeignText lang="ar">شكرا</ForeignText> (арабский)
      </p>
    </div>
  );
}

Для любого языка используйте двухбуквенный код, если он существует, и только трехбуквенный код, если другого кода нет.