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.

Есть СТО, он классный, но при этом редко выходит в свет. Насколько, на твой взгляд, это может быть важно или полезно компании в целом? Типовые решения в вёрстке. Как подключить шрифты 1 Какую библиотеку вы используете при смещении фона? Как быть, если всё моё время уходит на разработку всё новых и новых фич? 1




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

5 Как редактору вести себя в соцсетях? 3 1 6