Версия учебной статьи для печати

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

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

Содержание важнее копии экрана

Печатная версия не обязана повторять каждый цвет и поверхность. Её задача — передать последовательность урока и точные примеры. Название, заголовки, подписи и связь кода с разбором остаются важными. Крупная карточка перехода, наоборот, теряет смысл, если действие невозможно выполнить на бумаге.

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

Локальная горизонтальная прокрутка кода является главным техническим ограничением. Если отправить в печать тот же pre с скрытым за краем окончанием, часть строки может не попасть на страницу. Поэтому печатный слой получает перенос. Это осознанное изменение представления, которое не меняет исходный текст программы.

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

Полный печатный слой

Создайте lesson-18.css и подключите после стилей основного снимка. Ниже полный файл:

@media print {
  .reading-lab { --lab-bg: #fff; --lab-surface: #fff; --lab-soft: #fff; --lab-ink: #111; --lab-muted: #444; --lab-line: #bbb; --lab-link: #111; --lab-link-hover: #111; display: block; min-height: 0; background: #fff; color: #111; font-size: 11pt; }
  .reading-lab .lab-prose { font-size: 11pt; }
  .reading-lab .lab-main { max-width: none; padding: 0; }
  .reading-lab .lab-layout { display: block; }
  .reading-lab .lab-aside, .reading-lab .lab-breadcrumbs,
  .reading-lab .lab-pager, .reading-lab .lab-related, .reading-lab .lab-footer { display: none; }
  .reading-lab .lab-header { padding: 0 0 1rem; background: transparent; }
  .reading-lab .lab-brand { color: #111; background: transparent; padding: 0; }
  .reading-lab .lab-heading, .reading-lab .lab-prose, .reading-lab .lab-sources { max-width: none; }
  .reading-lab a, .reading-lab .lab-meta, .reading-lab .lab-meta dd { color: #111; }
  .reading-lab .lab-code, .reading-lab .lab-note, .reading-lab .lab-prototype { background: transparent; overflow: visible; }
  .reading-lab .lab-code-label { background: transparent; color: #444; padding-inline: 0; }
  .reading-lab .lab-code pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; padding-inline: 0; }
  .reading-lab .lab-table-wrap { overflow: visible; }
  .reading-lab .lab-table { min-width: 0; font-size: 9pt; }
  .reading-lab .lab-table thead { background: transparent; }
  .reading-lab .lab-figure figcaption { color: #444; }
  .reading-lab h2, .reading-lab h3 { break-after: avoid; }
  .reading-lab .lab-figure { break-inside: avoid; }
}
@page { margin: 18mm; }

Ожидаемый эффект проявляется в среде печати, а не в обычном окне. Медиаусловие print задаёт отдельные правила, @page описывает параметры печатной страницы. Их использование рассматривается в MDN о печати и MDN о @page. Конкретный принтер и браузер могут накладывать свои ограничения.

Ниже мы не задаём формат A4 как обязательный. Поля в миллиметрах являются исходным выбором, а содержимое должно учитывать выбранный пользователем лист. Если материал предназначен для фиксированного издательского формата, понадобится отдельный договор. Браузерная печать обычной статьи не равна полностью управляемой книжной вёрстке.

Перенос кода и границы страницы

pre-wrap сохраняет исходные пробелы и переводы строк, одновременно позволяя перенос по ширине. Дополнительный overflow-wrap помогает длинной последовательности, которая иначе не помещается. Это печатный вариант: экранный код продолжает использовать локальную прокрутку, как задано в седьмом уроке.

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

Запрет break-inside: avoid у иллюстрации является пожеланием сохранить рисунок и подпись вместе. Если объект выше печатной страницы, сохранить его целиком может оказаться невозможно. Не назначаем такой запрет каждому большому листингу: огромный блок способен создать пустые области и неудобные разрывы. Правило должно соответствовать размеру объекта.

У заголовков используется предотвращение разрыва сразу после них. Это помогает не оставлять заголовок внизу отдельно от своего объяснения. Но и здесь требуется будущий просмотр нескольких страниц. Одного CSS-правила недостаточно, чтобы обещать идеальные переносы всех длинных уроков.

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

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

Дополнительно сравните печать с включёнными и выключенными фоновыми изображениями в настройках браузера. Основной смысл должен передаваться текстом и структурой, а не исчезающей заливкой. Это условие будущего просмотра, а не уже полученный результат. Если важный статус обозначен только цветным прямоугольником, его нужно назвать словами в содержании; печатный слой не способен восстановить отсутствующее объяснение.

Ссылки и документы на бумаге

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

Полные адреса ссылок иногда выводят через псевдоэлемент с attr(href). Для нашего примера не добавляем это ко всем ссылкам: длинные маршруты могут занять несколько строк и разрушить компактное объяснение. Если адрес важен на бумаге, лучше предусмотреть короткое понятное обозначение или отдельный список источников.

Также нельзя выдавать напечатанную страницу за гарантированно доступный PDF. Доступность полученного документа зависит от структуры и способа экспорта; это отдельная тема. Данный урок проектирует визуальный печатный слой и сохраняет смысловые элементы исходного HTML.

Полезно оставить название сайта в коротком хедере. Оно показывает происхождение материала без тяжёлой фирменной поверхности. Логотип или фон не должны становиться единственным способом узнать страницу: обычный текст сохраняется и при печати без изображений.

Условия будущего просмотра

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

Если таблица не помещается, не уменьшайте автоматически все шрифты документа. Изменение должно относиться к конкретному объекту или его данным. Сначала проверьте число колонок, длину формулировок и возможность отдельного содержательного сравнения.

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