Уровень подготовки веб-мастера: любой
В Интернете немало сайтов, содержание которых доступно на нескольких языках, и таких ресурсов становится все больше. Тем не менее, создание многоязычного веб-сайта – это не просто перевод или локализация (L10N). Здесь необходимо принимать во внимание множество других аспектов, каждый из которых относится к интернационализации (I18N). В Справке Google вы можете найти информацию о том, как оптимизировать для Google Поиска мультирегиональные и многоязычные сайты, а в этой статье мы хотим поделиться несколькими советами по созданию ресурсов для многоязычной аудитории.
1. Создавайте многоязычные страницы с помощью разметки, а не таблиц стилей
Язык и направленность текста тесно связаны с содержанием страницы. В этой связи старайтесь всегда использовать разметку, а не таблицы стилей. Задавайте язык и направление текста (по крайней мере для материалов в html) с помощью псевдоклассов lang и dir:
<html lang="ar" dir="rtl">
Мы не советуем применять оригинальные решения, такие как специальные классы или идентификаторы.
Полагаться на таблицы стилей не стоит: пользовательские агенты могут игнорировать такие свойства, как направление или двунаправленный текст Unicode. Для 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, однако он предназначен для сайтов, использующих отдельные таблицы стилей, а не одну общую.
6. Обращайте внимание на детали
Учитывайте следующее:
- Изображения, ориентированные влево или вправо (стрелки, фоновые рисунки, тени, задаваемые с помощью атрибутов
box-shadowиtext-shadow, элементы JavaScript и анимированные объекты) также должны менять свою направленность. - В зависимости от шрифта и скрипта размер текста на странице может оказаться недостаточным (особенно это актуально для латинских шрифтов). При необходимости корректируйте его размер или даже применяйте другой шрифт.
- Помните о специфичности селекторов CSS: селекторы
[dir='rtl']или[dir='ltr'](см. совет №2) являются более приоритетными. Это может привести к проблемам. Учитывайте данный фактор и при необходимости вносите изменения.
Если у вас есть какие-либо вопросы или замечания, посетите справочный форум веб-разработчиков, которые работают над многоязычными сайтами. Вы также можете оставить свои комментарии здесь.
Автор: HabrAndrey
