Как правильно перевести веб-приложение на несколько языков?

Question

[Глюкъ Виртуален]

Веб-приложение на HTML5 хранится на мобильном устройстве пользователя в Application Cache.
Часть слов — в "каркасе" в html-файлах: заголовки разделов и вспомогательная информация.
Часть выдает javascript: чаще всего это сообщения об успешности операции или об ошибках.
Динамический контент отдается сервером через API, с ним все понятно и вопросов нет.

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

Просмотрел кучу сервисов типа Transifex, Pootle, Crowdin, итд — все они либо забабловые, либо требуют окружения, недоступного на хостинге.

Сервис некоммерческий, он никогда не окупится, спонсоров под такое не найти.
Стало понятно, что скорее всего придется рожать очередной велосипед :(

Просьба к гуру: толкните плиз в нужном направлении! Я еще только учусь программированию и никогда не делал ничего подобного. Мне не нужно ничего готового, просто подскажите, как а) организовать языковые фразы и б) подгружать их пользователям?
Хотя бы по программе-минимум, фраз там немного и в принципе краудсорс можно и не задействовать.

Спасибо.

Comments

[copal]

обычно мультиязычность делают либо при помощи поддоменов, либо маршрутов на сервере, которые добавляются без участия пользователя добавляя его локаль в запросы к api. А вот о чем Вы спрашиваете вообще не понятно.

[Глюкъ Виртуален]

copal: вам непонятно потому, что вы не поняли суть вопроса.

Answer 1

[Дмитрий Беляев]

1. Заведите JSON файлы - словари для каждого языка, например ru.json en.json
2. Загрузка нужного json на старте страницы (по выбору пользователя, если еще не выбирал - по заголовку Accept-language) через ajax либо сразу встраиваете в страницу
3. Нужна js функция для преобразования ключа словаря в фразу, напишу Вам пример:
0й аргумент принимает ключ, последующие принимают подстановки в строку фразы, например $1 в фразе будет заменено на 1й аргумент

var dict = {}; //загруженный словарь
function lang(key) {
  var str = dict[key] || '';
  var args = new Array(arguments.length);
  for(var i = arguments.length; i--;) args[i] = arguments[i];
  return str.replace(/\$\d+/g, function(matched) {
     return args[matched.slice(1)] || matched;
  };
}

4. Можно добавить сразу обработку html при загрузке страницы - у всех элементов имеющих аттрибут data-lang заменить содержимое по словарю <p data-lang="key"></p>

document.addEventListiner('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('[data-lang]');
  for(var i = elems.length; i--;) {
    elems[i].innerText = lang(elems[i].getAttribute('data-lang'));
  }
}, false);

Comments

[Глюкъ Виртуален]

Спасибо, буду пробовать.
Какой должен быть формат внутри json-словаря?

[Дмитрий Беляев]

Глюкъ Виртуален:

{
  "key": "value"
}

[Глюкъ Виртуален]

Дмитрий Беляев: Спасибо еще раз! Про формат немного не о том, но мы уже придумали — пишем так: { "Save" : "Сохранить", ... }

Вдобавок придумали после каждого прохода lang() удалять data-lang в переведенных нодах чтобы не делать лишнюю работу после каждого изменения DOM (он динамический).

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