x
 
Сергей Кузьмин
2 августа 2012

Хочу сделать смену языка на сайте без перезагрузки страницы (и без аякса). Как лучше поступить?



Чтобы менять язык без перезагрузки и аякса, все тексты должны быть на странице сразу:

<div>
  <p>Дизайн-бюро Артёма Горбунова...</p>
</div>
<div>
  <p>Artem Gorbunov Design Bureau...</p>
</div>

Обозначить язык фрагментов удобно с помощью атрибута lang:

<div lang="ru">
  <p>Дизайн-бюро Артёма Горбунова...</p>
</div>
<div lang="en">
  <p>Artem Gorbunov Design Bureau...</p>
</div>

Смену языка я бы посоветовал делать через смену класса у body. ЦСС для скрывания «не того» языка будет таким:

Атрибут lang в ХТМЛ
BODY.en :lang(ru),
BODY.ru :lang(en) {
  display: none;
}

Или таким:

BODY.en *[lang=ru],
BODY.ru *[lang=en] {
  display: none
}

Первый вариант не сработает в ИЕ 8 и ниже, второй сработает и в 8-йи в 7-й версиях, но не в шестёрке. Более того, я не ручаюсь за скорость таких секторов — браузеру придётся проверять каждый элемент на соответствие условию перед отрисовкой. В связи с этим, лучше опираться на обычные классы, это быстро и кроссбраузерно:

BODY.en .ru,
BODY.ru .en {
  display: none
}

Атрибут lang в разметке оставляем для роботов и будущей совместимости:

<div class="ru" lang="ru">
  <p>Дизайн-бюро Артёма Горбунова...</p>
</div>
<div class="en" lang="en">
  <p>Artem Gorbunov Design Bureau...</p>
</div>
  • Остаётся:
  • сверстать переключалку;
  • написать скрипт, меняющий класс у body;
  • научить скрипт менять заголовок браузера и сохранять выбранный язык в document.cookie;
  • на стороне сервера читать куки и выдавать страницу с правильным заголовком и классом у body, чтобы ничего не прыгало при загрузке.

Посмотрите финальный пример и скачайте ПХП-файл для изучения:

Стилизация с помощью языковых атрибутов

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии


2 августа 2012

Недостаток такого решения — отсутствие у каждой языковой версии собственного урла.

Это можно решить (правда, насколько я понимаю, не кроссбраузерно) с помощью функции history.pushState.

Шу Бузник
2 августа 2012

Илья, для каждой версии можно сделать УРЛ с помощью хэш-тэга и при загрузке страницы запускать перевод в нужный язык (если надо). Сделал так у себя на сайте.

И, кстати, для небольших фрагментов (в одну строчку, без дополнительного кода) создаю атрибут data-translate в нужном элементе, где хранится строка перевода (у меня только русский и английский) и джаваскриптом перевожу.

Андрей Ситник
2 августа 2012

Проблема в том, что пользователь будет ждать в два раза больше загрузки HTML. Можно сделать хитрее — после onload страницы /ru/post/1 загрузить вторую версию с /en/post/1, а при переключении страницы — заменять body и менять URL через History.pushState.

Пользователи старых браузеров будут переключать страницы старой загрузкой — думаю, это вполне нормальная деградация. Но при таком подходе — будет меньше нагрузка на CSS и величину DOM-дерева. Плюс в тегах video не начнётся предзагрузка в английской версии. Да и для поиска лучше — для поисковых ботов это будут две разные страницы.

Андрей Щербатых
2 августа 2012

Такой подход имеет смысл только там, где язык переключается довольно-таки часто. Лично я переключаю на всех сайтах язык ровно 1 раз — когда вижу «укр» и меняю его на «рус».

Подход выше хорош для каких-то служебных сайтов — типа расписания там, инструкции какие-то.

У такого подхода есть 2 офигенских минуса:
1) СЕО (сеошники завоют однозначно).
2) Удвоение трафика (не забываем про модемы мобильного интернета,для которых это имеет значение).

Лучше бы подключили проверку региона айпи и заголовка браузера (он вроде как отдает системный язык) и выдавали нужный согласно данным. Плюс куки, чтобы переключать руками нужно было только 1 раз в жизни.

И это, а если яваскрипт у человека отключен? Такое тоже бывает.

Андрей Ситник
6 августа 2012

Андрей Щербатых, никогда не нужно делать проверку по айпи пользователя! Во время отдыха в Тайланде зайдите в Интернет и почувствуйте издевательства со всех сайтов, которые определяют язык по местоположению ;-)

Да и вообще, определение языка по айпи — это забивание гвоздя микроскопом. Все браузеры передают не просто системный язык, а список языков, которые знает пользователь (их же может быть несколько).


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сайты для слабовидящих 2 За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5




Недавно всплыло

1 Правдивость 4 Почему дизайнер должен уметь писать текст? 8 Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1