x
 
Антон Лях
27 апреля 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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


Антон!

Задача сде­лать сайт мно­го­языч­ным довольно объ­ём­ная. Сперва сайт надо под­го­то­вить к мно­го­языч­но­сти, интернационализировать:

  • решить как опре­де­лять теку­щий язык: из урла, настроек поль­зо­ва­теля, заго­ловка Accept‑Language или по геолокации;
  • заме­нить текст на абстракт­ные ключи («Ново­сти» → nav.news, «Под­пи­саться» → form.subscribe);
  • под­го­то­вить к лока­ли­за­ции даты, время, денеж­ные еди­ницы и фразы с чис­ли­тель­ными (Нет писем, 5 писем, 2 письма).

После этого надо лока­ли­зо­вать сайт, доба­вив пере­воды и фор­маты для тре­бу­е­мых языков.

Что для этого исполь­зо­вать — зави­сит от вашей задачи и исполь­зу­е­мых тех­но­ло­гий. Сове­тую исполь­зо­вать что‑то гото­вое: штат­ный i18n в Рель­со­вых про­ек­тах, i18n.js или i18next в про­ек­тах на Явас­крипте и Ноде. Они хорошо доку­мен­ти­ро­ваны, под­дер­жи­вают плю­ра­ли­за­цию и лока­ли­за­цию дат, чисел и денеж­ных единиц.

Выбран­ный бэкенд интер­на­ци­о­на­ли­за­ции и опре­де­лит хра­ни­лище пере­во­дов. Как пра­вило, исполь­зуют YAML, JSON или какой‑то натив­ный формат.

Напри­мер, в кни­гах бюро пере­воды хра­нятся в объ­ек­тах Явас­крипта, а нуж­ный пере­вод выби­ра­ется по языку, на кото­ром напи­сана книга:

I18n.translations.ru.test = {
  intro: 'Ответьте на все вопросы теста, <br>чтобы узнать резуль­тат.',
  rerun: '↺ Пере­сдать',
  scored: { // плю­ра­ли­за­ция
    one: 'Вы отве­тили пра­вильно на %{count} вопрос из %{total}',
    few: 'Вы отве­тили пра­вильно на %{count} вопроса из %{total}',
    many: 'Вы отве­тили пра­вильно на %{count} вопро­сов из %{total}',
    other: 'Вы отве­тили пра­вильно на %{count} вопро­сов из %{total}',
  },
};
​
I18n.translations.en.test = {
  intro: 'Answer all questions of the test<br>to know the result.',
  rerun: '↺ Retake',
  scored: {
    one: "You've correctly answered %{count} question out of %{total}",
    other: "You've correctly answered %{count} questions out of %{total}",
  },
};

В про­ек­тах на Рель­сах пере­воды, как пра­вило, хра­нятся в YAML, а язык опре­де­ля­ется по урлу (?locale=es), настрой­кам поль­зо­ва­теля или заго­ловку Accept‑Language.

# config/locales/en.yml
en:
  date:
    formats:
      short_date: "%b %e, %Y" # Apr 22, 2017
​
  form:
    import: Import
    caution: Caution
​
# config/locales/de.yml
de:
  date:
    formats:
      short_date: "%e. %b %Y" # 22. Apr 2017
​
  form:
    import: Importiern
    caution: Achtung

Сове­тую сразу обо­зна­чить теку­щий язык в раз­метке: <body class="en_locale">. Так будет проще исправ­лять вёрстку для язы­ков, в кото­рых слова в 2–3 раза длин­нее или короче, чем в рус­ском: немец­кий, япон­ский, китайский.

Ещё по теме

P. P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор закрыт. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Комментарии

Александр Борисов
27 апреля 2017

А ещё не используйте хранилище переводов для перевода страниц целиком, например, оферты, текстов писем, страницы «О сервисе». Разбивка таких страниц на ключи приведёт к тому, что смысл потеряется, а использовать ключи по отдельности вы всё равно не будете.

Для таких текстов локализуйте шаблон целиком: index.html → index.en.html, index.jp.html.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Автотесты «на пальцах» Как следить за качеством кода? Часть третья: процессы 3 Принципы надёжной вёрстки 4 Автотесты «на пальцах»




Недавно всплыло

Как совместить информационный стиль и текст для поисковиков? 7 В бюро есть таймтрекинг для сотрудников? 5 2 4