• 
  Po co drukować strony internetowe?

  Dlaczego warto korzystać z CSS do stylowania wydruku? Jakie możliwości daje CSS w kontekście wydruku?

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

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

• 
  Blokada przełamania strony {page-break-inside}

  Jak nie dopuścić, aby na wydruku pierwsza część elementu znalazła się na jednej stronie papieru, a dalsza na drugiej?

• 
  Linijki na stronie {widows, orphans}

  W jaki sposób poprawić estetykę wydruku, kontrolując liczbę linijek wdowich (na górze) i sierocych (na dole)?

• 
  Kontekst strony @page

  Jak ustawić marginesy strony na wydruku?

• 
  Okładka wydruku @page :first

  Jak wyzerować marginesy na okładce wydruku?

• 
  Druk dwustronny @page :left :right

  W jaki sposób przygotować druk dwustronny, tak aby potem wszystkie kartki można było wygodnie spiąć jak książkę?

• 
  Rozmiar papieru @page {size}

  Co zrobić, żeby strona WWW była drukowana na kartce w orientacji poziomej? Jak obrócić drukowane zdjęcie? W jaki sposób wydrukować stronę na kartce w formacie A5, A3, B5 lub B4?

• 
  Typ strony wydruku {page}

  W jaki sposób wydrukować część stron poziomo, a pozostałe pionowo?

• 
  Wydruk @media print

  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?

• 
  Powtórka

  CSS

Drukowanie stron internetowych

Język CSS jest przede wszystkim narzędziem do projektowania wizualnego stron internetowych na ekranach komputerów, tabletów i smartfonów. Jednakże jego możliwości wykraczają poza ten obszar. CSS pozwala również na precyzyjne kontrolowanie wyglądu stron podczas wydruku. Choć mogłoby się wydawać, że w erze cyfryzacji druk jest coraz mniej ważny, w praktyce nadal istnieje wiele sytuacji, w których przygotowanie materiałów do druku pozostaje kluczowe.

Dlaczego warto korzystać z CSS do stylowania wydruku?

• Profesjonalny wygląd dokumentów - strony internetowe projektowane z myślą o ekranach często nie wyglądają dobrze po wydrukowaniu. CSS umożliwia dostosowanie treści do papieru - np. ukrycie niepotrzebnych elementów, takich jak nawigacja czy reklamy, oraz optymalizację układu pod kątem czytelności.
• Uniwersalność - stylowanie wydruku z wykorzystaniem CSS pozwala stworzyć jedną stronę internetową, która działa świetnie zarówno online, jak i w formie drukowanej, bez potrzeby projektowania oddzielnych wersji.
• Druk w formie cyfrowej - stylowanie CSS dla wydruku może być wykorzystane do generowania plików PDF - formatów popularnych w e-bookach, raportach czy dokumentacji technicznej.

Wydruk w erze cyfrowej

Pomimo gwałtownego rozwoju technologii cyfrowych i rosnącej popularności treści online, druk wciąż odgrywa istotną rolę. Niektóre sytuacje, w których drukowane treści są niezastąpione, obejmują:

• Materiały edukacyjne - drukowane podręczniki i notatki pomagają wielu osobom w skuteczniejszym przyswajaniu wiedzy.
• Prezentacje biznesowe - profesjonalnie przygotowane raporty w formie drukowanej często robią większe wrażenie podczas spotkań.
• Archiwizacja - niektóre dokumenty wymagają przechowywania w formie papierowej ze względów prawnych.
• Personalizacja - wydruki umożliwiają tworzenie spersonalizowanych zaproszeń, broszur czy plakatów.

Jakie możliwości daje CSS w kontekście wydruku?

CSS wprowadza specjalne reguły dedykowane wydrukowi, dzięki którym możemy zdefiniować stylizacje widoczne tylko podczas drukowania. Kluczowe funkcjonalności obejmują:

