Jak stworzyć arkusz stylów dla druku?

W świecie pełnym komputerów i urządzeń mobilnych z dostępem do internetu, wiele osób zapomina, że strony internetowe można też drukować. Oczywiście nie każda strona będzie chętnie drukowana przez użytkowników, ale na pewno sami mieliście potrzebę wydrukowania zawartości podstrony jakiegoś serwisu informacyjnego. Brak stylów CSS, które odpowiadały by warunkom drukowania może być irytujące dla użytkowników naszej witryny. Dlatego warto poświęcić trochę czasu i stworzyć specjalny fragment naszego arkusza, który odpowiedzialny będzie za stylowanie drukowanych stron. Jak to zrobić przedstawimy poniżej.

Od czego zacząć?

Przede wszystkim musimy jakoś wytłumaczyć przeglądarce, że określone deklaracje CSS chcemy zastosować jedynie w przypadku drukowania strony internetowej. Możemy to zrobić na trzy sposoby. Po pierwsze możemy dodać arkusz stylów z typem mediów określonym jako „print”:

Nie jest to złe rozwiązanie, szczególnie jeśli chcemy mieć większą wsteczną kompatybilność przeglądarkową, ale są lepsze sposoby.

Drugi sposób jest możliwy jeśli chcemy importować arkusz stylów dla druku. Możemy zrobić to w następujący sposób:

Ostatecznie są też mediaqueries, dzięki którym zrobimy fragment arkusza CSS, który będzie odpowiadał za deklaracje stylów w przypadku drukowania naszej strony. Takie rozwiązanie przedstawimy też w naszym tutorialu. Zaczynamy bardzo prosto bo od zapisania następującego fragmentu kodu:

Ten fragment możemy umieścić na końcu arkusza stylów i okrasić go odpowiednim komentarzem. To dzięki niemu stworzymy deklaracje, które pozwolą wygodnie czytać treści wydrukowane z naszej strony.

Jak skonstruować deklaracje dla druku?

Podstawy

Budując style dla druku powinniśmy przede wszystkim pamiętać o tym co powinno, a co nie powinno znaleźć się w drukowanej wersji strony. Są pewne ogólne zasady, których powinniśmy się trzymać w tej kwestii, ale trzeba zaznaczyć, że wszystko w dużej mierze zależy od konkretnej strony i stylów CSS jakie na niej występują.

Na pewno pownniśmy zacząć od globalnego wyłączenia pewnych właściwości.

Box-shadow nie jest do niczego potrzebny w drukowanej wersji strony. Jest to raczej ozdobnik, który przy drukowaniu staje się elementem zbędnym. Dlatego warto go wyłączyć dla wszystkich elementów. Alternatywnie możemy zgrupować selektor, który nadpisze styl dla wszystkich elementów na stronie gdzie box-shadow występuje, ale takie rozwiązanie jak przedstawione wyżej jest po prostu szybsze, szczególnie jeśli box-shadow używamy w wielu miejscach.

W tym miejscu można też dopisać inne deklaracje, które uznamy za zbędne i których będziemy chcieli się pozbyć przy drukowaniu strony. Można by z powodzeniem usunąć w ten sposób również text-shadow, ale żeby zachować pewną spójność i przejrzystość stylów dla druku proponuję usunąć text-shadow w miejscu gdzie zajmiemy się stricte typografią.

Nie wszystko jest potrzebne

Na stronie przeznaczonej dla druku na pewno nie powinny znaleźć się wszystkie elementy kodu HTML ponieważ część z nich będzie po prostu zbędna. W zależności od konkretnej konstrukcji strony pownniśmy wyłączyć wyświetlanie pewnych elementów. Dla przykładu:

Klasa .ndop (no display on print) jest dodatkowym elementem zgrupowanego selektora, dzięki któremu wraz z pisaniem kolejnych artykułów i rozbudową witryny będziemy mogli przypisać ją do elementów HTML, których nie chcemy wyświetlać w drukowanej wersji strony. Oczywiście to jakie konkretnie elementy opatrzymy deklaracją display:none; zależy od konkretnej strony. Możliwe, że nie zawsze i nie wszędzie będzie sens wyłączać np. stopkę.

