Jak ładnie drukować strony za pomocą CSS – definiowanie wydruku w CSS

Dzięki przygotowaniu odrębnego arkusza stylów CSS na potrzeby wydruku naszej strony można, z minimalną ingerencją w treść oryginalnego dokumentu, określić wygląd strony na wydruku, gdy czytelnik kliknie przycisk Drukuj.

Powiadomienie przeglądarki o innych stylach do druku

Już od CSS w wersji 2 można definiować układ strony na wydruku korzystając z parametru media. Parametr ten dostępny jest również w HTML dla znacznika link, za pomocą którego dołącza się arkusz CSS do strony. Jedną z wartości atrybutu media jest print, który należy określić, jeśli definiujemy arkusz dołączany, który ma być użyty przy drukowaniu strony. Zatem obok podstawowego arkusza CSS dla strony, dopisujemy w kodzie dokumentu, np. w Pajączku 5 NxG:

<link rel="Stylesheet" media="print" type="text/css" href="dodruku.css" />

Dla stylów definiowanych bezpośrednio na stronie w sekcji HEAD dokumentu stosuje się specjalną notację, która instruuje przeglądarkę, że znajdujące się w tej grupie definicje stylów mają zastosowanie dla drukowania dokumentu. Oto przykład rozszerzenia standardowego arkusza o elementy określające wydruk:

<style type="text/css">
	@media print {
		body { background: #ffffff; color: #000; }
	}
</style>

Ostatnim ze sposobów dołączania arkusza CSS jest importowanie. Także i w tym wypadku możliwe jest importowanie pliku CSS do celów drukowania:

<style type="text/css">
@import url("dodruku.css") print;
</style>

Dobre rady dotyczące przygotowania stylów do druku

1. Kolorystyka: najlepiej ustawić białe tło i czarną czcionkę. W drukowaniu strony najczęściej chodzi właśnie o tekst, a nie każdy dysponuje lub chce zuzywać kolorowy tusz lub toner na drukowanie tekstów.

body { background: #ffffff; color: #000; }

2. Odsyłacze: na papierze nie można klikać, więc dobrze jest w tekście drukowanym zaznaczyć odsyłacze. Może to być inny kolor czcionki, lecz samo podkreślenie powinno w zupełności wystarczyć.

a { text-decoration: underline; }

3. Czcionka w tekście: przede wszystkim należy stosować większą czcionkę niż na stronie, aby do przeczytania wydruku nie trzeba było stosować okularów. Rozmiar 13 punktów (pt) powinien być w sam raz. Nalezy również rozważyć zmianę czcionki na czcionkę szeryfową, gdyż lepiej się ją czyta na wydruku.

h1, p { font-family: "Times New Roman", "Times", "serif"; }

4. Obrazki: większość obrazków na wydruku jest zbędna, więc można je wszystkie usunąć, pozostawiając ewentualnie te najważniejsze.

img{ display: none; }

5. Menu strony, animacje, itp: są to elementy niepotrzebne na wydruku i mogą tylko niepotrzebnie zużywać tusz w drukarce osoby, która zdecydowała się na wydruk.

#navimenu { display: none; }
#flashobj { display: none; }

Podział tekstu na strony

Istnieje możliwość, aby wskazać przeglądarce, gdzie na wydruku powinny być stosowane nowe strony, zamiast druku kontynuacyjnego. Do tego celu służą trzy własności dostępne w CSS: page-break-before, page-break-after, page-break-inside

page-break-before oraz page-break-after mogą przyjmować następujące wartości:

auto wstawia łamanie strony gdy jest potrzebne, automatycznie

always zawsze wymusza łamanie strony po (after) lub przed (before) bieżącym elementem

avoid unikanie wstawiania łamania strony

left wymusza jeden lub dwa łamania stron tak, aby strona była wyświetlana jako lewa

right wymusza jeden lub dwa łamania stron tak, aby strona była wyświetlana jako prawa

inherit ustawia wartość na taką samą jaką posiada element nadrzędny

page-break-inside posiada tylko własności avoid, auto i inherit, które zostały opisane powyżej.

Źródła: W3C Cascading Style Sheets Projektowanie dla różnych urządzeń Strona przyjazna dla drukarki