• Ukrywanie elementów - możliwość wykluczenia z wydruku nawigacji, stopki czy reklam.
• Zmiana kolorystyki - zamiana kolorowych elementów na odcienie szarości, co pozwala oszczędzić tusz lub toner.
• Dostosowanie marginesów i formatowania tekstu - optymalizacja przestrzeni i czytelności na papierze.

Kompletny przewodnik po stylowaniu wydruku za pomocą CSS

W dalszej części tego rozdziału dowiesz się, jak wykorzystywać CSS do kontrolowania wyglądu stron internetowych podczas wydruku. Omówimy m.in. takie zagadnienia jak przełamanie strony przy pomocy page-break-before i page-break-after, blokadę przełamania stron za pomocą page-break-inside, a także linijki na stronie z użyciem widows i orphans. Dodatkowo, pokażemy, jak wykorzystywać kontekst strony z @page, w tym druk dwustronny i definiowanie rozmiaru papieru. Na końcu wyjaśnimy podstawowe reguły @media print i podpowiemy, jak projektować treści odpowiednie zarówno na ekran, jak i na papier. A to jeszcze nie wszystko :-)

Zadbaj o to, aby Twoja strona internetowa była tak funkcjonalna, jak to możliwe - nie tylko w internecie, ale i w świecie druku!

1. Przed elementem:

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

2. Po elemencie:

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

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?

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

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 albo tabela zostały przedzielone 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ę.

Przykład {page-break-inside}

Jeśli to możliwe, drukuj wszystkie tabele na jednej kartce papieru:

table {
	page-break-inside: avoid;
}

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
page-break-inside: wartość	1 2008-12-11	19 2013-02-19	12 2015-07-29	7 2003-01-28	1.3 2005-04-15
page-break-inside: auto	1 2008-12-11	19 2013-02-19	12 2015-07-29	15 2013-07-02	1.3 2005-04-15
page-break-inside: avoid	1 2008-12-11	19 2013-02-19	12 2015-07-29	15 2013-07-02	1.3 2005-04-15

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.

Przykład {widows, orphans}

Jeśli to możliwe, podczas drukowania pozostaw przynajmniej 4 linijki akapitu na górze i na dole kartki papieru:

p {
	widows: 4;
	orphans: 4;
}

Przeglądarki

❌ Nie działa

	Chrome	Firefox	Edge	Opera	Safari
orphans: wartość	25 2013-02-21	❌	12 2015-07-29	9.2 2007-04-11	1.3 2005-04-15
widows: wartość	25 2013-02-21	❌	12 2015-07-29	9.2 2007-04-11	1.3 2005-04-15

@page { cecha: wartość }

Kontekst strony definiuje wygląd samej strony - np. arkusza papieru na wydruku - a nie jej zawartości. Można w ten sposób ustawić marginesy i rozmiar strony na wydruku. 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 Ctrl+P). Nie wszyscy jednak potrafią to zrobić. Na szczęście możemy już w CSS wskazać wielkość marginesów na wydruku zgodnie z naszym uznaniem.

Przykład @page

Ustawienie marginesów strony na wydruku:

@page {
	margin: 1cm;
}

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
@page	2 2009-05-21	19 2013-02-19	12 2015-07-29	6 2001-12-18	18.2 2024-12-11
@page { size: wartość }	15 2011-10-25	95 2021-12-07	79 2020-01-15	15 2013-07-02	18.2 2024-12-11

@page :first { cecha: wartość }

Na pierwszej stronie wydruku często znajduje się okładka, która różni się wizualnie od pozostałych stron. Na przykład może ona zawierać grafikę rozpościerającą się na całej powierzchni kartki bez żadnych marginesów. Taki efekt pozwala uzyskać pseudoklasa :first, dzięki której możemy ustawić marginesy na okładce inne niż na pozostałych stronach wydruku - np. wyzerować je. 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.

Przykład @page :first

