От автора: первоначально я написал эти рекомендации для внутренней документации Wayfair. Ниже приводится адаптированная и улучшенная версия. Во всех приведенных ниже примерах предполагается использование библиотеки React и React Intl, но эти рекомендации являются общими для веб-приложений и могут применяться с любым фреймворком и библиотекой для интернационализации.
1. Никогда не объединяйте строки
Неполные фразы трудно или даже невозможно перевести, потому что переводчики не видят контекста. Кроме того, порядок частей может отличаться на других языках.
Объедините все связанные части фразы в одну строку локализации и используйте интерполяцию для динамического содержимого вместо разделения одного предложения на несколько строк локализации.
Плохо:
<p> <FormattedMessage id="homepage.firstGreetingText" defaultMessage="Hey " /> {name} <FormattedMessage id="homepage.secondGreetingText" defaultMessage=", welcome back!" />
</p>Хорошо:
<p> <FormattedMessage id="homepage.greetingText" defaultMessage="Hey {name}, welcome back!" values={{ name }} />
</p>Пример: «red pencil» на английском языке — на французском будет «crayon rouge» (обратите внимание на обратный порядок слов).
2. Никогда не вкладывайте строки
Подобно предыдущему совету, вложенные строки трудно перевести, потому что переводчики видят только часть фразы.
Сохраняйте полную фразу в виде одной строки локализации и используйте интерполяцию тегов для добавления форматирования или динамических элементов, таких как ссылки или кнопки. Это может быть иначе или невозможно в вашей библиотеке интернационализации.
Плохо:
<p> <FormattedMessage id="landingPage.termsConditionsText" defaultMessage="By selection “Purchase” below, you agree to our <a />." values={{ a: () => ( <a href={TERMS_URL}> <FormattedMessage id="landingPage.termsConditionsLink" defaultMessage="Terms & Conditions" /> </a> ) }} />
</p>Хорошо:
<p> <FormattedMessage id="landingPage.termsConditionsText" defaultMessage="By selection “Purchase” below, you agree to our <a>Terms & Conditions</a>." values={{ a: (...chunks) => <a href={TERMS_URL}>{chunks}</a> }} />
</p>3. Никогда не используйте жесткую пунктуацию вне строк локализации
В разных языках знаки препинания могут использоваться по-разному: например, разное расстояние между символами или даже разные символы. Поместите знаки препинания в строки локализации, чтобы добавить их в код.
Плохо:
<p> <FormattedMessage id="registration.usernameLabel" defaultMessage="Username" /> : <input type="text" /> </p>
Хорошо:
<label> <FormattedMessage id="registration.usernameLabel" defaultMessage="Username:" />{' '} <input type="text" />
</label>Пример: «Username:» на английском языке — на французском языке будет «Nom d’utilisateur :» (обратите внимание на пробел перед двоеточием).
4. Никогда не используйте переводы в разных контекстах
Одни и те же английские строки могут переводиться по-разному в разных контекстах, или перевод может быть настроен для конкретной страницы, не осознавая, что это повлияет на другие страницы.
Создайте уникальные строки локализации для функций, за исключением повторного использования фраз, которые во многих местах выглядят одинаково на английском языке.
Плохо:
<FormattedMessage id="bookmark" defaultMessage="Bookmark" />
Хорошо:
<FormattedMessage id="productCard.bookmarkButtonLabel" defaultMessage="Bookmark" />
Пример: Заголовок «Bookmark» и метка кнопки «Bookmark» на английском языке — на русском языке будут «Закладка» и «Добавить в закладки».
5. Никогда жестко не кодируйте множественное число
Многие языки имеют более сложные правила множественного числа, чем английский, и имеют более двух форм множественного числа. Используйте функции плюрализации библиотеки интернационализации, вместо добавления s в конце слова.
Плохо:
<p> {resultCount > 1 ? ( <FormattedMessage id="NumberResults"> {resultCount} dogs found </FormattedMessage> ) : ( <FormattedMessage id="NumberResult"> {resultCount} dog found </FormattedMessage> )}
</p>Плохо:
<p> <FormattedMessage id="NumberResults"> {resultCount} dog(s) </FormattedMessage>
</p>Хорошо:
<p> <FormattedMessage id="search.numberResults"> {resultCount, plural, one {# dog} other {# dogs}} found </FormattedMessage>
</p>Пример: «1 dog, 2 dogs, 5 dogs» на английском языке — на русском языке «1 собака, 2 собаки, 5 собак».
6. Никогда не вводите HTML на страницы
Введение стороннего HTML-кода непосредственно на страницы может сломать приложение или даже дать хакерам возможность получить доступ к данным ваших пользователей.
Отправляйте только данные из бэк-энда и переводите текст в веб-интерфейсе, а не отправляйте уже переведенный текст в формате HTML.
Плохо:
<span dangerouslySetInnerHTML={{ __html: message }} />Хорошо:
<FormattedMessage id="reviews.successMessage" defaultMessage="Thanks for sharing! You’ve been entered to win a {amount} shopping spree!" values={{ amount }}
/>Бонус: не используйте «одинарные кавычки»
Это не вопрос интернационализации, но все же стоит об этом упомянуть. Использование неправильных символов оформления делает наши страницы непрофессиональными.
Используйте правильные типографские символы, такие как кавычки, апостроф или тире ( “”’—), вместо символов, которые мы используем в коде ( «‘-).
Плохо:
<FormattedMessage id="homepage.lunchCta" defaultMessage='Ready to say "lunch!"' />
Хорошо:
<FormattedMessage id="homepage.lunchCta" defaultMessage="Ready to say “lunch!”" />
Заключение
Целью этих рекомендаций является предоставление переводчикам большего контекста, чтобы они могли производить более качественные переводы, и ваши пользователи, не говорящие по-английски, имели гораздо лучший опыт. Иногда один неверный или неправильный перевод может помешать пользователю понять интерфейс и то, как его использовать.
Автор: Artem Sapegin
Источник: https://blog.sapegin.me
Редакция: Команда webformyself.