Печать html-документов
1. Правило @page
Блок страницы состоит из области страницы, где располагается содержимое и области полей, окружающей область страницы. Правило @page используется для изменения некоторых css-свойств при печати документа. Изменить можно только поля элемента margin, а также задать разрывы страниц в указанном месте.
@page {
margin: 2in;
}Можно задавать отдельные поля документа внутри правила @page, такие как margin-top, margin-right, margin-bottom, margin-left:
@page {
margin: 1in;
margin-left: 1.5in;
}2. Разрывы страниц
Управлять разрывами страниц можно с помощью свойств page-break-before, page-break-after и page-break-inside. Данные свойства применяются к блочным элементам, для которых свойство
| page-break-before | |
|---|---|
| Значения: | |
| auto | Значение по умолчанию, задает автоматические разрывы страниц. |
| always | Всегда добавляет разрыв страницы перед элементом. |
| avoid | Отменяет размещение разрыва перед элементом, если это возможно. |
| left | Добавляет один или два разрыва страниц перед элементом, чтобы следующая страница форматировалась как левая страница. Элемент будет печататься, начиная с верха левой страницы, т.е. на странице слева от корешка. При двусторонней распечатке будет выводиться на оборотной стороне листа бумаги. |
| right | Добавляет один или два разрыва страниц перед элементом. Элемент будет печататься, начиная с верха правой границы. Следующая страница будет форматироваться как правая страница. |
| inherit | Наследует это свойство от родительского элемента. |
Синтаксис:
@media print {
h2 {page-break-before: always;}
}| page-break-after | |
|---|---|
| Значения: | |
| auto | Значение по умолчанию, задает автоматические разрывы страниц. |
| always | Всегда добавляет разрыв страницы после элемента. |
| avoid | Отменяет добавление разрыва после элемента, если это возможно. |
| left | Добавляет один или два разрыва страниц после элемента так, чтобы следующая страница форматировалась как левая страница. Элемент будет печататься, начиная с верха левой страницы, т.е. на странице слева от корешка. При двусторонней распечатке будет выводиться на оборотной стороне листа бумаги. |
| right | Добавляет один или два разрыва страниц после элемента так, чтобы следующая страница форматировалась как правая страница. Элемент будет печататься, начиная с верха правой границы. |
| inherit | Наследует это свойство от родительского элемента. |
Синтаксис:
@media print {
footer {page-break-after: always;}
}Свойство page-break-inside говорит браузеру, может ли страница разрываться внутри элемента или нет. Но в случае, если элемент оказывается длиннее страницы, то разрыв неизбежен.
| page-break-inside | |
|---|---|
| Значения: | |
| auto | Значение по умолчанию. Автоматический разрыв страницы. |
| avoid | Запрещает разрыв страницы внутри элемента, если это возможно. |
| inherit | Наследует это свойство от родительского элемента. |
@media print {
img {
display: block;
page-break-inside: avoid;
}
}page-break-after | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 7.0+ | 1.2+ | 1.0+ | ||
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Добавляет разрыв страницы при печати документа после заданного элемента.
Синтаксис
page-break-after: always | auto | avoid | left | right | inherit
Значения
- always
- Всегда добавляет разрыв страницы после элемента.
- auto
- Вставляет разрыв страницы при необходимости.
- avoid
- Запрещает разрыв страницы после элемента.
- left
- Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была четной.
- right
- Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была нечетной.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page-break-after</title>
<style>
@media print {
.more {
page-break-after: always;
}
}
</style>
</head>
<body>
<h3>Мусорные пакеты</h3>
<p>История о том, как однажды мусорных пакетов оказалось несколько больше,
чем хотелось, как и для чего их можно использовать, и что из этого получилось.</p>
<p>Читать дальше</p>
</body>
</html> Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значения left, right и inherit.
Браузеры Firefox, Chrome и Safari не поддерживают значения avoid, left и right.
page-break-before | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 7.0+ | 1.2+ | 1.0+ | ||
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Добавляет разрыв страницы при печати документа перед заданным элементом.
Синтаксис
page-break-before: always | auto | avoid | left | right | inherit
Значения
- always
- Всегда добавляет разрыв страницы перед элементом.
- auto
- Вставляет разрыв страницы при необходимости.
- avoid
- Запрещает разрыв страницы перед элементом.
- left
- Пропускает одну или две страницы перед элементом, чтобы следующая страница при печати была четной.
- right
- Пропускает одну или две страницы перед элементом, чтобы следующая страница при печати была нечетной.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page-break-before</title>
<style>
@media print {
.more {
page-break-before: always;
}
}
</style>
</head>
<body>
<h3>Мусорные пакеты</h3>
<p>История о том, как однажды мусорных пакетов оказалось несколько больше,
чем хотелось, как и для чего их можно использовать, и что из этого получилось.</p>
<p>Читать дальше</p>
</body>
</html> Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значения left, right и inherit.
Браузеры Firefox, Chrome и Safari не поддерживают значения avoid, left и right.
page-break-after | CSS | WebReference
Добавляет разрыв страницы при печати документа после заданного элемента.
Краткая информация
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Нет |
| Применяется | К блочным элементам |
| Анимируется | Нет |
Синтаксис ?
page-break-after: always | auto | avoid | left | rightОбозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- always
- Всегда добавляет разрыв страницы после элемента.
- auto
- Вставляет разрыв страницы при необходимости.
- avoid
- Запрещает разрыв страницы после элемента.
- left
- Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была чётной.
- right
- Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была нечётной.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page-break-after</title>
<style>
@media print {
.more {
page-break-after: always;
}
}
</style>
</head>
<body>
<h3>Мусорные пакеты</h3>
<p>История о том, как однажды мусорных пакетов оказалось несколько больше,
чем хотелось, как и для чего их можно использовать, и что из этого получилось.</p>
<p>Читать дальше</p>
</body>
</html>Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры ?
| auto, always | 4 | 12 | 1 | 7 | 1.2 | 1 |
| avoid, left, right | 4 | 12 | 1 | 7 | 1.2 |
| auto, always | 1 | 1 | 7 | 1.3 |
| avoid, left, right | 1 | 7 | 1.3 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.08.2017
Редакторы: Влад Мержевич
Разрыв страницы для печати с использованием CSS3
Возможность приведения содержимого в вид, подходящий для печати, существовала давно. Мы можем сделать это, используя правило @media в таблице стилей, следующим образом:
@media print {
/* Правила стиля */
}Есть несколько свойств, позволяющих оформить содержимое веб-страницы для приведения в вид, подходящий для печати, и мы расскажем об одном из них: разрыве страницы.
Что оно делает?
Если вы работали с текстовыми редакторами, такими как Microsoft Word и Pages, вам должно быть знакомо меню разрыва страницы, которое позволяет перенести текст на следующую страницу.
Этот модуль делает то же самое, позволяя управлять тем, как будет переносится содержимое веб-страницы, страница за страницей.
Использование разрыва страницы
Для примера мы создали демонстрационную страницу, которую собираемся распечатать. Мы нашли на ней неудачный перенос, как вы можете видеть ниже.
Будет лучше выглядеть, если заголовок и нижняя висячая строка начнутся на следующей странице.
Чтобы это сделать, мы используем свойство page-break-after и зададим ему значение always , чтобы заставить следующий элемент перейти на следующую страницу.
.page-break {
page-break-after: always;
}Затем вы можете создать между элементов новый элемент с классом, или назначить класс предыдущему элементу таким образом.
<p>With the <strong>Eraser</strong> feature, you can take composites of a photo, then put all of that together, to get the background without the extras you don’t. </p> <h4>The phone to travel With</h4> <p><strong>S Translator </strong>is going to be a great tool for your travels as ... </p>
Теперь заголовок и нижняя висячая строка начнутся на следующей странице.
Верхние и нижние висячие строки
Вышеописанный метод может быть утомительным, если у вас много текста. Так что вместо того, чтобы заставлять содержимое переходить на следующую страницу, будет лучше задать минимальный порог для верхней и нижней висячих строк.
В типографской практике верхними и нижними висячими строками называют оставшиеся слова и короткие строки, которые выглядят оторванными от остального абзаца на другой странице.
Используя свойства orphans (нижняя висячая строка) и widows (верхняя висячая строка) мы можем задать минимальный порог. В приведенном ниже примере мы задаем, чтобы как минимум три строки остались внизу или в начале абзаца, где происходит разрыв страницы.
p {
orphans: 3;
widows: 3;
} Дополнительные источники
Мы рассмотрели основы использования разрыва страницы на печати для текстов на сайте, и мы надеемся, что это вдохновит вас обдумать стили для печати вашего сайта, чтобы содержимое хорошо выглядело как на экране, так и на бумаге.
Автор урока Thoriq Firdaus
Перевод — Дежурка
Смотрите также:
Разрыв страницы перед строкой таблицы
I have a table where I want to force page breaks before certain TR’s when printing, so I searched around and found Applying «page-break-before» to a table row (tr), seemed simple enough: set display to block and use page-break-before as usual. However, it doesn’t seem to be working (at least not in Chrome 59, Windows). For example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
tr.break-here {
display: block;
page-break-before: always;
}
</style>
</head>
<body>
<table>
<tr><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
</table>
</body>
</html>
When printed, all three of those sections are on the same page, but it should be three separate pages.
There was a suggestion there to use a pseudo-element, which I tried to no avail. There was also a suggestion to ensure the TR’s TD contained a block-level element, so I tried putting empty div’s in the relevant cells in that example, also with no change.
There is also How to apply CSS page-break to print a table with lots of rows?, where I’ve tried:
- This answer: No effect:
tr.break-here { display:block; page-break-after:always; }tr.break-here { page-break-after:always; }
What am I doing wrong here? How do I do this? I’m also a little confused because the answer on the linked question seems well received with no issues noted in comments. Splitting the table into three tables is not an option, as I need column widths (which are auto-fit to complex content) to be identical on all pages.
html css printing css-tables586
Печатаем web-документ правильно с помощью CSS — Aimweb.name
Кого-то это может удивить, но распечатывают web-страницы довольно часто.
В данной заметке показаны полезные приемы на CSS для подготовки страницы к печати.
Предварительные изменения в стилях
Желательно разбивать CSS-стили на отдельные файлы в зависимости от микроформатов:
<link rel=»stylesheet» href=»css/style.css» type=»text/css» media=»screen,projection»> <!— основной файл —>
<link rel=»stylesheet» href=»css/print.css» type=»text/css» media=»print»> <!— для печати —>
<link rel=»stylesheet» href=»css/handheld.css» type=»text/css» media=»handheld»> <!— мобильные устройства —>
Это поможет избежать путаницы в дальнейшем и сэкономит ваше время. Стоит учесть, что шрифты на печати следует задавать в пунктах (pt), дюймах (in), пиках (pc) или сантиметрах/миллиметрах(cm/mm).
Задаем цвет фона, выставляем отсупы
Убираем отступы, задаем для страницы белый цвет фона и черный шрифт (для контрастности), выставляем поля в 0,5дюйма. Также убираем свойство float у плавающих элементов, чтобы при печати веб-страницы блоки не съезжали.
body{margin:0.5in;font-family:times}
*{background:#fff !important;color:#000 !important;float:none !important;width:auto !important;height:auto !important;}
Убираем лишние стили
При печати многие элементы сайта являются лишними: навигация, реклама, баннеры. Убираем их при помощи display:none.
У меня получилось нечто подобное:
#menu, #topmenu, #thedrot, .meta, #comments, #commentform, #postcomment, #resplink, #footer{display:none}
Работа с гиперссылками
Убираем подчеркивание у ссылок, на печати они нам не понадобятся. Также выводим URL (в скобках рядом с текстом ссылки).
a{border:0;text-decoration:none;}
a img{border:0}
a:after{content:» (» attr(href) «) «;font-size: 90%;}
a[href^=»/»]:after {content: » (http://www.aimweb.name» attr(href) «) «;}
Постраничная разбивка на CSS
Свойство page-break-before позволяет устанавливать место разрыва страницы при печати.
Если мы поленились, и все стили находятся в одном css-файле, то код будет выглядеть следующим образом:
{
.nextpage { display:none; }
}
@media print
{
.nextpage { display:block; page-break-before:always; }
}
Получаем класс, который будет не виден на странице, но будет выполнять свое предназначение при печати.
Пример использования:
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Пример page-break-before</title>
<style type=»text/css»>
@media print{
.newpage{page-break-before: always;}
}
</style>
</head>
<body>
<h2>Разрывы страниц на CSS</h2>
<p>Попробуйте распечатать эту страницу (да съесть еще этих мягких французских булок, да выпить чаю).</p>
<p>Это 1-ый параграф, он будет расположен на первой странице при печати.</p>
<div></div>
<p>Это 2-ой параграф, он будет расположен на второй странице при печати.</p>
<div></div>
<p>Это 3-ий параграф, он будет расположен на третьей странице при печати. Все так просто.</p>
</body>
</html>
CSS-свойства: widows, orphans
Свойство widows задает минимальное число строк текста, которое располагается на следующей странице при печати документа.
Пример:
Другое css-cвойство — orphans — задаёт минимальное количество строк, которые могут оставаться в нижней части страницы без разрыва страницы.
Если значение widows конфликтует со значением orphans, тогда widows будет иметь приоритет.
Пример использования:
@media print {
p {widows: 3;orphans: 3;}
}
Подводим итоги:
В результате у меня получилось что-то подобное:
body{margin:0.5in;font-family:times}
*{background:#fff !important;color:#000 !important;float:none !important;width:auto !important;height:auto !important;}
#context{margin:0 !important;padding:0}
#menu, #topmenu, #thedrot, .meta, #comments, #commentform, #postcomment, #resplink, #footer{display:none}
#zag h2 span{font-size:small;display:block}
a{border:0;text-decoration:none;}
a img{border:0}
a:after{content:» (» attr(href) «) «;font-size: 90%;}
a[href^=»/»]:after {content: » (http://www.aimweb.name» attr(href) «) «;}
Данная таблица стилей достаточна проста и, на мой взгляд, требует более детальной проработки отдельных элементов, но результат на печати весьма ощутим по сравнению с обычной таблицей стилей. Разумеется, CSS-файл будет довольно сильно отличаться в зависимости от дизайна, но общие принципы, указанные в статье, применимы к практически любому проекту.