Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

6 быстрых советов для международных веб-сайтов

Примечание редакции: После предварительного изучения различных способов интернационализации веб-поиска Google, вот сообщение от членов команды Google Web Studio с советами для веб-разработчиков.

Многие веб-сайты существуют более чем на одном языке, и все больше веб-сайтов становится доступным более чем на одном языке. Тем не менее, создание веб-сайта для нескольких языков не означает просто перевод или локализацию (L10N), и все. Для этого требуется еще несколько вещей, все из которых связаны с интернационализацией (I18N). В этом посте мы делимся несколькими советами для международных веб-сайтов.

Сделайте страницы I18N-ready в разметке, не в таблицах стилей

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

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

Избегайте использования собственных решений, таких как специальные классы или идентификаторы.

Что касается I18N в таблицах стилей, вы не всегда можете полагаться на CSS: спецификация CSS определяет, что соответствующие пользовательские агенты могут игнорировать такие свойства, как direction или unicode-bidi. (Для XML ситуация снова меняется. XML не предлагает специальной разметки для интернационализации, поэтому здесь желательно использовать CSS.)

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

Вместо создания отдельных таблиц стилей для направленности LTR и RTL или даже для каждого языка объедините все в одну таблицу стилей. Это значительно упрощает понимание и поддержку ваших правил интернационализации.

Итак, вместо встраивания альтернативной таблицы стилей, такой как

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

просто используйте существующий

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

При таком подходе вам потребуется дополнять существующие правила CSS по их международным аналоги:

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

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

Вот пример:

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

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

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

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

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

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

При работе с контентом как LTR, так и RTL важно отражать все значения, которые меняют направленность. Среди свойств, на которые следует обратить внимание, есть все, что связано с границами, отступами и отступами, а также свойства, связанные с местоположением, float или text-align.

Например, то, что есть text-align: left в LTR, должно быть text-align: right в RTL.

Существуют инструменты, позволяющие легко «менять» направленность. Одним из них является <a>CSSJanus</a>, хотя он был написан для области «отдельная таблица стилей», а не для области «та же таблица стилей».

Следите за деталями

Обратите внимание на следующие пункты:

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

Если у вас есть какие-либо вопросы или отзывы, посетите Форум помощи веб-мастерам по интернационализации или оставьте свои комментарии здесь.