Wydruk z okładką:

@page {
	margin: 1cm;
}

@page :first {
	margin: 0;
}

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
:first	18 2012-03-28	116 2023-08-01	12 2015-07-29	9.2 2007-04-11	6 2012-07-25

1. Strony lewe:

   @page :left { cecha: wartość }

2. Strony prawe:

   @page :right { cecha: wartość }

Niektóre drukarki posiadają specjalny podajnik papieru pozwalający automatycznie zadrukowywać kartki po ich obu stronach. Nawet jeśli urządzenie nie ma wbudowanej takiej funkcji, druk dwustronny można zrealizować ręcznie: najpierw drukując nieparzyste strony, a następnie przekładając je odwrotnie z powrotem do podajnika papieru i uruchamiając wydruk stron parzystych. Jeśli takie arkusze papieru chcielibyśmy później spiąć jak książkę, dla wygodniejszego odwracania kartek marginesy wydruku powinny być asymetryczne. Gdy rozłożymy spięty wydruk, kartka leżąca po lewej stronie powinna mieć prawy margines szerszy, a kartka po prawej stronie - lewy margines szerszy. Taki efekt można uzyskać stosując pseudoklasy :left i :right, które pozwalają ustawić różne marginesy wydruku dla stron lewych i prawych.

W językach o kierunku tekstu od lewej do prawej (np. język polski lub angielski) pierwszą stroną dokumentu (okładką) jest strona prawa. Natomiast jeśli dokument zawiera w większości tekst w języku pisanym od prawej do lewej (np. język arabski lub hebrajski), pierwszą stroną będzie strona lewa.

Przykład @page :left :right

Druk dwustronny przygotowany do spięcia wzdłuż środkowej krawędzi:

@page {
	margin: 1cm;
}

@page :left {
	margin-right: 2cm;
}

@page :right {
	margin-left: 2cm;
}

Przeglądarki

❌ Nie działa

	Chrome	Firefox	Edge	Opera	Safari
:left	6 2010-09-02	❌	12 2015-07-29	9.2 2007-04-11	5 2010-06-07
:right	6 2010-09-02	❌	12 2015-07-29	9.2 2007-04-11	5 2010-06-07

@page { size: rozmiar }

Typowa drukarka najczęściej drukuje strony w orientacji pionowej (tzw. portret). Taki układ zwykle najlepiej sprawdza się przy drukowaniu tekstu. Na stronie możemy mieć jednak także zdjęcia np. krajobrazów, które typowo mają układ poziomy. W takiej sytuacji zdjęcie nie zostanie automatycznie obrócone, a więc zajmie tylko niewielki fragment kartki papieru. Użytkownik może co prawda samodzielnie zmienić orientację papieru przed uruchomieniem wydruku, ale nie wszyscy potrafią to zrobić. W takiej sytuacji wygodniej będzie podpowiedzieć drukarce, aby użyła poziomej orientacji papieru (tzw. krajobraz), dzięki czemu zdjęcie będzie można oprawić w ramkę i powiesić na ścianie ;-)

W większości domowych drukarek domyślnym formatem papieru jest A4. Jednak często posiadają one uniwersalny podajnik, do którego można załadować arkusze również w innych formatach - np.: A3, A5, B5. Przed uruchomieniem wydruku, podobnie jak w przypadku orientacji papieru, użytkownik może zmienić również format papieru. Możemy mu to jednak ułatwić, od razu podając preferowany format w postaci szerokości i ewentualnie wysokości.

Wymuszanie formatu papieru nie jest tak bezpieczne jak wybór orientacji papieru. Jeśli użytkownik nie zorientuje się i nie włoży do podajnika drukarki arkuszy w wymaganym formacie albo jego drukarka w ogóle nie obsługuje takiego formatu papieru, wydruk może zostać przeskalowany, przez co nie wypełni w całości kartki papieru.

Przykład @page {size}