Typografia

Następnie powinniśmy się zająć typografią. Zacznijmy od przykładu:

Usunięcie tła, text-shadow i zmianę koloru tekstu na czarny to podstawy. Oprócz tego powinniśmy pamiętać aby zmienić czcionkę na szeryfową, gdyż tego typu czcionki lepiej czyta się na papierze. Ostatni z selektorów w powyższym zgrupowaniu daje nam pewność, że wszystkie elementy będące dziećmi <p></p> otrzymają zadeklarowane style. Jako że najpewniej do edycji artykułów i tym podobnych będziemy używać edytora WYSIWYG to elementy typu <span></span> czy <address></address> będą zawarte w tagach <p></p>. Jeśli używamy ich w innym kontekście gdzie <p> nie będzie ich rodzicem, można poszerzyć powyższą deklarację:

To nie wszystko co można zrobić w kwestii typografii. Ważnym jest aby sprecyzować, czy na naszej stronie są jakieś elementy HTML, które chcielibyśmy szczególnie podkreślić w wersji drukowanej albo takie, których styl wyświetlania chcielibyśmy zmienić. W ramach mediaquery dla mediów drukowanych możemy np. dodać obramowanie dla cytatów lub zwiększyć ich odstęp od tekstu. Tak na prawdę wszystko zależy od nas i naszych potrzeb – dlatego musisz umieć je sprecyzować, a do tego najlepiej dojść eksperymentalnie, czyli przez wydruk strony :)

Ważną rzeczą jest też łamanie strony. Dla wygody czytania nie jest dobre kiedy wydruk kończy się tuż po nagłówku. Dlatego powinniśmy zidentyfikować, które nagłówki chcemy zachować jako swego rodzaju punkty nawigacyjne strony (coś na wzór rozdziałów i podrozdziałów). Dla nich powinniśmy dodać poniższą deklarację:

W zależności od tego jaki wygląd chcemy osiągnąć dla drukowanej wersji naszej witryny, do powyższego zgrupowania selektorów możemy dołączyć inne elementy.

Żeby mieć podstawy typografii naszej stron z głowy musimy jeszcze zająć się sierotami i wdowami. W skrócie chodzi o to aby rozporządzić końcówkami i początkami stron.

Linki

Niestety, mimo że żyjemy w czasach, w których można wydrukować sobie działający pistolet, papier nadal nie ma możliwości wyświetlania stron internetowych. Do czasu postępu w tej dziedzinie będziemy więc musieli sobie radzić z problemem linków na wydrukowanej stronie internetowej. Istnieją dwa możliwe podejścia: olewamy temat i linki drukowane są „na żywca”, czyli jako podkreślony tekst lub pełen adres (w zależności jak są wyświetlone na stronie) lub próbujemy rozwiązać ten problem. Zachęcam do drugiej opcji.

To co musimy zrobić jest relatywnie proste jeśli mamy pojęcie o selektorach CSS3. Kod sprowadza się do następującej deklaracji:

Dzięki takiej regule na papierze wydrukowana zostanie zawartość atrybutu href co daje możliwość czytającemu zobaczenia dokąd prowadzi link. To rozwiązanie załatwia problem anchorów, które przybierają postać tekstu i po wydruku czytający nie jest w stanie stwierdzić, gdzie prowadzi dany link.

Oczywiście powyższą deklarację możemy zmodyfikować. Możemy np. stworzyć selektor z udziałem rodzica linku i w ten sposób zwartość atrybutu href drukowana będzie jedynie dla linków, które mają określonego rodzica. W ten sposób możemy w jakiś sposób kontrolować, które linki w jaki sposób są drukowane. Jednak warto podkreślić, że wyświetlenie adresu linku na papierze uznawane jest dzisiaj za swego rodzaju dobrą praktykę.

