company_banner

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

http://googlewebmastercentral.blogspot.com/2013/05/6-quick-tips-for-international-websites.html
  • Перевод
Уровень подготовки веб-мастера: любой

В Интернете немало сайтов, содержание которых доступно на нескольких языках, и таких ресурсов становится все больше. Тем не менее, создание многоязычного веб-сайта – это не просто перевод или локализация (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. Обращайте внимание на детали


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

Если у вас есть какие-либо вопросы или замечания, посетите справочный форум веб-разработчиков, которые работают над многоязычными сайтами. Вы также можете оставить свои комментарии здесь.
  • +26
  • 16,7k
  • 2

Google

176,44

Филин Лаки

Поделиться публикацией
Комментарии 2
    +8
    Когда я попытался сделать RTL twitter bootstrap для одного их своих проектов, я столкнулся с проблемой приоритета селекторов. Какраз то что написано в 6.3. Приходилось добавлять кучу дополнительных оверрайдов для правил, которые на первый взгляд не нужно переводить в RTL. На манер margin: 0 или display: block; float: none; А особенный ужас это переводить в RTL border-radius, т.к. порядок «сторон» там не такой как у padding к примеру. Ах если бы я знал CSSJanus, жизнь была бы настолько проще…

    От себя добавлю:
    а) не стоит бить одно правило другим. Так проще мейнтейнить, да и в прочем каковы шансы что ваш темплейт забудет отрендерить dir атрибут.

    aside {
        margin-bottom: 1em;
    }
    
    [dir='ltr'] aside {
        float: right;
        margin-right: 1em;
    }
    
    [dir='rtl'] aside {
        float: left;
        margin-left: 1em; 
    }
    


    б) Поля форм для RTL имеют кое-какую нехорошую особенность, RTL это конечно хорошо, пока не начинаешь писать email в инпут. Пускай RTL народы пишут по своему, но цифры и email'ы они пишут в LTR формате. В процессе написания этого самого email можно увидеть "@username" когда пишешь username@example.com. Потому для таких вещей нужно держать отдельный force-класс, который задаст direction: ltr или какой-нибудь unicode-bidi для конкретных инпутов… text-align:right; по желанию. Еще в этот список можно добавить пароли, если они понимают только английские символы.

    P.S. когда работаете с большими CSS фреймворками и адаптируете их под RTL, не забывайте проверять вписываетесь ли вы в лимиты Internet Explorer: 4095 правил в одном файле, 31 @import на файл, все что глубже 4-го уровня — Лимб, от туда не возвращаются.
      0
      А еще попробуйте LangPrism для многоязычной локализации сайта, как здесь: miter.mit.edu

      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

      Самое читаемое