Воскресенье, 11 сентября 2011 г.
Если вы намереваетесь выйти на мировой рынок, то у вас должен быть сайт соответствующего уровня. Достаточно ли для этого просто перевести весь текст на веб-страницах? Вряд ли. Специалисты Google Search Console регулярно создают сайты, переведенные более чем на 40 языков. Ниже вы узнаете, что мы учитываем при работе над страницами, пользователи которых будут говорить на разных языках и жить в других странах и регионах.
Возможно, вы полагаете, что рассматриваемые ниже темы к вам не относятся, поскольку все ваши материалы ориентированы на англоязычную аудиторию. Однако ваш сайт могут посещать и пользователи, говорящие на других языках и вынужденные прибегать к помощи Google Переводчика или аналогичных инструментов. Таким посетителям может быть сложно просматривать ваш ресурс. Выявить их долю вам поможет анализ трафика вашего сайта.
Не создавайте разные шаблоны HTML-кода для разных языков
Мы настоятельно рекомендуем использовать одинаковый шаблон страниц для всех языков, причем его HTML-код должен быть максимально простым.
Страницы, все языковые версии которых содержат одинаковый HTML-код, проще обслуживать. Поиск ошибок в коде отдельных языковых версий страниц может занять массу времени. Поэтому мы рекомендуем упрощать такой код, а проблемы с оформлением решать с помощью стилей CSS. Вот одно из преимуществ такого подхода: большинство инструментов машинного перевода выделяет из HTML-кода фрагменты текста, которые нужно перевести. Эту процедуру значительно проще выполнить, если HTML-код имеет четкую структуру и не содержит ошибок.
Обращайте внимание на длину текста
Если в оригинале страницы текст идеально вписывается в элементы фиксированного размера, то после подстановки перевода ее внешний вид может значительно ухудшиться. Например, текст на панели навигации слева на некоторых языках может увеличиться в объеме. Посмотрите, насколько отличаются по длине версии одного и того же фрагмента на английском и нидерландском языках. Учитывайте, что фрагмент текста после перевода может занимать больше одной строки, и высота элемента навигации должна быть достаточной для него. Мы рекомендуем учитывать это и при создании интерфейса на вашем родном языке.
Из-за различий в длине слов на разных языках возникает особенно много трудностей при размещении заголовков и элементов управления в формах. К примеру, если заголовки в макете формы располагаются слева, а поля справа, то более длинные фрагменты текста могут занимать две строки, а более короткие – выглядеть так, будто они не связаны со своими полями ввода. В обоих случаях работать с формой из-за неудачного оформления будет неудобно. Кроме того, вам следует подумать над тем, каким должно быть оформление для языков с написанием справа налево (более подробная информация изложена ниже). По всем этим причинам в наших формах заголовки располагаются над полями. Это позволяет нам без проблем заменять исходный фрагмент текста на переведенный, и при этом пользователям удобно читать такой текст на любом языке.
Кроме того, старайтесь не использовать столбцы с фиксированной высотой. Если вы используете поля одинаковой высоты для того, чтобы макет выглядел лучше, то перевод может выходить за пределы областей, размер которых достаточен только для текста на исходном языке. Подумайте, как будут выглядеть элементы интерфейса в составе макета (например, горизонтальные или вертикальные вкладки), если увеличить или уменьшить объем текста.
Работа с двунаправленным текстом
Редактирование текста на исходном языке в HTML-коде, поддерживающем двунаправленное форматирование, зачастую сопряжено с трудностями, так как многие редакторы не поддерживают алгоритм Unicode, предназначенный для работы с двунаправленным текстом. Рекомендуем прочитать статью о проблемах в этой области и их решении. В результате ваша разметка может отображаться в искаженном виде:
<p>
ابةتث
<img src="foo.jpg" alt=" جحخد" />
< ذرزسش!
</p>
На собственном опыте мы выяснили, что работа с двунаправленным текстом наилучшим образом поддерживается в следующих редакторах: Nova, Dreamweaver, IntelliJ IDEA и Jedit X.
При оформлении страниц с текстом, который направлен справа налево, вы можете реализовать весь необходимый функционал с помощью основного кода CSS и использовать атрибут направления элемента html, обеспечивающий обратную совместимость, в сочетании с классом элемента body. Помните, что все стили лучше сохранять в одной основной таблице стилей. В этом случае вам будет проще работать с ними и при необходимости изменять.
Вот на что следует обращать внимание при работе над стилем страниц: 1) Элементы, находящиеся в правой части страницы, необходимо перенести в левую часть, и наоборот. 2) Если с одной стороны того или иного элемента есть отступ определенной ширины, то такой отступ нужно переопределить и предусмотреть с противоположной стороны. 3) Если в правой части страницы есть атрибуты text-align, их необходимо перенести в левую часть, и наоборот.
Обычно мы придерживаемся описанного ниже подхода, предпочитая использовать не селектор CSS html[dir=rtl], а класс в теге <body>, так как он совместим со старыми браузерами.
Элементы:
<body class="rtl">
<h1>
<a href="https://www.blogger.com/">
<img alt="Google" src="https://www.google.com/images/logos/google_logo.png" />
</a> Heading
</h1>
Направление письма слева направо (по умолчанию)
h1 {
height: 55px;
line-height: 2.05;
margin: 0 0 25px;
overflow: hidden;
}
h1 img {
float: left;
margin: 0 43px 0 0;
position: relative;
}
Направление письма справа налево:
body.rtl {
direction: rtl;
}
body.rtl h1 img {
float: right;
margin: 0 0 0 43px;
}
(Посмотрите, как этот текст на английском и арабском языках выглядит на нашем сайте.)
Обратите внимание, что в большинстве случаев текст, предназначенный для публикации на страницах с направлением письма справа налево, скорее будет двунаправленным, чем указанным справа налево. Это объясняется тем, что некоторые элементы, такие как названия компаний на латинице или номера телефонов, указываются в направлении слева направо. Чтобы проверить, правильно ли браузер обрабатывает такой текст в документе с изначальным направлением письма справа налево, заключите текст во встроенный элемент с атрибутом, который задает направление письма, как в этом примере:
<h2>עוד ב- <span dir="ltr">Google</span></h2>
Если у вас нет HTML-контейнера, подходящего для вставки атрибута dir (например, элементов title или созданного при помощи исходного кода JavaScript для подсказок о сообщениях), вы можете установить направление письма с помощью приведенной ниже строки, где встраивание текста с направлением справа налево задается специальными символами Unicode ‫ и ‬.
<title>‫הפוך את Google לדף הבית שלך‬</title>
Пример использования на основе кода JavaScript:
var ffError = '\u202B' +'כדי להגדיר את Google כדף הבית שלך ב\x2DFirefox, לחץ על הקישור \x22הפוך את Google לדף הבית שלי\x22, וגרור אותו אל סמל ה\x22בית\x22 בדפדפן שלך.'+ '\u202C';
Если вас интересуют дополнительные сведения, ознакомьтесь с материалами о создании HTML-страниц на иврите, арабском и других языках с направлением письма справа налево и написании скриптов в направлении справа налево на сайте организации W3C.
Китайская грамота
Если у вас нет опыта работы с нелатинскими наборами символов (например, кириллическими, греческими или азиатскими), вы можете столкнуться с тем, что текст в редакторе и браузере отображается некорректно.
Убедитесь, что в редакторе и браузере выбрана кодировка UTF-8, и при необходимости добавьте в HTML-шаблон тег <span> и атрибут lang для элемента html. Это поможет браузерам корректно отрисовывать вашу страницу, так как все символы в кодировке Unicode будут показываться правильно. В этом случае вы сможете избежать использования элементов HTML, таких как é (é), и сэкономить байты. Если у вас возникнут трудности, ознакомьтесь с руководством по кодировке символов, разработанным организацией W3C. В нем вы найдете подробные сведения обо всех возможных проблемах.
Несколько слов о принципах именования
При создании версий страниц на нескольких языках рекомендуется придерживаться определенных принципов именования. В частности, в названиях нескольких языковых версий одного и того же документа можно использовать специальный стандарт, такой как ISO 639-1.
В этом случае пользователям будет проще понять структуру вашего сайта, а веб-мастерам – обслуживать его. Кроме того, размещенные на сайте материалы, такие как логотипы и PDF-документы, будет легче находить, если их названия будут включать код языка.
Советы по структуре URL и другим вопросам, связанным с мультирегиональными и многоязычными сайтами, приведены в Центре веб-мастеров.
В этой статье мы рассказали об основных трудностях, с которыми мы сталкиваемся постоянно. Однако помните, что тщательное планирование и кропотливая работа над структурой HTML-страниц и CSS-кодом позволяют избежать множества проблем при локализации сайтов.