Przełamanie strony {page-break-before, page-break-after}

Jak rozpocząć nową stronę papieru w określonym miejscu na wydruku?

Przed elementem:

selektor { page-break-before: wartość }

Po elemencie:

selektor { page-break-after: wartość }

Selektorem może być znacznik wyświetlany w bloku [zobacz: Wstawianie stylów].

Natomiast jako "wartość" należy podać:

always - przełamanie zawsze
auto - brak ograniczeń
left - następna strona formatowana jako lewa
right - następna strona formatowana jako prawa
avoid - unikanie przełamania

Polecenie to wymusza na drukarce natychmiastowe przełamanie strony, czyli zakończenie drukowania na danym arkuszu papieru i przejście do następnego. Pierwsze z nich czyni to przed wybranym elementem (wybranym przez SELEKTOR), a sam element znajdzie się już na nowej kartce. Natomiast drugie polecenie przełamuje stronę po elemencie, a sam element zostaje na poprzedniej kartce.

Polecenie takie jest przydatne, jeśli strona składa się z rozdziałów, których tytuły są wpisane np. w znacznikach <h1>...</h1>. Możemy wtedy np. w zewnętrznym arkuszu stylów umieścić deklarację:

h1 { page-break-before: always }

lub z podaniem klasy:

h1.tytul { page-break-before: always }

Dzięki temu każdy rozdział rozpocznie się na nowej stronie, co sprawi, że treść będzie wyglądała bardziej estetycznie. Takie rozwiązanie nie jest jednak zbyt odpowiednie, jeśli strona zawiera bardzo krótkie rozdziały, ponieważ wtedy wydruk będzie składał się większej ilości stron, które nie będą całkowicie zapełnione (właściciel drukarki może nie być tym zachwycony 🙂).

Innym przydatnym zastosowaniem page-break-after: avoid może być zablokowanie przełamania strony po tytułach rozdziałów. Kto to widział, żeby tytuł znajdował się na końcu poprzedniej strony, a sama treść rozdziału na początku następnej?

Aby zobaczyć efekt, nie musisz za każdym razem drukować całej strony. Wystarczy włączyć w przeglądarce internetowej podgląd wydruku. Zwykle znajduje się on w menu Drukuj. Powinien być również dostępny przy pomocy skrótu klawiaturowego Ctrl+P.

Przeglądarki

❌ Nie działa
	Chrome	Firefox	Edge	Opera	Safari
`page-break-after: wartość`	1 2008-12-11	1 2004-11-09	12 2015-07-29	7 2003-01-28	1.2 2004-02-02
`page-break-after: always`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1.2 2004-02-02
`page-break-after: auto`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1.2 2004-02-02
`page-break-after: avoid`	1 2008-12-11	❌	12 2015-07-29	15 2013-07-02	❌
`page-break-after: left`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1.2 2004-02-02
`page-break-after: right`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1.2 2004-02-02
`page-break-before: wartość`	1 2008-12-11	1 2004-11-09	12 2015-07-29	7 2003-01-28	1.2 2004-02-02
`page-break-before: always`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1.2 2004-02-02
`page-break-before: auto`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1.2 2004-02-02
`page-break-before: avoid`	1 2008-12-11	❌	12 2015-07-29	15 2013-07-02	❌
`page-break-before: left`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1.2 2004-02-02
`page-break-before: right`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1.2 2004-02-02

Komentarze

Zobacz więcej komentarzy