Полное руководство по CSS writing-mode для управления направлением текста, интернационализации (i18n) и создания глобально доступных веб-сайтов.
Режим письма в CSS: освоение направления текста для международных веб-сайтов
В современном взаимосвязанном мире веб-сайты должны обслуживать разнообразную аудиторию, и важнейшим аспектом этого является обработка различных направлений текста. Свойство CSS writing-mode — это мощный инструмент, который позволяет разработчикам контролировать направление потока текста, создавая по-настоящему интернационализированные (i18n) и визуально привлекательные веб-интерфейсы. В этом подробном руководстве мы рассмотрим тонкости writing-mode, предоставив практические примеры и полезные советы, которые помогут вам освоить управление направлением текста для глобальных веб-сайтов.
Понимание режимов письма
Свойство CSS writing-mode определяет, располагаются ли строки текста горизонтально или вертикально, а также направление следования блоков. Оно играет ключевую роль в адаптации веб-страниц для языков, использующих разные направления письма, таких как:
- Слева направо (LTR): английский, испанский, французский, немецкий и многие другие западные языки.
- Справа налево (RTL): арабский, иврит, персидский и урду.
- Вертикальное: традиционный китайский, японский и монгольский.
По умолчанию веб-браузеры используют режим письма horizontal-tb, при котором текст располагается горизонтально сверху вниз. Однако writing-mode позволяет изменить это поведение по умолчанию и создавать макеты, учитывающие различные направления текста.
Значения свойства `writing-mode`
Свойство writing-mode принимает несколько значений, каждое из которых определяет различное направление текста и потока блоков:
horizontal-tb: Горизонтально, сверху вниз. Строки текста горизонтальны и идут сверху вниз. Это значение по умолчанию.vertical-rl: Вертикально, справа налево. Строки текста вертикальны и идут справа налево. Блоки следуют вниз.vertical-lr: Вертикально, слева направо. Строки текста вертикальны и идут слева направо. Блоки следуют вниз.sideways-rl: Устаревший псевдоним дляvertical-rl.sideways-lr: Устаревший псевдоним дляvertical-lr.
Следующие значения также доступны, но используются реже:
block-flow: Использует направление контекста блочного форматирования, на которое могут влиять другие свойства.
Основные примеры
Давайте проиллюстрируем использование writing-mode на нескольких простых примерах:
Горизонтальный текст (по умолчанию)
Это поведение по умолчанию, поэтому явное указание writing-mode не требуется:
<p>Это горизонтальный текст.</p>
Вертикальный текст (справа налево)
Чтобы отобразить текст вертикально справа налево, используйте vertical-rl:
<p style="writing-mode: vertical-rl;">Это вертикальный текст (справа налево).</p>
Вертикальный текст (слева направо)
Чтобы отобразить текст вертикально слева направо, используйте vertical-lr:
<p style="writing-mode: vertical-lr;">Это вертикальный текст (слева направо).</p>
Практическое применение `writing-mode`
Помимо базового управления направлением текста, writing-mode предлагает ряд практических применений для создания визуально привлекательных и доступных на международном уровне веб-сайтов:
1. Адаптация к языкам с письмом справа налево (RTL)
Для веб-сайтов, поддерживающих языки RTL, такие как арабский или иврит, writing-mode имеет важное значение для правильного отображения текста. Вы можете использовать CSS-селекторы, чтобы применить writing-mode: rtl; к определенным элементам или ко всему документу на основе языкового атрибута:
<html lang="ar">
<body>
<p>هذا نص عربي.</p>
</body>
</html>
html[lang="ar"] {
direction: rtl;
unicode-bidi: bidi-override;
}
Хотя direction: rtl; имеет решающее значение для установки основного направления, вам также может понадобиться unicode-bidi: bidi-override; для обеспечения правильной обработки текста со смешанным направлением. Современные подходы часто предпочитают логические свойства, которые обсуждаются позже.
2. Создание вертикальных навигационных меню
writing-mode можно использовать для создания вертикальных навигационных меню, которые часто встречаются на японских и китайских веб-сайтах. Это может придать вашему сайту уникальный визуальный стиль:
<ul class="vertical-menu">
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
.vertical-menu {
list-style: none;
padding: 0;
margin: 0;
}
.vertical-menu li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
writing-mode: vertical-rl;
text-orientation: upright;
}
В этом примере text-orientation: upright; используется для того, чтобы текст внутри элементов вертикального меню отображался вертикально, а не поворачивался.
3. Создание макетов в журнальном стиле
Свойство writing-mode можно использовать для создания макетов в журнальном стиле. Например, у вас может быть большое изображение с наложенным на него вертикальным текстом для создания поразительного визуального эффекта.
<div class="magazine-section">
<img src="image.jpg" alt="Изображение для журнала">
<div class="vertical-text">Эксклюзивное интервью</div>
</div>
.magazine-section {
position: relative;
width: 500px;
height: 300px;
}
.magazine-section img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vertical-text {
position: absolute;
top: 0;
right: 10px;
color: white;
font-size: 2em;
writing-mode: vertical-rl;
text-orientation: upright;
transform-origin: top right;
transform: rotate(180deg); /* Required to render correctly across browsers */
}
Свойство transform: rotate(180deg); часто необходимо для обеспечения последовательного рендеринга в разных браузерах, особенно в старых версиях.
4. Улучшение визуализации данных
При визуализации данных writing-mode может быть полезен для маркировки осей в диаграммах и графиках, особенно при ограниченном пространстве. Например, вы можете повернуть метки на вертикальной оси, чтобы они не перекрывали друг друга.
Продвинутые техники и важные аспекты
Чтобы в полной мере использовать возможности writing-mode, рассмотрите эти продвинутые техники и важные факторы:
1. Логические свойства и значения
Современный CSS вводит логические свойства и значения, которые обеспечивают более гибкий и семантический способ управления макетом и направлением. Вместо физических свойств, таких как left и right, используются логические свойства, такие как start и end, которые адаптируются к направлению письма. Например:
margin-inline-start: Эквивалентноmargin-leftв LTR иmargin-rightв RTL.padding-block-start: Эквивалентноpadding-topв горизонтальных режимах письма иpadding-leftилиpadding-rightв вертикальных.
Использование логических свойств делает ваш CSS более адаптируемым и простым в обслуживании, особенно при работе с несколькими направлениями письма.
2. Сочетание `writing-mode` с другими свойствами CSS
writing-mode взаимодействует с другими свойствами CSS, такими как text-orientation, direction и unicode-bidi, для управления внешним видом и поведением текста. Понимание этих взаимодействий имеет решающее значение для достижения желаемых результатов.
text-orientation: Задает ориентацию символов в вертикальных режимах письма. Значения включаютupright,sideways,mixedиuse-glyph-orientation.direction: Задает базовое направление текста (LTR или RTL).unicode-bidi: Контролирует, как к элементу применяется двунаправленный алгоритм Unicode.
3. Обработка текста со смешанным направлением
При работе с текстом, содержащим символы как LTR, так и RTL (например, английский текст в арабском абзаце), важно использовать свойство unicode-bidi для обеспечения правильного рендеринга. Значение bidi-override часто используется для принудительного задания определенного направления.
<p dir="rtl">هذا نص عربي يتضمن بعض الكلمات الإنجليزية <span style="unicode-bidi: bidi-override; direction: ltr;">like this example.</span></p>
4. Выбор шрифтов
Не все шрифты подходят для вертикального письма. Некоторые шрифты могут не содержать глифов для вертикального письма или отображаться некорректно. При использовании вертикальных режимов письма выбирайте шрифты, специально разработанные для вертикального текста или имеющие хорошую поддержку вертикальных глифов.
Шрифты из стран Восточной Азии (Китай, Япония, Корея), как правило, очень хорошо поддерживают вертикальное письмо.
5. Доступность
Убедитесь, что использование writing-mode не оказывает негативного влияния на доступность. Предоставляйте альтернативный текст для изображений и другого нетекстового контента и убедитесь, что текст читаем и понятен для пользователей с ограниченными возможностями. Используйте семантические элементы HTML и атрибуты ARIA для улучшения доступности.
6. Совместимость с браузерами
Свойство writing-mode хорошо поддерживается в современных браузерах, но для старых браузеров могут потребоваться вендорные префиксы (например, -webkit-writing-mode, -ms-writing-mode). Используйте препроцессор CSS, такой как Sass или Less, для автоматического добавления вендорных префиксов или воспользуйтесь инструментом вроде Autoprefixer.
Лучшие практики использования `writing-mode`
Чтобы эффективно использовать writing-mode и создавать глобально доступные веб-сайты, следуйте этим лучшим практикам:
- Используйте логические свойства и значения везде, где это возможно. Это сделает ваш CSS более адаптируемым и простым в обслуживании.
- Выбирайте подходящие шрифты для вертикальных режимов письма. Тестируйте шрифты, чтобы убедиться, что они корректно отображаются в вертикальном тексте.
- Учитывайте доступность. Убедитесь, что использование
writing-modeне оказывает негативного влияния на доступность для пользователей с ограниченными возможностями. - Тестируйте свои макеты в разных браузерах и на разных устройствах. Убедитесь, что ваши макеты корректно отображаются на разных платформах.
- Используйте препроцессоры CSS или Autoprefixer для обработки вендорных префиксов. Это сэкономит ваше время и усилия и обеспечит совместимость вашего CSS со старыми браузерами.
- Отделяйте контент от представления. Используйте CSS для управления представлением вашего контента и избегайте использования HTML для стилизации.
Примеры глобальных сайтов, использующих `writing-mode`
Многие веб-сайты по всему миру используют writing-mode для различных целей, от адаптации к языкам RTL до создания визуально уникальных макетов. Вот несколько примеров:
- Новостные сайты на арабском языке или иврите: Эти сайты используют
direction: rtlи, возможно, корректировкиwriting-modeдля правильного отображения текста. - Сайты, посвященные искусству и культуре Японии и Китая: Часто используют вертикальное письмо для заголовков, меню и декоративных элементов.
- Модные журналы: Часто используют вертикальный текст в визуальных макетах для стилистических эффектов.
Заключение
CSS writing-mode — это мощный инструмент для создания интернационализированных и визуально привлекательных веб-сайтов. Понимая различные значения этого свойства и то, как оно взаимодействует с другими свойствами CSS, вы можете создавать макеты, которые адаптируются к различным направлениям текста и улучшают пользовательский опыт для глобальной аудитории. Не забывайте учитывать доступность, совместимость с браузерами и выбор шрифтов, чтобы ваши веб-сайты были доступны и визуально привлекательны для всех пользователей.
По мере того как веб-разработка продолжает развиваться, овладение такими техниками, как writing-mode, становится все более важным для создания по-настоящему глобальных и инклюзивных онлайн-проектов. Используйте возможности интернационализации и создавайте веб-сайты, которые находят отклик у пользователей со всех уголков мира.