Перевод статических блоков сайта средствами CSS

Перевод при помощи штурвала )

Привет всем! В данной статье речь пойдет о том, как можно красиво и удобно создать множество переводов сайта, без нагрузки на серверную часть и не плодя множество файлов. Сразу оговорюсь, что устаревшие на сегодняшний день браузеры (IE 7 и ниже) под данную категорию не попадают. Суть метода, без воды: Текстовые блоки html не содержат текст, содержат лишь идентификатор смысла перевода в виде какого-либо атрибута, например

<div p="mainmenu"></div>
 
Все фразы хранятся в CSS, а текущий язык определяется по атрибуту lang тега html
 

, либо можно создать глобальный div.

В файле CSS для каждой фразы каждого языка есть стиль с версией перевода
html[lang="en"] [p="mainmenu"]:after{ content:" Main menu";}
html[lang="ru"] [p="mainmenu"]:after{ content:" Главная";}
Далее все происходит автоматически.

Преимущества

  • Не требует нагрузки на сервер
  • Не требует перегрузки страницы
  • Переводятся все блоки на странице, включая динамически подгружаемый контент
  • Переводы Легко обновлять, дополнять
  • CSS файл кэшируется на стороне клиента и не создает нагрузки на трафик

Недостатки

  • Пользователи браузеров IE 7 и ниже не увидят ничего
  • Не все поисковики умеют индексировать css контент
  • Для больших фраз данный способ перевода не подходит

Переключения языков происходят по смене единственного атрибута у тега html при помощи Javascript. Можно сюда подключить геолокацию, Куки, либо webstorage. Как выяснилось в дальнейшем, для движков webkit – необходимо также для всех элементов произвести какую-либо манипуляцию, чтобы могло пройти обновление (например убрать несуществующий класс). Целиком функция смены языка на странице выглядит примерно следующим образом

function setlang(lang){$('html').attr('lang',lang);$('*').removeClass('l');}

Как вариант – для решения недостатков – можно использовать на всех страницах один язык через html, и по желанию пользователя – при выборе его родного языка – ко всем пунктам меню будет дополнен его родной перевод, через разделитель. Метод не претендует на оригинальность. Возможно окажется полезным Пример работы переводчика можно посмотреть на примере html5 веб игры Transmania (штурвал смены языка находится в правом верхнем углу)

Когда языков слишком много - можно грузить основные в CSS, или генерить css динкамически, но лучше использовать стандартные средства

  • Автор: kosmom
  • Рейтинг: 0
  • Просмотров: 536
  • Комментариев: 0
  • Создан: 20.07.2011 00:13

Комментарии (0)