(obsługuje Internet Explorer 4, Netscape/Mozilla/Firefox oraz Opera 3.5 lub nowsze)
selektor { page-break-before: wartość }
selektor { page-break-after: wartość }
Wartości left, right, avoid nie są interpretowane jednoznacznie przez Internet Explorer. Natomiast działa poprawnie polecenie always.
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 elemncie, 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? Niestety jeśli wydrukujesz ten kurs, najprawdopodobniej tak właśnie może się zdarzyć, ponieważ np. Internet Explorer nie interpretuje wartości "avoid" :-(
Aby zobaczyć efekt, nie musisz za każdym razem drukować całej strony. Wystarczy włączyć w przeglądarce internetowej podgląd wydruku (menu Plik).
(nie obsługuje Internet Explorer 4)
selektor { page-break-inside: wartość }
Polecenie page-break-inside: avoid powoduje, że strona nie zostanie przełamana wewnątrz wskazanego elementu, tzn. pozostanie on w całości na jednej stronie (chyba że będzie zbyt duży, aby się na niej zmieścić). Jest to przydatne, jeśli nie chcemy, aby np. wykaz został przedzielony pomiędzy dwie strony. W takim przypadku lepiej żeby drukarka przełamała stronę trochę wcześniej, a element zostanie przeniesiony na następną kartkę.
(obsługuje Opera, ale nie MSIE 4)
selektor { widows: liczba }
selektor { orphans: liczba }
Powyższe polecenia nie blokują przełamania strony ani go nie wywołują. Mogą być jednak przydatne ze względów estetycznych. Na przykład przeniesienie ostatniej linijki długiego akapitu na następną stronę, może nie wyglądać zbyt dobrze. Jeśli już przełamanie musi nastąpić wewnątrz bloku, znacznie lepiej byłoby przenieść na następną stronę więcej niż jedną linijkę. Za pomocą widows: liczba możemy określić, że na początku strony powinny wystąpić przynajmniej np. 4 linijki. Wtedy co najmniej cztery ostatnie wiersze zostaną przeniesione na następną stronę (a nie jeden, dwa lub trzy). Podobnie orphans: 4 wymusi w takim przypadku, pozostawienie przynajmniej czterech pierwszych linijek akapitu na poprzedniej stronie.
Działanie to może wydawać się podobne do przełamania strony, jednak podstawowa różnica polega na tym, że powyższe polecenia nie wymuszają przełamania strony, a jedynie określają co zrobić w przypadku, gdy taka konieczność już wystąpi wewnątrz akapitu. Jeżeli cały tekst zmieści się na jednej stronie, nie zobaczymy żadnego ich działania.
Jest oczywiste, że dokument wydrukowany na drukarce, wygląda inaczej niż na ekranie monitora (w przeglądarce internetowej). Podczas drukowania zwykle pomijane są wszystkie parametry, które dotyczą tła (trudno sobie wyobrazić wydrukowanie strony z czarnym tłem :-). Z uwagi na odrębność różnych mediów, wprowadzono możliwość definiowania oddzielnych własności dla różnych form prezentacji dokumentu.
Na przykład rozmiar czcionki można ustalić zarówno dla ekranu, jak i dla drukarki, lecz dokumenty na komputerze potrzebują zwykle większej czcionki niż na papierze. Podobnie doświadczenie wskazuje, że czcionki z rodziny sans-serif są czytelniejsze na ekranie, podczas gdy serif - na papierze. Z tych powodów konieczne jest określenie, że dany arkusz stylów lub jego część jest przyporządkowana do pewnego z mediów. Oznacza to, że można sprawić, aby ta sama strona, po wydrukowaniu, wyglądała zupełnie inaczej niż na ekranie monitora. Możemy np. chcieć, aby cały tekst został napisany kolorem czarnym, zmniejszyć jego wielkość, a nawet usunąć wyświetlanie obrazków czy menu nawigacyjnego (po co komu menu na papierze?) itd.
Istnieją dwie drogi do określenia niezależności arkuszy stylów, a przez to przypisania różnym mediom odmiennych cech:
/* Domyślny arkusz dla wszystkich mediów */
/* (tu znajdują się ogólne deklaracje) */
/* (...) */
@media print {
/* Arkusz dla wydruku */
}
<head> <link rel="Stylesheet" href="domyslny.css" type="text/css" /> <link rel="stylesheet" href="wydruk.css" type="text/css" media="print" /> </head>
[zobacz także rozdział pt.: Media].
UWAGA! Kolejność wpisywania poleceń ma znaczenie, tzn. najpierw należy określić arkusz domyślny (deklaracje w istniejącym arkuszu lub dołączenie zewnętrznego), a dopiero na końcu ustalamy własności dla wydruku.
Aby zobaczyć efekt, nie musisz za każdym razem drukować całej strony. Wystarczy włączyć podgląd wydruku (menu Plik).
Przykład:
Ta strona powinna wyglądać inaczej na wydruku. Aby to sprawdzić włącz podgląd wydruku (menu Plik).