html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

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

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

Если у вас есть какие-либо вопросы или замечания, посетите справочный форум веб-разработчиков, которые работают над многоязычными сайтами. Вы также можете оставить свои комментарии здесь.
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

9

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • habrahabr.ru
          • домен habrahabr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции