Шесть «никогда» при интернационализации веб-приложений

Шесть «никогда» при интернационализации веб-приложений

От автора: первоначально я написал эти рекомендации для внутренней документации Wayfair. Ниже приводится адаптированная и улучшенная версия. Во всех приведенных ниже примерах предполагается использование библиотеки React и React Intl, но эти рекомендации являются общими для веб-приложений и могут применяться с любым фреймворком и библиотекой для интернационализации.

1. Никогда не объединяйте строки

Неполные фразы трудно или даже невозможно перевести, потому что переводчики не видят контекста. Кроме того, порядок частей может отличаться на других языках.

Объедините все связанные части фразы в одну строку локализации и используйте интерполяцию для динамического содержимого вместо разделения одного предложения на несколько строк локализации.

Плохо:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Хорошо:

Пример: «red pencil» на английском языке — на французском будет «crayon rouge» (обратите внимание на обратный порядок слов).

2. Никогда не вкладывайте строки

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

Плохо:

Хорошо:

3. Никогда не используйте жесткую пунктуацию вне строк локализации

В разных языках знаки препинания могут использоваться по-разному: например, разное расстояние между символами или даже разные символы. Поместите знаки препинания в строки локализации, чтобы добавить их в код.

Плохо:

Хорошо:

Пример: «Username:» на английском языке — на французском языке будет «Nom d’utilisateur :» (обратите внимание на пробел перед двоеточием).

4. Никогда не используйте переводы в разных контекстах

Одни и те же английские строки могут переводиться по-разному в разных контекстах, или перевод может быть настроен для конкретной страницы, не осознавая, что это повлияет на другие страницы.

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

Плохо:

Хорошо:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Пример: Заголовок «Bookmark» и метка кнопки «Bookmark» на английском языке — на русском языке будут «Закладка» и «Добавить в закладки».

5. Никогда жестко не кодируйте множественное число

Многие языки имеют более сложные правила множественного числа, чем английский, и имеют более двух форм множественного числа. Используйте функции плюрализации библиотеки интернационализации, вместо добавления s в конце слова.

Плохо:

Плохо:

Хорошо:

Пример: «1 dog, 2 dogs, 5 dogs» на английском языке — на русском языке «1 собака, 2 собаки, 5 собак».

6. Никогда не вводите HTML на страницы

Введение стороннего HTML-кода непосредственно на страницы может сломать приложение или даже дать хакерам возможность получить доступ к данным ваших пользователей.

Отправляйте только данные из бэк-энда и переводите текст в веб-интерфейсе, а не отправляйте уже переведенный текст в формате HTML.

Плохо:

Хорошо:

Бонус: не используйте «одинарные кавычки»

Это не вопрос интернационализации, но все же стоит об этом упомянуть. Использование неправильных символов оформления делает наши страницы непрофессиональными.

Используйте правильные типографские символы, такие как кавычки, апостроф или тире ( “”’—), вместо символов, которые мы используем в коде ( «‘-).

Плохо:

Хорошо:

Заключение

Целью этих рекомендаций является предоставление переводчикам большего контекста, чтобы они могли производить более качественные переводы, и ваши пользователи, не говорящие по-английски, имели гораздо лучший опыт. Иногда один неверный или неправильный перевод может помешать пользователю понять интерфейс и то, как его использовать.

Автор: Artem Sapegin

Источник: https://blog.sapegin.me

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: