Вам приходилось видеть сайты на нескольких языках?
Уверен, да.
А вы знаете как они устроены, какие забавные проблемы с ними возникают и насколько возрастает трудоемкость поддержки и развития такого сайта?
Сегодняшняя статья про Многоязычность сайтов.
Как сделать сайт на нескольких языках? Многоязычность сайта. 16 проблем и 5 способов решения
— Sprechen Sie Deutsch?
— Я?… Ja! Ja!
Владимир Войнович
Приключения солдата Ивана Чонкина
Что тут вообще обсуждать? Это же просто?
Зачем нужен сайт на нескольких языках?
Чаще всего делают корпоративный сайт для разных стран. Это самый простой случай.
Значительно реже создаются мультиязычные СМИ, интернет-магазины и интранет-порталы.
И правда, ничего сложного
Некоторым кажется, что многоязычный сайт — это очень просто.
В статье использованы скриншоты многоязычных веб-проектов:
- microsoft.com — софтверная компания мирового масштаба;
- rusal.ru — крупная транснациональная коммерческая компания;
- rt.com — Russia Today, СМИ на 4 языках, представляющее Россию в мире;
- government.ru — правительство Российской Федерации;
- salesforce.com и bitrix24 — многоязычные saas-сервисы.
По ходу статьи мы порадуемся тому, что встречается на этих сайтах.
Кодировка
Если у вас в проекте не только латиница, придется подумать о том, в какой кодировке символов вы будете работать.
Кодировок великое множество, и нужно знать какую когда выбирать.
Вопрос кодировки для создания многоязычного сайта решается просто. Надо использовать Unicode, как правило — UTF-8. Этот формат универсален и экономичен. Недостатков у него почти нет.
Проблемы с кодировками возникают в двух ситуациях: смешение кодировок и конвертация проектов.
Вавилонское смешение кодировок в работающем проекте
Может так случиться, что html сайта будет в utf-16, база в utf-8, код в национальной кодировке типа cp1251, а КЛАДР в cp866. Такой салат сайт может работать, но придется сделать преобразования и помнить где какая кодировка.
Уверен, через год никто не будет знать как оно работает и почему.
Лучше сжать волю в кулак и делать все в одной кодировке, даже если время на подготовку информации возрастет.
Конвертация проекта целиком
Иногда приходится конвертировать проект целиком (например, сделали сайт в cp1251, а через полгода решили что нужна японская версия) в другую кодировку. Это крайне неприятная процедура.
Если сразу делать все аккуратно, в одной универсальной кодировке, то проблем не будет.
Требования к мультиязычности. Организационные и технические проблемы с полноценным переводом.
— Зачем ты это сделал?
— Хотел ощутить биение жизни, — сказал Татарский и всхлипнул.
— Биение жизни? Ну ощути, — сказал сирруф.
Когда Татарский пришел в себя, единственное, чего ему хотелось, — это чтобы только что испытанное переживание … больше никогда с ним не повторялось. Ради этого он был готов на все
Виктор Пелевин. Generation П
Что такое правильный и полноценный перевод сайта на другой язык? Будем перфекционистами и максималистами. Сделаем так, чтобы иностранец, не владеющим основным языком сайта, не испытал неудобств.
Итак, вы решились на полноценный перевод сайта. Что вас ждет?
1. Нет контента
Контент — король. Все для него, ничего без.
Это теория. На практике никогда не бывает так, что все готово или будет появляться своевременно.
Более того, я бы не советовал браться за реализацию мультиязычности, если вы не видите реальной работы по переводу. Зачем нужны дорогие мертворожденные игрушки?
В крайнем случае — делайте так, чтобы отсутствие перевода конкретного элемента не мешало работе.
Хороший компромисс — перевести 2-3 самые важные страницы.
2. Разные товары, новости, акции, баннеры
Сначала вам покажется, что новости, товары и статьи на всех языковых версиях будут одинаковыми, и их надо просто хранить и выводить тексты на разных языках.
Как только вы заложите такую логику в проект, окажется что:
- новость об открытии третьего филиала в Усть-Козлюйске европейцам показывать не нужно,
- для Китая свой ассортимент товаров,
- а именно в странах Латинской Америки продвигается специально для них разработанная акция.
Контент не будет совпадать на 100%. Сайт должен позволять:
- легко дублировать записи и переводить их;
- делать так, чтобы конкретная сущность выводилась на одной языковой версии и не выводилась на другой.
3. Разная структура
Дальше — больше. Вы узнаете, что целые разделы сайта должны присутствовать только на некоторых языковых версиях. Например, сайт переводится целиком, а вот интернет-заказ пока только для России.
Из-за языковых, культурных и политических нюансов может потребоваться независимо менять структуру меню и отдельных страниц.
4. Работа переключателя между языковыми версиями
Обычно между языковыми версиями переключаются с помощью переключателя RU / EN / DE / UA или флажков.
Нажатие такого переключателя на любой странице должно приводить к открытию переведенной версии ТОЙ ЖЕ СТРАНИЦЫ.
Теоретически это несложно, на практике выдержать такой принцип не получится, если структура и содержание языковых версий не строго совпадают.
5. Перевод системных сообщений CMS
Вряд ли CMS вашего сайта написана с нуля специально для него. Соответственно разработчик системы писал сообщения об ошибках и технические уведомления на родном для себя языке и не думал о многоязычности.
Если на “лице” сайта такие сообщения иногда появляются, их тоже придется перевести.
6. Перевод сообщений и файлов внешних модулей
Если вы поставили плагин фотогалереи, аудиоплеер или flash-загрузчик файлов от стороннего разработчика, придется не только разобраться тем, что они выводят, но и проверить кодировку, в которой они работают.
7. Перевод пользовательского контента
Современные сайты часто включают не только информацию от администрации, но и user generated контент.
Такую информацию перевести невозможно, и вы обречены иметь кашу из языков.
Ярким примером такой каши является страница победителя Евровидения 2014 на Youtube — ругательства на русском, греческом, немецком и английском.
Досмотрит и дочитает только исключительно толерантный полиглот.
8. Перевод юридически значимых текстов
Перевести новость на английский или даже китайский можно. Цена ошибки невелика, даже если текст останется шероховатым или пару слов вы оставите на языке оригинала.
Публичную оферту или правила сервиса просто взять и перевести не выйдет. Нужен юрист со знанием языка, местной специфики и пониманием вашего бизнеса. А это большая редкость.
Того хуже, если вы делаете печатную форму для документа, соответствующую требованиям местного законодательства. К юристу и переводчику вам потребуются проектировщик, дизайнер и программист — вероятно появление отдельного интерфейса, нетривиально связанного с остальным сайтом.
Как результат — перевод юридических текстов делают обычно только когда в стране открывается полноценное бизнес-представительство.
Так, например, выглядит страница с правилами использования сервиса Instagram. Все по-русски (даже ЧаВо), кроме самого главного.
В системе Битрикс24 печатные формы счетов на немецкий переведены, а правила использования — оставлены на английском.
9. Разная длина текстов на разных языках.
Дизайнеры знают эту особенность: английский текст выглядит красивее, аккуратнее и … короче, чем русский.
Если вы сделали сайт на русском языке, готовьтесь к тому, что китайская версия будет содержать заметно меньше букв, а немецкая заметно больше.
Отдельные немецкие слова могут оказаться еще и длиннее русских. Например Корпоративные коммуникации станут длинным, как рельс, словом Unternehmenskommunikation.
Учитывая как печально в вебе с автоматическим переносом, это может стать проблемой, особенно если верстка делается с попиксельным попаданием в сетку.
10. Языки с другим направлением текста. LTR и RTL.
Представьте: вы решили выпустить версию сайта для Израиля. Там, конечно, на четверть бывший наш народ, но все же версию на иврите нужно сделать.
Верстка, контент, интерфейсы должны зеркально отразиться, чтобы сайт выглядел правильно. Лого в правом верхнем углу, например.
11. Надписи на картинках
Многие элементы на сайтах делаются картинками, от логотипов до символов валют, надписей о скидках и тому подобного. HTML 5 меняет ситуацию, но вряд ли можно встретить сайт, перевод которого мог бы обойтись без создания иноязычных версий изображений.
12. Почтовые уведомления
Сайты присылают уведомления о регистрации, заказе, неуспешном логине, попытке смены пароля и тому подобном.
Сделать понятные иностранцу почтовые уведомления (а там не только текст, но и ссылки, внешние картинки), можно только с переводчиком и программистом.
13. Национальные стандарты для валют, календаря, оформления писем.
В разных странах свои правила для дат, валют и даже деловой переписки. Если вы их проигнорируете, вас, может быть, поймут и простят.
Однако если мы хотим сделать хорошо, нужно учитывать все.
Программисты скажут: ну это же просто, установка локали автоматизирует такие преобразования. В теории да, а на практике — вы всегда даты выводите таким образом? А валюты? А стиль написания адреса — тоже локаль сделает?
14. Перевод личного кабинета клиента
Если вы из России управляете многоязычным проектом, кабинет администратора CMS можно не переводить.
А вот личный кабинет покупателя интернет-магазина — придется.
Для SAAS-проектов нужна полная локализация.
Это крайне трудоемкая задача, например, великий salesforce.com сразу после регистрации на русском показывает вот что:
й
Неясно что от меня хотят, а тут еще и смесь языков. Обратите внимание на косноязычное “7ч. просрочено”. Это явная калька с английского.
Интерфейс системы переведен “почти” весь.
У Ebay тоже не все гладко с русским интерфейсом.
Salesforce не смог. Ebay не смог. А вы все еще думаете что это просто?
15. Ссылки на мобильные приложения
Ссылки на приложения в магазинах Apple, Google и Microsoft могут включать язык интерфейса.
Например, на arabic.rt.com ссылки ведут на русскую версию приложения для Windows Phone. И не работают.
16. Добавление еще одного языка
Когда вы решите предыдущие 15 вопросов для своего проекта, кто-то главный может сказать: “Отлично! Теперь мы легко добавим японскую и португальскую версии? Все же готово?”.
Есть несколько способов добавления новых и новых языков, однако вариант, который снится некоторым руководителям — кнопка “Добавить язык” — мне видеть не приходилось. Вернее, кнопка была, но не работала.
Техника. Как же сделать сайт на нескольких языках?
Кроме описанных в статье, вероятно, есть и другие способы. Каждый из приведенных я реализовывал своими руками и помню ощущения, испытанные при этом.
Способ 1. “Идите лесом, я на тракторе”. Автоматический перевод
Когда работы по переводу много, делать ее не хочется, и требований особых нет, сгодится автоматический переводчик Google.
Формально все хорошо.
Так, например, решает этот вопрос правительство Волгоградской области.
Качество среднее, трудоемкость крайне низкая, новые языки добавлять не надо — Google знает все.
Способ 2. “Наивный программист”. Поля и папки.
Наивный программист, впервые столкнувшийся с задачей создания языковой версии, считает что различаться будут только тексты и картинки. Код, структуру, дизайн, интерфейс он переводить не планирует.
Поэтому в базе данных появляются поля для текстов на других языках.
В программном коде появляется настройка $lang, которая для английского языка $lang = “_en”
Чтобы хранить картинки на других языках, в папке сайта появится что-то вроде.
Теоретически все нормально. На практике:
- Если английского контента нет, придется показывать русский. Для этого проверять существование файлов и так далее. Нужно редактировать код.
- Нужно будет сделать пакет флагов видимости новости в каждой языковой версии. И написать код для проверки. Везде.
- “Хлебные крошки” часто берутся из свойств разделов, таблиц, каталогов и сами не заработают. Писать код.
- Добавление французской версии требует повторения всей процедуры и еще одного усложнения кода.
Судя по всему, на этой схеме основана работа сайтов РУСАЛа и Правительства РФ.
Способ 3. “Вы сами напросились”. Язык как настройка
Однажды я работал программистом и делал сайт, где переводилось абсолютно все и планировались новые языки. Нужно было сделать добавление максимально простым.
Теорию я знал, любил придумывать абстрактные до ужаса конструкции, и решил проблему очень элегантно, как мне показалось.
Я сделал в базе данных таблицу языков, все тексты пронумеровал, вынес в отдельную таблицу значения текстов на разных языках.
Действительно, любой текст мог быть переведен на любой язык. Добавление языков было реализовано через админку и приводило к клонированию записей в таблице языковых значений.
На примере новостей это выглядело так (таблицы const и lang вспомогательные, для удобства администрирования):
Теперь, чтобы вывести заголовок и краткий текст новости с id=3, вместо
select title, shorttext from news where id=3
для языка с номером 2 приходилось писать
select lv1.value as title, lv2.value as shorttext
from news
inner join lang_value as lv1 on lv1.id_const=news.title
inner join lang_value as lv2 on lv2.id_const=news.shorttext
where news.id=3 and lv1.id_lang=2 and lv2.id_lang=2
Красиво, пока не начинаешь этим пользоваться. Проблемы:
- на каждое поле добавляется join на таблицу значений. если на странице 200 надписей, это все начинает крепко тормозить.
- отладка становится реально сложной, учитывая что ты всегда видишь одни числа, пока не сделаешь join на языковые значения, что в консоли неудобно.
- привязать эту штуку к самописному модулю веб-форм оказалось чересчур трудоемко. Проект самозакрылся раньше, чем я дописал его.
- вопрос управления картинками схема не решает.
Эта и подобные архитектуры имеют право на существование, но:
- должны быть поддержаны на всех уровнях проекта;
- иметь программный уровень преобразования запросов к lang-виду;
- разумную денормализацию;
- средства кеширования, отладки и администрирования.
Я не видел качественных реализаций такой схемы управления языками.
Способ 4. “Я в отчаянии”.
Почти полное дублирование
Говорят, копипаст — признак тупости. Однако для задачи создания языковых версий этот вариант оказывается неплохим.
Полная независимость копий дает свободу управления, но умножает работу:
- редактора (новости создаем везде, товары копируем и переводим)
- программиста (внесение изменений в несколько языковых версий, особенно если они успели пожить собственной жизнью, требует упорства и аккуратности)
- администратора (комментарии, пользователи, рассылки, фиксация и устранение ошибок)
Тем не менее этот вариант де-факто принят очень многими компаниями. Например 4 версии сайта Russia Today имеют разный контент, дизайн и структуру, хотя выросли из одного корневого сайта.
Способ Х. “Хитрый”
Непрозрачным хитрым способом реализована многоязычность в облачных сервисах SalesForce и Битрикс24, а также на сайте microsoft.com.
Разумно предположить что все что можно автоматизировать — автоматизировано, а остальное делается заботливыми руками редакторов и программистов.
Отдельно надо сказать о microsoft.com.
Несмотря на старания, я не нашел вообще ни одной проблемы с многоязычностью этого сайта. Корректно переведено все, на многие языки, переключатель работает как надо.
Работа титаническая, и сделана она прекрасно.
Microsoft.com — эталон, по крайней мере в вопросе языковых версий.
Трудоемкость поддержки сайта на нескольких языках
Возрастает кратно. И для технологов, и для менеджеров.
Очень сложно сделать все хорошо, а ошибки видны всем.
Чеклист работ над многоязычностью
Обсужден и выбран способ реализации многоязычности сайта
Кодировка всех частей проекта едина и универсальна
- Статика
- сторонние модули
- код
- верстка
- база данных
Кто и когда готовит контент?
- Вопрос задан
- Ответственный найден
- Получена первая часть контента
- Система отлажена
Что может различаться в контенте между языками?
- товары
- новости
- акции
- баннеры
- цены
- валюты
- способы доставки
- ….
Есть разделы, созданные только для некоторых версий?
- Скрывать в языке ___________ раздел ________
- Скрывать в языке ___________ раздел ________
- Скрывать в языке ___________ раздел ________
- Показывать только в языке ___________ раздел ________
- Показывать только в языке ___________ раздел ________
- Показывать только в языке ___________ раздел ________
Обсудили как должен работать переключатель?
- Перевод системных сообщений CMS возможен? Кто его делает?
- Составили список того, что надо перевести
- Назначен ответственный за перевод
- Назначен ответственный за проверку самописных модулей
- Назначен ответственный за операторскую работу по вводу
Перевод пользовательского контента — все предупреждены что этого не будет?
- Задать вопрос
- Получить согласие что user generated content останется на языках оригинала
Перевод юридически значимых текстов.
- Оставляем как есть. Все предупреждены
- Ищем юриста. Есть ответственный
Разная длина текстов на разных языках.
- Сделали тестовую страницу и проверили ее работу в верстке
- Продумали изменение дизайна для языка с другим направлением текста. LTR и RTL.
Изображения в дизайне и контенте
- Нашли все картинки в дизайне, на которых есть буквы, и перевели их.
- Написали регламент подготовки картинок для сайта
Почтовые уведомления
- Составили полный список.
- Назначили ответственного за тексты
- Назначили ответственного за программирование
Национальные стандарты для валют, календаря, оформления писем.
- Обсудили вопрос
- Составили белый список: что будет сделано.
- Предупредили всех что придираться к тому чего нет в списке не нужно
Перевод личного кабинета клиента
- Обсудили
- Написали требования
- Составили белый список: что будет сделано.
- Предупредили всех что придираться к тому чего нет в списке не нужно
Ссылки на мобильные приложения и родственные проекты содержат верный язык
Добавление других языков
- Когда, какие и сколько?
- Вы правда этого хотите?
- Сформирована и сообщена трудоемкость добавления еще одного языка
Выводы
- Сайтов с полноценным переводом на несколько языков почти нет.
- Вопрос локализации сайта, как правило, существенно недооценивается.
- Все технические вопросы теоретически решены.
- Вопросы управления, контента и практического сопровождения требуют больших затрат.
Работа менеджера проекта растет на 20% с каждым новым языком, Технологов на 30-40%, контент-редакторов и маркетологов на 100%.
Создание сайта с поддержкой многоязычности вполне возможно. Если вам это действительно нужно — смело делайте. Вам может помешать только собственная необоснованная уверенность, что все просто, и отсутствие опыта разработчика.
Автор: stepan_ovchinnikov
