page-break-after

page-break-after

Warning: This property has been replaced by the break-after property.

The page-break-after CSS property adjusts page breaks after the current element.

Try it

Syntax

/* Keyword values */ page-break-after: auto; page-break-after: always; page-break-after: avoid; page-break-after: left; page-break-after: right; page-break-after: recto; page-break-after: verso; /* Global values */ page-break-after: inherit; page-break-after: initial; page-break-after: revert; page-break-after: revert-layer; page-break-after: unset; 

This property applies to block elements that generate a box. It won’t apply on an empty that won’t generate a box.

Values

Initial value. Automatic page breaks (neither forced nor forbidden).

Always force page breaks after the element.

Avoid page breaks after the element.

Force page breaks after the element so that the next page is formatted as a left page. It’s the page placed on the left side of the spine of the book or the back side of the page in duplex printing.

Force page breaks after the element so that the next page is formatted as a right page. It’s the page placed on the right side of the spine of the book or the front side of the page in duplex printing.

If pages progress left-to-right, then this acts like right . If pages progress right-to-left, then this acts like left .

If pages progress left-to-right, then this acts like left . If pages progress right-to-left, then this acts like right .

Page break aliases

The page-break-after property is now a legacy property, replaced by break-after .

For compatibility reasons, page-break-after should be treated by browsers as an alias of break-after . This ensures that sites using page-break-after continue to work as designed. A subset of values should be aliased as follows:

page-break-after	break-after
auto	auto
left	left
right	right
avoid	avoid
always	page

Formal definition

Initial value	auto
Applies to	block-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements.
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

page-break-after =
auto |
always |
avoid |
left |
right |
inherit

Examples

Setting a page break after footnotes

/* move to a new page after footnotes */ div.footnotes  page-break-after: always; > 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

How to add page breaks to html

We often get the question about creating HTML that sends proper page breaks to the printer.

This article has been updated in July 2017

This method works in Chrome, Firefox and IE and has been tested in July 2017 — try printing this page

. content in page 1 . 
 
 
 
 . content in page 2 .

For example, if you try printing this page (try Chrome print preview) the second and third lines below should be on a separate pages. Inspect these elements, the css is inline:

Next. there are few very important considerations:

1. It’s done via CSS (inline or in a stylesheet) by adding ‘page-break-after: always’ to a paragraph at the bottom of your page (above where you intend to break). Optionally, you may need to also add ‘page-break-before:always’ to the paragraph or heading (or other block level element) at the top of the next page.
2. If you use a stylesheet, use print media query to wrap the CSS for printers. For example, in your CSS, add a section like this: @media print < /* styles for printers */>
3. If you use a stylesheet, make sure it is included without a default media attribute. Lots of older sites would add media=»screen» to stylesheet inclusions, rendering any CSS media query in those stylesheets useless.
4. Kills the floats! If any parent container is floated, page breaks won’t work. In your CSS for printers, disable all the floats of parent containers by setting ‘float: none !important;’ on the parent containers of the content you wish to print with page breaks (important — we do it on this site). Woah, that was wordy .. it could have used a break!
5. Use on block elements: make sure the elements containing the ‘page-break-*’ rules are blocks, not inlines (ex: DIV, P, OL, etc. but not SPAN or A)
6. You may need to use both ‘page-break-after: always’ and ‘page-break-before:always’ (buggy Chrome. ). In the example above, we show cased multiple options which work.
7. And finally, chrome print is finicky

That’s it. If this does not work for you, drop us a note

Let’s talk.

Phone

Tel: (503) 468-4890
Fax: (503) 437-9063

Email

For general inquiries:
info@buildableworks.com
For support related matters:
help@buildableworks.com
For sales & changes to your account:
sales@buildableworks.com
For career opportunities:
jobs@buildableworks.com

Address

620 NE 3rd Street, Suite A
McMinnville, OR 97128
Google Map

Hours

Monday — Friday, 9am — 5pm PST

Источник

page-break-after¶

Это свойство было заменено свойством break-after .

