Ширина статьи и боковые области

Иерархия уже помогает отличать начало материала от служебных областей. Однако длинная строка обычного текста утомляет поиск начала следующей строки, а чрезмерно узкая колонка дробит каждую мысль на множество коротких отрезков. Ширина статьи становится самостоятельным параметром чтения: её нельзя выбирать только по размеру свободного окна.

В этом уроке вы зададите общую сетку reading-lab и отделите место для оглавления от области объяснения. Мы продолжим исходный документ, сохраним дополнение второго урока и подключим после него lesson-03.css. Код и таблица ещё не получат окончательного оформления, но перестанут определять ширину всего документа.

Ширина оболочки и ширина текста

У страницы есть как минимум два ограничения. Первое относится к общей оболочке: она не должна разъезжаться по огромному экрану. Второе относится к текстовой колонке: внутри оболочки можно оставить место для вспомогательной области. Если ограничить только весь сайт, абзацы всё равно могут оказаться слишком широкими. Если ограничить только абзацы, таблицы и шапка потеряют общие ориентиры.

В reading-lab максимальная ширина основной области будет 76rem, а сетка на широком экране разделится на статью и оглавление шириной 16rem. Эти числа являются начальным проектным решением, а не результатом измерения скорости чтения. Размеры можно обсуждать на реальном русском тексте, после выбора шрифта и масштаба. До этого точное число символов в строке мало что говорит о форме страницы.

Саму прозу ограничим значением 68ch. Единица ch связана с шириной глифа нуля используемого шрифта, поэтому она не означает буквально шестьдесят восемь кириллических букв. Здесь она помогает связать колонку с размером набора. У заголовков, жирных слов и пропорциональных букв будет другая фактическая длина. Такое устройство единицы описано в справочнике MDN по длинам.

Важно также сохранить общий левый край. Абзацы, заголовки, код и подписи начинаются по одному ориентиру, хотя отдельный технический блок может занимать всю ширину статьи. Тогда расширение таблицы воспринимается как осмысленное исключение, а не как случайное смещение материала.

Две колонки с возможностью сжатия

Следующий листинг — полный файл lesson-03.css, который добавляется после предыдущих стилей:

.reading-lab .lab-main { max-width: 76rem; padding: 1.5rem; }
.reading-lab .lab-layout {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem;
}
.reading-lab .lab-prose { max-width: 68ch; }
.reading-lab .lab-article, .reading-lab .lab-aside { min-width: 0; }
@media (min-width: 64rem) {
  .reading-lab .lab-layout { grid-template-columns: minmax(0, 1fr) 16rem; }
}

По замыслу на узком экране области остаются одна под другой, а после появления достаточного места оглавление занимает отдельную колонку. Граница 64rem выбрана с учётом двух областей, промежутка и внешних полей. Она не привязана к названию конкретного устройства. Если содержимое оглавления станет значительно шире, эту границу потребуется пересмотреть.

Первую колонку задаёт minmax(0, 1fr). Функция определяет минимальный и максимальный размер дорожки сетки; нулевой минимум позволяет ей сжиматься, а 1fr распределяет доступное свободное место. Устройство функции приведено в MDN. В нашем проекте это предотвращает ситуацию, когда длинный неразрывный технический фрагмент сам назначает минимум всей колонки.

Правило min-width: 0 относится уже к элементам сетки. У сеточных и flex-элементов автоматический минимум может зависеть от содержимого; явный ноль разрешает сжатие до доступной ширины. Соответствующее поведение описано в MDN. Ноль не делает текст невидимым: переполнение конкретного блока нужно обработать отдельно. Этому посвящены уроки кода и таблиц.

Почему нельзя растянуть все элементы одинаково

Рассмотрим абзац и листинг в разделе build. Абзац читается строка за строкой. В коде длина строки может иметь структуру, а её окончание важно для точности примера. Ограничить оба элемента одинаковой шириной допустимо, но их внутреннее поведение различается. Проза переносится по словам, код получает собственную прокрутку или явно выбранный режим переноса.

Если установить для всей страницы overflow-x: hidden, внешняя горизонтальная полоса может исчезнуть. При этом окончание кода останется за пределами видимой области, и проблема лишь спрячется. Поэтому сетка должна разрешать сжатие, а сложные блоки — предоставлять доступ к переполнению. В базовом CSS листинг уже имеет локальный overflow: auto; позже уточним его размеры и подпись.

Оглавление не следует заполнять до самого правого края экрана. Оно принадлежит статье и визуально должно находиться в той же оболочке. Когда боковая область слишком далека, читатель воспринимает её как отдельный виджет сайта. Общая сетка и фиксированный умеренный промежуток сохраняют связь даже при различной высоте колонок.

На узком экране оглавление в исходном порядке документа оказывается после статьи. Это честное промежуточное состояние стенда, а не обещание идеального мобильного интерфейса. В уроке оглавления рассмотрим его расположение в начале чтения. Сейчас не будем использовать CSS order для перемещения одного и того же элемента через всю страницу: визуальный порядок желательно согласовывать с порядком документа.

Ещё один полезный вариант — широкое окно с намеренно коротким текстом. В нём хорошо видно, связаны ли края заголовка и первого абзаца. Не центрируйте каждый короткий фрагмент отдельно только потому, что справа остаётся свободное пространство: это создаст несколько разных осей. Центрирование всего ограниченного контейнера и выравнивание его содержания по левому краю являются разными действиями.

Если захотите увеличить внешние поля, сначала посмотрите на промежуточный размер окна. Большой запас на широком экране может оказаться разумным, но постоянное значение съест колонку при сжатии. Поэтому внешнее окружение и внутренний размер чтения следует обсуждать отдельно, сохраняя ясную связь с доступным местом.

Вариант без боковой области

Не каждая статья нуждается в отдельной колонке. У короткого приёма из двух абзацев оглавление занимает больше места, чем само содержание. В таком случае можно оставить одноколоночную композицию, используя те же поля и ограничения текста. Это вариант страницы, а не повод создавать полностью независимую систему размеров.

Для эксперимента временно измените широкую сетку на одну дорожку и оставьте оглавление ниже. Сравните связь заголовка с прозой, ширину листинга и положение таблицы. При таком сравнении вы изменяете один параметр, поэтому причина различия остаётся понятной. Одновременная замена шрифта, цвета и ширины сделала бы вывод о сетке неопределённым.

Обратите внимание на пустое место справа от короткого абзаца. Оно не обязательно требует декоративной карточки или дополнительной ссылки. Ограничение строки служит чтению, а свободная часть оболочки сохраняет спокойствие страницы. Заполнять каждый свободный участок особенно опасно на длинном уроке, где основной текст уже требует внимания.

После этого урока сетка имеет понятный договор: общая оболочка ограничена, статья умеет сжиматься, проза получает собственную ширину, а сложные блоки не должны увеличивать весь документ. В уроке о типографике свяжем эту геометрию с размером русского текста и начертанием кода.