Интернет доступен каждому в мире — это прямо из его названия! Это значит, что ваш веб-сайт потенциально доступен любому, кто имеет доступ к интернету, независимо от того, где он находится, какое устройство использует или на каком языке говорит.
Цель адаптивного дизайна — сделать ваш контент доступным для всех. Применение той же философии к человеческим языкам является движущей силой интернационализации — подготовки вашего контента и дизайна для международной аудитории.
Логические свойства
Английский язык пишется слева направо и сверху вниз, но не все языки пишутся таким образом. Некоторые языки, такие как арабский и иврит, читаются справа налево, а некоторые японские шрифты читаются вертикально, а не горизонтально. Для учета этих способов написания в CSS были введены логические свойства.
Если вы пишете CSS-код, вы, возможно, использовали ключевые слова, указывающие направление, такие как "left", "right", "top" и "bottom". Эти ключевые слова обозначают физическое расположение элементов на устройстве пользователя.
Логические свойства , с другой стороны, относятся к краям блока и их связи с потоком содержимого. Если режим написания меняется, CSS, написанный с использованием логических свойств, будет обновляться соответствующим образом. С направленными свойствами дело обстоит иначе.
В то время как направленное свойство margin-left всегда относится к левому краю блока контента, логическое свойство margin-inline-start относится к левому краю блока контента в языках с письмом слева направо и к правому краю блока контента в языках с письмом справа налево.
Чтобы ваши проекты адаптировались к различным режимам письма, избегайте направленных свойств. Вместо них используйте логические свойства.
.byline { text-align: right; }
.byline { text-align: end; }
Когда в CSS есть определенное значение направления, например, left или right , существует соответствующее логическое свойство. Если раньше у нас было margin-left то теперь есть и margin-inline-start .
В английском языке, где текст располагается слева направо, inline-start соответствует "слева", а inline-end — "справа".
Аналогично, в английском языке, где текст пишется сверху вниз, block-start соответствует «верху», а block-end — «низу».
Использование логических свойств в CSS позволяет применять одну и ту же таблицу стилей для перевода страниц. Даже если ваши страницы переведены на языки, пишущие справа налево или снизу вверх, дизайн будет соответствующим образом адаптирован. Вам не нужно создавать отдельные дизайны для каждого языка. Благодаря использованию логических свойств ваш дизайн будет реагировать на все способы написания. Это означает, что ваш дизайн сможет охватить больше людей, и вам не придётся тратить время на создание отдельных дизайнов для каждого языка.
Современные методы компоновки CSS, такие как grid и flexbox, по умолчанию используют логические свойства. Если вы будете мыслить категориями inline-start и block-start вместо left и top то вам будет проще понять эти современные методы.
Возьмем распространенный шаблон, например, иконку рядом с текстом или метку рядом с полем формы. Вместо того чтобы думать: «У метки должен быть отступ справа», подумайте: «У метки должен быть отступ в конце ее прямой оси».
label { margin-right: 0.5em; }
label { margin-inline-end: 0.5em; }
Если эта страница переведена на язык с письмом справа налево, обновлять стили не потребуется. Вы можете имитировать эффект просмотра страниц на языке с письмом справа налево, используя атрибут dir в вашем html элементе. Значение ltr означает «слева направо», а значение `rtl` — «справа налево».
Если вы хотите поэкспериментировать со всеми возможными вариантами направления документа (блочная ось) и режимами ввода (строчная ось), вот интерактивная демонстрация .
Укажите язык страницы
Рекомендуется указывать язык страницы, используя атрибут lang в html элементе.
<html lang="en">
Этот пример относится к странице на английском языке. Вы можете указать еще более конкретно. Вот как можно указать, что на странице используется американский вариант английского языка:
<html lang="en-us">
Указание языка документа полезно для поисковых систем. Это также полезно для вспомогательных технологий, таких как программы чтения с экрана и голосовые помощники. Предоставляя метаданные о языке, вы помогаете этим типам синтезаторов речи правильно произносить ваш контент.
Атрибут lang можно использовать для любого HTML-элемента, а не только html . Если вы переключаете язык на своей веб-странице, укажите это изменение. В данном случае одно слово написано на немецком языке:
<p>I felt some <span lang="de">schadenfreude</span>.</p>
Определите язык связанного документа
Существует ещё один атрибут, называемый hreflang , который можно использовать для ссылок. Атрибут hreflang использует ту же кодировку языка, что и атрибут lang , и описывает язык связанного документа. Если для всей вашей страницы доступен перевод на немецкий язык, создайте ссылку на неё следующим образом:
<a href="/path/to/german/version" hreflang="de">German version</a>
Если вы используете текст на немецком языке для описания ссылки на немецкую версию, используйте как hreflang , так и lang . В данном случае текст "Deutsche Version" помечен как написанный на немецком языке, и целевая ссылка также помечена как написанная на немецком языке:
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
Также можно использовать атрибут hreflang для элемента link . Он размещается в head документа:
<link href="/path/to/german/version" rel="alternate" hreflang="de">
Но в отличие от атрибута lang , который может применяться к любому элементу, hreflang может применяться только к элементам a и link .
Учитывайте интернационализацию при разработке дизайна.
При разработке веб-сайтов, которые будут переводиться на другие языки и в другие форматы, учитывайте следующие факторы:
- В некоторых языках, например, в немецком, часто используются длинные слова. Ваш интерфейс должен адаптироваться к этим словам, поэтому избегайте узких столбцов. Вы также можете использовать CSS для добавления дефисов .
- Убедитесь, что значения
line-heightпозволяют размещать такие символы, как диакритические знаки и другие символы. Строки текста, которые хорошо выглядят на английском языке, могут перекрываться на другом языке. - Если вы используете веб-шрифт, убедитесь, что его диапазон символов достаточно широк, чтобы охватить все языки, на которые вы будете переводить.
- Не создавайте изображения, содержащие текст. В противном случае вам придётся создавать отдельные изображения для каждого языка. Вместо этого разделите текст и изображение и используйте CSS для наложения текста на изображение.
Мыслите в международном контексте.
Такие атрибуты, как lang и hreflang делают ваш HTML-код более информативным для интернационализации. Аналогично, логические свойства делают ваш CSS более гибким.
Если вы привыкли мыслить категориями top , bottom , left и right , вам может быть сложно начать думать о block start , block end , inline start и inline end . Но это того стоит. Логические свойства — ключ к созданию действительно адаптивных макетов.
Проверьте свое понимание
Проверьте свои знания в области интернационализации.
В английском языке, какая же это физически right сторона коробки?
block-starttop .block-endbottominline-startleftinline-endКакой атрибут следует добавить в HTML-код, чтобы сделать его более информативным для интернационализации?
englishlanglanguagei18nДалее вы узнаете, как создавать макеты на уровне страницы, также известные как макромакеты .