Пятница, 31 мая 2013 г.
Примечание редакторов: ранее мы рассмотрели различные способы реализации
интернационализации для веб-поиска Google,
а теперь публикуем статью участников команды Google Web Studio с советами для веб-разработчиков.
Многие сайты существуют более чем на одном языке, и все больше сайтов создаются мультиязычными.
Однако создание сайта на нескольких языках — это не просто перевод или локализация (L10N). Это требует дополнительных мер, связанных с интернационализацией (I18N). В этой статье мы делимся несколькими советами для международных сайтов.
Делайте страницы готовыми к I18N в разметке, а не в таблицах стилей
Язык и направление текста неотделимы от содержимого документа. По возможности для интернационализации всегда используйте разметку, а не таблицы стилей. Используйте
@lang и @dir, по крайней мере, в элементе html :
Избегайте собственных решений вроде специальных классов или идентификаторов.
Что касается I18N в таблицах стилей, полагаться на CSS можно не всегда: спецификация CSS определяет, что соответствующие агенты пользователя
могут игнорировать такие свойства, как direction или unicode-bidi.
(Для XML ситуация иная. XML не предлагает специальной разметки для интернационализации, поэтому здесь рекомендуется использовать CSS.)
Используйте одну таблицу стилей для всех локалей
Вместо того чтобы создавать отдельные таблицы стилей для LTR- и RTL-направления или даже для каждого языка,
объедините все в одну таблицу стилей. Это делает правила интернационализации гораздо
более понятными и простыми в обслуживании.
Поэтому вместо внедрения альтернативной таблицы стилей вроде
просто используйте существующую
При таком подходе вам потребуется дополнить существующие правила CSS их международными аналогами:
Используйте селектор атрибута [dir='rtl'] Поскольку мы рекомендуем оставить имеющуюся таблицу стилей (совет № 2), вам нужен другой способ выбора элементов, стиль которых для другого направления должен отличаться. Поскольку RTL-контент требует специальной разметки (совет № 1), это должно быть просто: для большинства современных браузеров мы можем просто использовать
[dir=’rtl’]
Вот пример:.
Используйте
:lang() псевдокласс Чтобы применить стили к документам на определенном языке, используйте псевдокласс
:lang() . (Обратите Например, если вы обнаружите, что полужирное начертание плохо работает для китайских документов
внимание, что речь идет о документах, а не о фрагментах текста, так как работа с фрагментами определенного языка усложняет задачу.)
(что действительно так), используйте следующее:
Зеркально отображайте свойства, связанные с левым и правым
При работе как с LTR-, так и с RTL-контентом важно зеркально отображать все значения, меняющие направление. Среди свойств, за которыми нужно следить, — все, что связано с границами, отступами и полями,
а также свойства позиционирования,
float илиtext-align
Например, то, что в LTR задается как.
text-align: left в RTL должно быть text-align: right
Существуют инструменты, упрощающие «зеркалирование» направления. Один из них — CSSJanus
, хотя он был создан
для подхода с «отдельными таблицами стилей», а не с «одной таблицей стилей».
Уделяйте внимание деталямОбратите внимание на следующие моменты:
Изображения, созданные для левой или правой стороны (стрелки или фоны), источники света в
box-shadow
- и
text-shadow values, а также позиционирование и анимация в JavaScript:
Возможно, их потребуется поменять местами и адаптировать для противоположного направления.Размеры шрифтов и шрифты, особенно для нелатинских алфавитов: в зависимости от письменности и шрифта размер по умолчаниюСпецифичность
может оказаться слишком мал. Подумайте о том, чтобы настроить размер и, при необходимости, шрифт. - CSS
- :
При использовании хука
[dir=’rtl’](или[dir='ltr']) (совет № 2) вы применяете
селектор с более высокой специфичностью. Это может привести к проблемам. Просто помните об этом и
вносите соответствующие коррективы.Если у вас есть вопросы или отзывы, посетитеСправочный форум для веб-мастеров по интернационализации
или оставьте свои комментарии здесь.
Автор:Jens O. Meiert
Как мы это применяем
Google announcements age. We keep this post here for the record, and we note for clients whether the behaviour it describes still applies today or has since been superseded.
Связанные услуги