Перевод статических блоков сайта средствами 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
  • Просмотров: 980
  • Комментариев: 0
  • Создан: 20.07.2011 00:13

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

Ваши предложения и пожелания пишите на pro@kosmom.ru

Теги

ajax axios backup bootstrap core framework eloquent excel home project html ios javascript keep-alive kpi laravel legacy mvp orm php rip scroll solid timestamp undefined vue vuetify watch безопасность биометрический паспорт ваша любаша для путешествий загран на 10 лет загран паспорт загранпаспорт нового образца зимние книги как заполнить анкеты кеширование книги на новый год логирование мцф недвижимость новогодние книги образец заполнения антеты паспорт для путешествий паспорт нового поколения печать продукт проектирование прокси разработка ремонт ремонт в апартаментах ремонт нежилого помещения самокат сдача сколько стоил ремонт апартаментов спорт стандарты таблица финансы хостинг цена ремонта что почитать зимой юзабилити

Случайный пост

02.02.2012 13:04
Нужны ли готовые CMS?