Свойство page-break-after добавляет разрыв страницы при печати документа после заданного элемента.

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13

/* Keyword values */ page-break-after: auto; page-break-after: always; page-break-after: avoid; page-break-after: left; page-break-after: right; page-break-after: recto; page-break-after: verso; /* Global values */ page-break-after: inherit; page-break-after: initial; page-break-after: unset; 

Значения¶

always Всегда добавляет разрыв страницы после элемента. auto Вставляет разрыв страницы при необходимости. avoid Запрещает разрыв страницы после элемента. left Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была четной. right Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была нечетной.

Значение по-умолчанию: auto

Применяется к блочным элементам

Спецификации¶

Поддержка браузерами¶

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

 html> head> meta charset="utf-8" /> title>page-break-aftertitle> style> @media print  .more  page-break-after: always; > > style> head> body> h2>Мусорные пакетыh2> p> История о том, как однажды мусорных пакетов оказалось несколько больше, чем хотелось, как и для чего их можно использовать, и что из этого получилось. p> p class="more">Читать дальшеp> body> html> 

Источник

Печать HTML страниц

Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге:

Подключение CSS

Специальный CSS-файл:

Правило @media print:

Третий метод – отдельная страница или шаблон, свёрстанные чисто под печать (без @media print ), например так сделана печать писем в Яндекс.Почте. Такой метод существенно облегчает отладку.

Размер страницы

• при dpi=75, А4 имеет 877×620 px
• при dpi=150, А4 имеет 1754×1240 px
• при dpi=300, А4 имеет 3508×2480 px

Поля

В целях экономии бумаги лучше использовать минимальные поля – 10 мм по краям и 20 мм слева для возможности брушеровки.

Поля по ГОСТ Р 6.30-2003 (оформление документов):

По ГОСТ 7.32-2017 (научные работы, рефераты):

Удаление лишних стилей

Тени и другие эффекты дизайна лучше убрать, также следует установить черный цвет шрифта.

Размер шрифта

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

Скрытие лишних элементов

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

Другой вариант скрытия не нужного контента – в HTML-коде, добавить к скрываемым элементам класс noprint .

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

Показ элемента только при печати

@media screen < .element < display: none; >> @media print < .element < display: block; >>

Печать фона background

По умолчанию браузеры не печатают background у элементов, но его можно пустить на печать принудительно c помощью свойства -webkit-print-color-adjust: exact; и нового color-adjust: exact; .

Уточнение: свойство не будет работать если цвет фона и шрифта слабоконтрастные.

Разрывы страниц

В CSS доступно управление переносами, соответственно для списков и таблиц нужно запретить переносы:

Если требуется принудительно сделать перенос после элемента:

Отображение URL в ссылках

Печать ссылок бесполезна т.к. будет не известно, куда они ведут. Можно добавить приписку URL рядом с анкором (исключая якорные ссылки).

Пример вставки URL:

Вывод QR-кода при печати

Будет очень удобно если на печатаной странице будет QR-код с ссылкой на сайт. Сгенерировать код можно с помощью сервиса «Google QR Codes» и вставить его с помощью JQuery.

Запуск печати

В JS, печать запускается методом window.print() . Возможны следующие варианты: Запуск печати по клику на ссылку:

Следующий вариант – пользователь переходит на следующую страницу, где сразу начинается печать, после пользователь возвращается на исходную.

И последний вариант – печать происходит в отдельной вкладке браузера, после печати она автоматически закрывается.

Источник

page-break-after

Добавляет разрыв страницы при печати документа после заданного элемента.

Краткая информация

Синтаксис

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 раз.
#	Повторять один или больше раз через запятую.	#

Значения

always Всегда добавляет разрыв страницы после элемента. auto Вставляет разрыв страницы при необходимости. avoid Запрещает разрыв страницы после элемента. left Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была чётной. right Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была нечётной.

Пример

Мусорные пакеты

История о том, как однажды мусорных пакетов оказалось несколько больше, чем хотелось, как и для чего их можно использовать, и что из этого получилось.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• 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

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

Источник