Шесть советов по созданию сайтов для многоязычной аудитории от Google Web Studio

Уровень подготовки веб-мастера: любой

В Интернете немало сайтов, содержание которых доступно на нескольких языках, и таких ресурсов становится все больше. Тем не менее, создание многоязычного веб-сайта – это не просто перевод или локализация (L10N). Здесь необходимо принимать во внимание множество других аспектов, каждый из которых относится к интернационализации (I18N). В Справке Google вы можете найти информацию о том, как оптимизировать для Google Поиска мультирегиональные и многоязычные сайты ^[1], а в этой статье мы хотим поделиться несколькими советами по созданию ресурсов для многоязычной аудитории.

1. Создавайте многоязычные страницы с помощью разметки, а не таблиц стилей

Язык и направленность текста тесно связаны с содержанием страницы. В этой связи старайтесь всегда использовать разметку, а не таблицы стилей. Задавайте язык и направление текста (по крайней мере для материалов в html) с помощью псевдоклассов lang и dir:

<html lang="ar" dir="rtl">

Мы не советуем применять оригинальные решения, такие как специальные классы или идентификаторы.
Полагаться на таблицы стилей не стоит: пользовательские агенты могут игнорировать такие свойства, как направление или двунаправленный текст Unicode ^[2]. Для XML ситуация прямо противоположна: поскольку XML не поддерживает специальную разметку для интернационализации, в этом случае рекомендуется использовать таблицы стилей.

2. Используйте одну таблицу стилей для всех языков

Не создавайте отдельные таблицы стилей для текста справа налево и слева направо или для каждого языка – используйте одну. Это поможет унифицировать и корректно выполнять правила интернационализации.
Не экспериментируйте с альтернативными таблицами стилей, например такими:

<link href="default.rtl.css" rel="stylesheet">

Используйте те, которые уже есть на сайте:

<link href="default.css" rel="stylesheet">

При таком подходе вам понадобится дополнить существующие правила CSS компонентами интернационализации, перечисленными ниже.

3. Используйте селектор атрибута [dir='rtl']

Поскольку мы рекомендуем использовать существующие таблицы стилей (совет №2), вам нужно выбирать элементы, направленность которых будет изменена, иным способом. Так как текст, читаемый справа налево, требует особой разметки (совет №1), особых трудностей возникнуть не должно: большинство современных браузеров поддерживают [dir='rtl'].

Рассмотрим пример:

aside {
float: right;
margin: 0 0 1em 1em;
}

[dir='rtl'] aside {
float: left;
margin: 0 1em 1em 0; 
}

4. Используйте псевдокласс :lang()

Чтобы определять языки в различных документах, используйте псевдокласс :lang(). Обратите внимание, что речь идет именно о документах, а не фрагментах текста, поскольку их форматирование выполнять сложнее.
Если вы обнаружили, что китайские иероглифы, набранные полужирным шрифтом, смотрятся плохо (а это действительно так), добавьте следующий код:

:lang(zh) strong,
:lang(zh) b {
font-weight: normal;
color: #900;
}

5. Меняйте направление для всех значений

При работе с двунаправленным содержанием важно, чтобы значения меняли направленность единообразно. Особое внимание следует уделять свойствам внутренних и внешних отступов, рамок, а также параметрам таких атрибутов, как float и text-align.
Допустим, в одних разделах текст идет слева направо, а в других – справа налево. Везде, где применялось выравнивание text-align: left, теперь нужно использовать text-align: right.
Существуют инструменты, которые упрощают изменение направления. Одним из них является CSSJanus ^[3], однако он предназначен для сайтов, использующих отдельные таблицы стилей, а не одну общую.

6. Обращайте внимание на детали

Учитывайте следующее:

Изображения, ориентированные влево или вправо (стрелки, фоновые рисунки, тени, задаваемые с помощью атрибутов box-shadow и text-shadow, элементы JavaScript и анимированные объекты) также должны менять свою направленность.
В зависимости от шрифта и скрипта размер текста на странице может оказаться недостаточным (особенно это актуально для латинских шрифтов). При необходимости корректируйте его размер или даже применяйте другой шрифт.
Помните о специфичности селекторов CSS: селекторы [dir='rtl'] или [dir='ltr'] (см. совет №2) являются более приоритетными. Это может привести к проблемам. Учитывайте данный фактор и при необходимости вносите изменения.

Если у вас есть какие-либо вопросы или замечания, посетите справочный форум веб-разработчиков, которые работают над многоязычными сайтами ^[4]. Вы также можете оставить свои комментарии здесь.

Автор: HabrAndrey

Источник ^[5]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/google/36571

Ссылки в тексте:

[1] как оптимизировать для Google Поиска мультирегиональные и многоязычные сайты: http://support.google.com/webmasters/bin/answer.py?hl=ru&hlrm=en&answer=182192

[2] могут игнорировать такие свойства, как направление или двунаправленный текст Unicode: http://www.w3.org/TR/CSS21/visuren.html#direction

[3] CSSJanus: http://cssjanus.commoner.com/

[4] справочный форум веб-разработчиков, которые работают над многоязычными сайтами: http://productforums.google.com/forum/#!categories/webmasters/internationalization

[5] Источник: http://habrahabr.ru/post/183206/

Нажмите здесь для печати.