Drukowanie

W tym rozdziale dowiesz się...

• Jak rozpocząć nową stronę papieru w określonym miejscu na wydruku?
• Jak nie dopuścić, aby na wydruku pierwsza część elementu znalazła się na jednej stronie papieru, a dalsza na drugiej?
• W jaki sposób poprawić estetykę wydruku, kontrolując liczbę linijek wdowich (na górze) i sierocych (na dole)?
• Jak ustawić marginesy strony WWW na wydruku?
• W jaki sposób dostosować stronę WWW do wydruku bez potrzeby tworzenia nowej wersji? W jaki sposób ukryć na wydruku niektóre elementy strony?

Przełamanie strony

(interpretuje: Internet Explorer, Firefox, Opera, Chrome)

1. Przed elementem:

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

2. Po elemencie:

   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 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 }

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).

Blokada przełamania strony

(interpretuje: Internet Explorer, Firefox, Opera, Chrome)

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ę.

Polecenie nie interpretuje MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Linijki

(interpretuje: Internet Explorer 8.0, Opera, Chrome)

1. Na górze strony:

   selektor { widows: liczba }

2. Na dole strony:

   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.

Polecenie nie interpretuje MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Kontekst strony

(interpretuje: Internet Explorer 8.0, Opera, Chrome i częściowo Firefox)

1. Wszystkie strony:

   @page { marginesy }

2. Pierwsza strona (nie obsługuje Firefox!):

   @page :first { marginesy }

3. Prawe strony (nie obsługuje Firefox!):

   @page :right { marginesy }

4. Lewe strony (nie obsługuje Firefox!):

   @page :left { marginesy }

W deklaracjach kontekstu strony nie wolno używać jednostek "em" (wysokość czcionki) ani "ex" (wysokość małej litery), ponieważ nie istnieje w nim pojęcie czcionki.

Kontekst strony definiuje wygląd samej strony - np. arkusza papieru na wydruku - a nie jej zawartości. CSS 2 pozwala ustalić w ten sposób jedynie marginesy. Różnica pomiędzy marginesami w kontekście strony, a tradycyjnymi marginesami jest taka, że nawet jeśli standardowe marginesy zostaną wyzerowane, wydruk nadal może je posiadać. Normalnie aby zmienić rozmiar marginesów na wydruku, użytkownik musi przestawić je ręcznie w swojej przeglądarce - najczęściej w menu: Drukuj / Ustawienia strony. Możemy jednak już w CSS wskazać, aby również na wydruku marginesy wynosiły zero. Trzeba jednak zdawać sobie sprawę, że większość typowych drukarek nie pozwala zadrukować całej powierzchni papieru, więc jakieś minimalne marginesy zawsze pozostaną - jak duże zależy od konkretnego modelu drukarki.

Definiując marginesy w kontekście strony koniecznie trzeba pamiętać, że widoczny obszar pierwszej strony ustala początkowy blok obejmujący dokumentu. W praktyce oznacza to, że kolejne strony nie powinny mieć większego marginesu niż pierwsza, ponieważ wtedy ich zawartość może zostać przycięta!

Media

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:

1. Wydzielenie dla wydruku części istniejącego arkusza:

   /* Domyślny arkusz dla wszystkich mediów */
   /* (tu znajdują się ogólne deklaracje) */
   /* (...) */
   
   @media print {
   	/* Arkusz dla wydruku */
   }

2. Dołączenie specjalnie dla wydruku zewnętrznego arkusza:

   <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).

• Kursory
• Suwaki

• Do góry
• Strona główna