Inną kwestią związaną z linkami są linki używane przez JavaScript. Aby czytający wydruk naszej strony nie doznali nie małego zdziwienia z powodu niezrozumiałych znaków powinniśmy zastosować poniższą deklarację:

W ten sposób nadpiszemy pierwszą deklarację dotyczącą linków.

Zdjęcia i grafiki

Problematyczne mogą się też okazać zdjęcia i grafiki, które załączane są do dokumentu HTML w tagach <img></img>. Tutaj podstawowym problemem jest ich szerokość przy drukowaniu. Żeby uniknąć problemów wystarczy dodać do arkusza do druku następujący kod:

Tabelki

Ważną rzeczą jest aby w arkuszu stylów zdefiniować regułę dotyczącą łamania strony w elementach tr. Łamanie się strony w wierszach tabelek nie jest pożądane, więc musimy starać się zapobiegać temu zjawisku:

Jeśli chodzi o tabelki to jest jeszcze kilka wskazówek, o których warto pamiętać. Przede wszystkim jeśli mamy tzw. tabelkę zebrę pamiętajmy o dostosowaniu kolorów do realiów druku. Zmieńmy wszelkie pstrokate kolory na delikatne odcienie szarości, które z jednej strony rozróżnią rzędy tabeli, a z drugiej nie zabiją użyteczności strony. Pamiętajmy też o nadpisaniu wszelkich fantazyjnych obramowań itp. W tym wypadku im prościej tym lepiej.

Layout i „bajery” JavaScript

Wiele osób może być zdziwionych, ale już na samym początku tego artykułu wspomniano, że wyświetlanie niektórych elementów strony można sobie darować. Ciężko jest tutaj tworzyć jakieś uniwersalne zasady, ale wyobraźmy sobie stronę w typowo blogowym layoucie, gdzie w układzie trzy kolumnowym, dwie skrajne kolumny służą jako kontenery na subnawigację, listę ostatnich komentarzy i miejsce na reklamy.

Te dwie kolumny zdecydowanie nie muszą (wręcz nie powinny) znaleźć się w drukowanej wersji strony, a więc możemy spokojnie wyłączyć ich wyświetlanie. Co więcej skoro idziemy już w tę stronę to powinniśmy rozszerzyć główną, środkową kolumnę do 100% szerokości.

Kolejną ważną rzeczą są wszelkie slidery, zakładki, akordeony itd. Jeśli zawierają one w sobie ważną treść, którą chcemy aby użytkownicy mogli wydrukować to musimy tak zmodyfikować style CSS tworzących je kodu HTML żeby nadpisać manipulacje wynikające z działania kodu JavaScript i treści z tychże sliderów i zakładek poukładać w sensowną całość na nowo węwnątrz naszego arkusza stylów dla druku.

W ten sposób użytkownik drukujący naszą stronę otrzyma tekst przypomniający wydruk z edytora tekstu. I mniej więcej o to nam właśnie chodzi.

Podsumowanie

Jeśli chodzi o budowanie arkuszów stylów dla druku warto pamiętać, że jedynie podstawowe zasady są uniwersalne. Te właśnie staraliśmy się zarysować powyżej. Reszta w dużej mierze zależy od konstrukcji Waszej strony i od tego co musicie w niej zmienić żeby była czytelna po wydrukowaniu. Nawet same szczegóły tego jak napiszecie deklaracje związane z mediami drukowanymi zależne są od konstrukcji Waszego arkusza. Możecie wybrać wiele podejść od np. nadpisywania wszystkiego przy pomocy !important po bardziej wyrafinowane konstrukcje, które jednak będą pewnie wymagały szerszych prac (zachęcamy do tego drugiego rozwiązania).

Najważniejsze to pamiętać o tym, że po wydrukowaniu użytkowników przede wszystkim obchodzi treść strony!

Poniżej całość naszego mini arkusza stylów dla druku:

Image courtesy of Stuart Miles at FreeDigitalPhotos.net