Получить профессию в Skypro
Настройка отступов при печати HTML-страницы с помощью CSS
Быстрый ответ
Чтобы устранить стандартные отступы при печати, примените следующий код:
@media print {
/* Предотвращаем выход контента за границы страницы */
@page { margin: 0; }
/* Обеспечиваем достаточное пространство для содержимого */
body { margin: 20mm; }
}Данный фрагмент CSS-кода вначале обнуляет отступы страницы, затем устанавливает отступ в 20 мм для элемента body, чтобы контент оставался видимым при печати.
Теперь давайте подробнее разберёмся в указанных методиках создания идеальных версий страниц для печати.
Золотой стандарт настройки стилей для печати
Настройка стилей печати может отличаться в зависимости от браузера и устройства. Давайте рассмотрим, как можно настроить отступы для оптимального вывода на печать.
Универсальное решение: директива @page
Используйте директиву @page для определения отступов бумаги при печати:
/* Установка отступов для всей страницы */
@page {
/* Задаём оптимальные глобальные отступы */
margin: 1cm;
}Таким образом, мы говорим принтеру использовать отступ в 1 см на каждой странице. Предпочтительно выбирать единицы измерения, такие как см или мм, а не пиксели, которые могут вести себя непредсказуемо при печати.
Более детальная настройка: @media print
Для точной настройки отступов печатного контента можно использовать следующий манёвр:
@media print {
body {
/* Создаем необходимое пространство для всех элементов */
margin: 15mm 10mm;
}
}Такой образом, мы устанавливаем различные горизонтальные и вертикальные отступы для тела документа при печати.
Когда @page работает некорректно
Директива @page является отличным инструментом для стилей печати, однако браузеры могут интерпретировать его по-разному.
Например, Internet Explorer, начиная с 7-й версии, может изменять масштаб вашего макета для печати. Этот параметр пользователю придётся отключить в настройках печати браузера, так как CSS-настройки здесь не работают. Поддержка @page в Safari также ограничена.
Но не стоит беспокоиться! Если @page не работает как нужно, вот универсальный код для Chrome:
@media print {
/* Специально для пользователей Chrome */
body { margin: 20mm; }
}Это решение поможет пользователям Chrome, когда директива @page не обеспечивает ожидаемого результата.
Особые настройки для объёмного контента
Если вам нужно напечатать страницу с большим количеством контента, поля page-break помогут справиться с этой задачей:
.division {
/* Если вам нужен полный контроль над разрывами страницы */
page-break-before: always;
}Для сохранения всех пропорций печати используйте разные классы для различных блоков контента.
Внимание к деталям: высота и ширина
Тщательная работа с размерами контента – высотой и шириной – гарантирует, что все изображения и тексты уместятся в заданные отступы. Отрегулируйте эти параметры, чтобы предотвратить выход содержимого за пределы страницы.
Расширяем возможности с помощью @page
Если ваша версия для печати требует особых настроек, правило @page позволит создать именованные страницы для дополнительного контроля:
@page WideMarginPage {
/* Подготавливаем пространство для задумчивых обращений */
size: A4;
margin: 1cm;
}
@media print {
.wide-section {
/* Применяем стиль 'WideMarginPage' */
page: WideMarginPage;
}
}Так класс .wide-section будет печататься на страницах определённого формата с заданными отступами для "WideMarginPage".
Визуализация
Представьте, что вы оформляете картину (<body>), вокруг которой нет отступов при её просмотре (или печати).
🖼️
До: |🏞️ 🏞️|
| |
(без отступов)Создав рамку, вы обеспечиваете пространство "для дыхания", и это влечёт за собой что?
🖼️
После: | 🏞️ 🏞️ |
| |
(с отступами)Замените 🏞️ на ваш HTML-контент, а 🖼️ на правило @page, чтобы установить нужные отступы при печати и... вуаля! 🎨✨
Полезные материалы
- @page – CSS | MDN — официальное руководство Mozilla по использованию отступов при печати.
- Print Style Sheet Setup — Smashing Magazine — советы по созданию стилевых файлов для печати от Smashing Magazine.
- 'html+printing+css' Q&A – Stack Overflow — советы и рекомендации по использованию CSS для печати на страницах Stack Overflow.
- Unraveling the Table Element | CSS-Tricks — всё, что нужно знать о работе с HTML-таблицами для корректного отображения при печати.
- Crafting Printer-friendly Pages with CSS — SitePoint — ключевые принципы оформления страниц, удобных для печати, от SitePoint.
- Printable Pages Made Easier – DigitalOcean — методы и примеры создания страниц в HTML, оптимизированных для печати, включая настройку отступов.