Wydruk na kartkach ułożonych poziomo:

@page {
	size: landscape;
}

Jeśli drukarka używa formatu A4, jest to równoważne z podaniem:

@page {
	size: 297mm 210mm;
}

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
@page { size: wartość }	15 2011-10-25	95 2021-12-07	79 2020-01-15	15 2013-07-02	18.2 2024-12-11
@page { size: jis-b4 }	83 2020-05-19	95 2021-12-07	83 2020-05-21	69 2020-06-24	18.2 2024-12-11
@page { size: jis-b5 }	83 2020-05-19	95 2021-12-07	83 2020-05-21	69 2020-06-24	18.2 2024-12-11

@page strona { cecha: wartość }
selektor { page: strona }

Załóżmy, że nasza strona to np. opracowanie naukowe. Składa się ono przeważnie z tekstu, ale zawiera również kilka rozbudowanych tabel posiadających dużą liczbę kolumn. W takiej sytuacji tekst najlepiej by było wydrukować w orientacji pionowej, ale wtedy tabele mogą się nie zmieścić w szerokości kartki papieru. Nie chcielibyśmy też całego dokumentu drukować w orientacji poziomej, ponieważ w ten sposób ułożony na kartce tekst niewygodnie się czyta. Nie chcielibyśmy również zmuszać użytkownika, żeby osobno drukował strony dokumentu zawierające akapity tekstu, a potem ręcznie przestawiał orientację papieru, aby wydrukować zbyt szerokie tabele.

Na szczęście dzięki CSS można rozwiązać ten problem. Strony wydruku mogą zostać nazwane przy pomocy reguły @page strona. Następnie taką nazwę wystarczy przypisać do wybranego elementu przy pomocy dowolnego selektora CSS. Pierwsze z tych poleceń wystarczy wstawić w arkuszu stylów tylko raz, a drugie możemy użyć tyle razy, ile potrzebujemy. Na wszelki wypadek dobrze jest również wymusić przełamanie strony.

Przykład {page}

@page poziomo {
	size: landscape;
}

table {
	page: poziomo;
	page-break-before: always;
	page-break-after: always;
}

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
page: wartość	85 2020-08-25	110 2023-02-14	85 2020-08-27	71 2020-09-15	≤13.1 2020-03-24

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">
   	<link rel="stylesheet" href="wydruk.css" media="print">
   </head>

3. Dołączenie specjalnie dla wydruku wewnętrznego arkusza:

   <head>
   	<style media="print">
   	/* Arkusz dla wydruku */
   	</style>
   </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ć 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.

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

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

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

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

Zobacz więcej...

Jak nie dopuścić, aby na wydruku pierwsza część elementu znalazła się na jednej stronie papieru, a dalsza na drugiej?

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

Zobacz więcej...

W jaki sposób poprawić estetykę wydruku, kontrolując liczbę linijek wdowich (na górze) i sierocych (na dole)?

selektor { widows: liczba }

selektor { orphans: liczba }

Zobacz więcej...

Jak ustawić marginesy strony na wydruku?

@page { cecha: wartość }

Zobacz więcej...

Jak wyzerować marginesy na okładce wydruku?

@page :first { cecha: wartość }

Zobacz więcej...

W jaki sposób przygotować druk dwustronny, tak aby potem wszystkie kartki można było wygodnie spiąć jak książkę?

@page :left { cecha: wartość }

@page :right { cecha: wartość }

Zobacz więcej...

Co zrobić, żeby strona WWW była drukowana na kartce w orientacji poziomej? Jak obrócić drukowane zdjęcie? W jaki sposób wydrukować stronę na kartce w formacie A5, A3, B5 lub B4?

@page { size: rozmiar }

Zobacz więcej...

W jaki sposób wydrukować część stron poziomo, a pozostałe pionowo?

@page strona { cecha: wartość }
selektor { page: strona }

Zobacz więcej...