Локализация веб-страниц на стороне клиента
Локализация веб-страниц — весьма частая задача для современного интернета. В данной статье описывается моя попытка решить эту задачу на стороне клиента при помощи самописных инструментов js_tr и js-linguist.
Что такое js_tr
Это утилита, позволяющая делать переводы веб-страниц на стороне клиента, используя подключенные файлы переводов. Встроенный инструментарий позволяет использовать переводчик как для JavaScript, так и для чистого HTML. Для автоматизации работы с файлами переводов используется утилита js-linguist. Подключаемый функционал написан на JavaScript без зависимостей.
Зачем нужна ещё одна система?
Существуют и другие i18n/l10n системы, но лично мне, работавшему с Qt, хотелось бы иметь что-то похожее на связку tr/linguist в своём арсенале. Плюс утилита, которая позволяет автоматически создавать файлы переводов на основе сканирования проектов и нахождения использования ключевых слов для перевода сильно сокращает время работы. Я делал её так, чтобы было удобно пользоваться самому.
Но мои переводы делаются на стороне сервера, зачем локализация на клиенте?
Для того, чтобы сделать веб-приложение переносимым. На моей практике мои веб приложения по 2-3 раза меняли веб сервера, с промышленных на самописные и наоборот. Всегда ли можно закладываться на наличие необходимого шаблонизатора?
Как пользоваться js_tr
После подключения к странице необходимых скриптов и файлов переводов, в тэгах на странице можно использовать атрибуты tr и trform. Например в случае Default Text перевод на русский автоматически заменит Default Text на Операторы. В JS получение переведенной строчки достигается использованием функции tr(«строка на перевод»), которая возвращает переведенную строку.
Рай для автоматизатора
Что можно автоматизировать? Главное, что умеет утилита js-linguist — это сканировать директории с html и js файлами на предмет использования в них директив js_tr для дальнейшего их добавления в файл перевода. Следовательно, если где-то в JavaScript файле вы написали tr(«Hello World»), то фраза Hello World будет автоматически добавлена в файлы переводов. Утилита умеет читать html на предмет использования атрибута tr и содержимое тэгов
Режим синхронизации не только подключит в перевод новые слова, но и покажет, какие слова присутствуют в файле перевода, но не используются. К сожалению, утилита может понять только простые случаи использования tr, так что не все возможные варианты добавляются автоматически. Однако, парсеры планируется совершенствовать, и все меньшее число вызовов придется вносить вручную. Также, разработан функционал, позволяющий автоматизировать создание тэгов tr в HTML файлах на основе innerHTML этих тэгов, что позволит быстро подключать систему переводов в новых проектах.
СамоПиаР: Вид утилиты
Лицензии
js_tr расостраняется под лицензией MIT
js-linguist распространяется под GPL 3
Где взять
github.com/Cabalbl4/js-linguist
github.com/Cabalbl4/js_tr
На данный момент программы находятся в бета-версии, и бинарные дистрибутивы js-linguist ещё не готовы. В ближайшее время планируется сборка под Windows и Ubuntu.
Что такое js_tr
Это утилита, позволяющая делать переводы веб-страниц на стороне клиента, используя подключенные файлы переводов. Встроенный инструментарий позволяет использовать переводчик как для JavaScript, так и для чистого HTML. Для автоматизации работы с файлами переводов используется утилита js-linguist. Подключаемый функционал написан на JavaScript без зависимостей.
Зачем нужна ещё одна система?
Существуют и другие i18n/l10n системы, но лично мне, работавшему с Qt, хотелось бы иметь что-то похожее на связку tr/linguist в своём арсенале. Плюс утилита, которая позволяет автоматически создавать файлы переводов на основе сканирования проектов и нахождения использования ключевых слов для перевода сильно сокращает время работы. Я делал её так, чтобы было удобно пользоваться самому.
Но мои переводы делаются на стороне сервера, зачем локализация на клиенте?
Для того, чтобы сделать веб-приложение переносимым. На моей практике мои веб приложения по 2-3 раза меняли веб сервера, с промышленных на самописные и наоборот. Всегда ли можно закладываться на наличие необходимого шаблонизатора?
Как пользоваться js_tr
После подключения к странице необходимых скриптов и файлов переводов, в тэгах на странице можно использовать атрибуты tr и trform. Например в случае Default Text перевод на русский автоматически заменит Default Text на Операторы. В JS получение переведенной строчки достигается использованием функции tr(«строка на перевод»), которая возвращает переведенную строку.
Рай для автоматизатора
Что можно автоматизировать? Главное, что умеет утилита js-linguist — это сканировать директории с html и js файлами на предмет использования в них директив js_tr для дальнейшего их добавления в файл перевода. Следовательно, если где-то в JavaScript файле вы написали tr(«Hello World»), то фраза Hello World будет автоматически добавлена в файлы переводов. Утилита умеет читать html на предмет использования атрибута tr и содержимое тэгов
<script>Режим синхронизации не только подключит в перевод новые слова, но и покажет, какие слова присутствуют в файле перевода, но не используются. К сожалению, утилита может понять только простые случаи использования tr, так что не все возможные варианты добавляются автоматически. Однако, парсеры планируется совершенствовать, и все меньшее число вызовов придется вносить вручную. Также, разработан функционал, позволяющий автоматизировать создание тэгов tr в HTML файлах на основе innerHTML этих тэгов, что позволит быстро подключать систему переводов в новых проектах.
СамоПиаР: Вид утилиты
Лицензии
js_tr расостраняется под лицензией MIT
js-linguist распространяется под GPL 3
Где взять
github.com/Cabalbl4/js-linguist
github.com/Cabalbl4/js_tr
На данный момент программы находятся в бета-версии, и бинарные дистрибутивы js-linguist ещё не готовы. В ближайшее время планируется сборка под Windows и Ubuntu.
0 комментариев