Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Własności drukowania

Łamanie strony w druku

Email Drukuj PDF

Tematy: łamanie strony w druku | wdowy i sieroty

Dane w pigułce
Zastosowanie przełamywanie strony przed, po lub w środku elementu
Dziedziczenie nie
Wartości auto, avoid, left, right, always
Wartość domyślna auto
Przykład page-break-after: always
Uwagi
Odpowiednik w HTML brak

Aby zdefiniować łamanie strony, należy wpisać w definicji stylu page-break-after: wartość (lub page-break-before, page-break-inside).

Wbrew przewidywaniom, że biuro bez papieru zawładnie bez reszty naszą codziennością, papier i drukarki mają się całkiem dobrze. Choć Internet jest medium w pełni elektronicznym, często się zdarza, że pobrane informacje chcemy przelać na papier, który możemy łatwo przenosić, choćby do łóżka czy wanny :-)

Nic więc dziwnego, że WWW Consortium przykłada do problemu drukowania należną wagę i rozwija poświęcone mu fragmenty specyfikacji nowej wersji języka HTML. Fragmenty tej specyfikacji obsługują częściowo Internet Explorer od wersji 4, Firefox oraz Opera od wersji 3.5.

Nowe własności pozwalają autorowi strony określić, jak ma być drukowany dokument HTML. Wyobraźmy sobie, że tworzymy duży, jednostronicowy dokument, który dzielimy na logiczne bloki, np. rozdziały. Gdyby czytelnik takiego dokumentu zechciał go wydrukować, przeglądarka wydrukuje go "jak leci", strona po stronie, bez zważania na te logiczne fragmenty. Nowa wersja języka HTML pozwala jednak wstawić odpowiednie otagowanie, które nakaże drukarce "przełamywać" strony. Odpowiada to znanej z bardziej zaawansowanych edytorów tekstów funkcji twardego przełamania strony (zazwyczaj kombinacją Ctrl-Enter), czyli wymuszenia nowej strony. Do drukarki zostanie po prostu wysłany sygnał, że w tym miejscu należy przestać drukować stronę, choćby pozostało jeszcze na niej wolne miejsce. Drukowanie zostanie podjęte dopiero na następnej stronie. Jest to wygodne rozwiązanie, gdyz w ten sposób wydruk będzie bardziej przejrzysty - lepiej jest przecież czytać początek rozdziału od nowej strony.

Strony możemy przełamywać za pomocą dwojakiego rodzaju poleceń:

page-break-before: wartość spowoduje przełamanie strony PRZED otagowanym elementem.

page-break-after: wartość spowoduje przełamanie strony PO otagowanym elemencie.

Polecenia przyjmują cztery wartości: auto, always, left, right. Zachowanie Internet Explorera nie jest jednoznaczne w przypadku auto, left i right (specyfikacja jest ciągle w fazie opracowania). Funkcjonuje jednak bez kłopotu najważniejsza wartość - always.

Załóżmy, że tytuły rozdziałów w naszym dokumencie są oznaczone tagiem tytułu pierwszego stopnia, czyli H1. Życzymy sobie, aby drukarka przerywała drukowanie strony tuż przed tytułem pierwszego stopnia i przenosiła drukowanie na następną stronę. Wystarczy w takim razie opatrzyć każdy tytuł odpowiedniem otagowaniem (styl lokalny):

<h1 style="page-break-before: always">Rozdział 4</h1>

Możemy skorzystać także ze stylu zagnieżdżonego i umieścić odpowiednią deklarację jeszcze w ramach nagłówka HEAD.

Można jednak postąpić inaczej. Każdy z rozdziałów możemy zakończyć np. poleceniem:

<p style="page-break-after: always">treść ostatniego akaptu w rozdziale</p>

Teoretycznie polecenia powinny działać w stosunku do elementów blokowych poza tabelami. Obecnie nie funkcjonuje ono jednak np. w odniesieniu do <br>, czyli przełamania wiersza.

Definując przełamania możemy się także posłużyć klasami. W definicji stylu zagnieżdżonego (w ramach HEAD) możemy na przykład zdefiniować klasę:

.nowastrona {page-break-after: always}

a następnie przywołać tę klasę w ostatnim akapicie rozdziału:

<p class="nowastrona">treść ostatniego akapitu w rozdziale</p>

Drukarka zakończy druk strony po tak zdefiniowanym akapicie i rozpocznie drukowanie dalszego ciągu dokumentu już na następnej stronie.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V