Практика: короткая вертикальная метка рядом с текстом
Вертикальное письмо может использоваться для короткой вспомогательной метки, если основной текст остаётся удобно читаемым. Упражнение показывает writing-mode без поворота всей карточки через transform.
Назначение
Вертикальное письмо может использоваться для короткой вспомогательной метки, если основной текст остаётся удобно читаемым. Упражнение показывает writing-mode без поворота всей карточки через transform.
Как это работает
Метка занимает отдельную колонку Grid. Writing-mode:vertical-rl меняет направление строк, а text-orientation:upright сохраняет отдельные латинские буквы вертикально. На узком экране пример возвращается к обычному направлению.
Пример
<style>.vertical-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;border:1px solid #9ab9a5;padding:1rem}.vertical-label{writing-mode:vertical-rl;text-orientation:upright;background:#dfefe5;padding:.5rem;font-weight:700}@media(max-width:24rem){.vertical-card{grid-template-columns:1fr}.vertical-label{writing-mode:horizontal-tb}}</style>
<section class="vertical-card"><span class="vertical-label" lang="en">HTML</span><div><h2>Структура страницы</h2><p>Основное объяснение читается в привычном направлении.</p></div></section>Что должно получиться
Короткая метка располагается вертикально, а текст рядом остаётся горизонтальным. При малой ширине компоновка становится одноколоночной и метка перестаёт занимать боковую полосу.
Граница применения и частая ошибка
Не используйте вертикальное оформление для длинных инструкций только ради декора. Порядок DOM не меняется вместе с визуальными осями. Логические размеры inline и block будут соответствовать другим физическим направлениям внутри метки.
Самостоятельная проверка
Увеличьте метку до нескольких слов и оцените ухудшение чтения. Проверьте узкий экран и масштаб. Если вертикальная запись мешает пониманию, оставьте обычную горизонтальную подпись без потери содержания.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.