Wydrukuj mnie
Autorzy stron WWW - zwłaszcza amatorskich - dość rzadko myślą o tym, jak ich strony wyglądają na ... wydruku. Efekty? Cóż, pięknie kolorowe boczne menu, atrakcyjne logo, formatowane w ładne przyciski linki - na kartce papieru stają się nieczytelnymi, szarymi bohomazami. Elegancko rozplanowana strona zaczyna być obcinana na bocznym marginesie albo też, przeciwnie, zaczyna tworzyć wąski pas przez środek kartki, z olbrzymimi pustymi przestrzeniami po bokach. Niemiłe.
Jak temu zaradzić? Cóż, są dwa sposoby.
Strona do wydruku
Pierwszy sposób jest znany od bardzo dawna - przygotowanie specjalnej wersji strony do wydruku, osiągalnej przez umieszczony (zwykle gdzieś u dołu) link. Stroną do wydruku może być odchudzona strona HTML a nawet dokument PDF. Zaletą tego podejścia jest możliwość dopieszczenia tej formy prezentacji. Wadą? Cóż, wady są przynajmniej trzy:
- część użytkowników serwisu nie zauważy linku i ... i tak wydrukuje wersję przeglądarkową,
- użytkownicy mogą przy pomocy wyszukiwarki lub podesłanego im linku trafić bezpośrednio na stronę do wydruku - pozbawioną menu, linków czy choćby reklam,
- pojawia się problem z synchronizacją treści (duży, gdy nasz serwis ma formę statycznych stron HTML, nieco mniejszy gdy generujemy strony dynamicznie - ale i wtedy możliwy).
Styl do wydruku
Nowsze rozwiązanie opiera się o CSS. Odpowiednimi deklaracjami stylu możemy sprawić, że przeglądarka drukując stronę ominie niepotrzebne menu, zastosuje inne marginesy czy inną czcionkę. Przykład? Cóż, proszę otworzyć podgląd wydruku dla tej strony. Jeśli używana jest w miarę nowa przeglądarka, powinien się pokazać prosty tekstowy wydruk bez zbędnych ozdobników.
Co ciekawe, uzyskanie tego nie jest skomplikowane. Kluczowa jest umieszczona w arkuszu stylu dyrektywa typu:
@media print {
#header, #footer, .navigation { display: none }
}
(oczywiście to, jakie klasy lub elementy chcemy wyłączyć, zależy od stosowanego arkuszu stylu, powyższe ukrywa elementy o identyfikatorach header i footer oraz wszystkie elementy klasy navigation). Oczywiście, oprócz chowania niepotrzebnych elementów, możemy też zdefiniować inne charakterystyki strony.
Jeśli różnic między prezentacją ekranową a wydrukiem jest wiele, można też po prostu użyć osobnych definicji stylu. W nagłówku strony umieszczamy dyrektywę taką jak:
<style type="text/css" media="screen">@import url("/style/screen.css");</style>
<style type="text/css" media="print">@import url("/style/print.css");</style>
Style do prezentacji na ekranie i do wydruku definiujemy tu zupełnie niezależnie (ewentualnie włączając dyrektywą @import jakiś wspólny fragment).
Zalety używania stylów do drukowania? Mamy sensowną obsługę wydruku, która działa sama - nie wymagając żadnych akcji od użytkownika ale też od programisty (po wstępnym przygotowaniu serwisu do tego typu funkcjonowania nowe dokumenty będą poprawnie drukowały się same z siebie).
A wady? Cóż, część użytkowników o tej możliwości po prostu nie będzie wiedzieć i nawet nie podejmie próby drukowania. Możemy temu po części zaradzić dodając javascriptowy przycisk inicjujący drukowanie (który w tym wypadku nie będzie otwierał żadnej osobnej strony) albo umieszczając krótką wzmiankę zachęcającą do drukowania. Problem powinien zresztą z czasem zniknąć, w miarę jak coraz więcej serwisów będzie posiadało dedykowane style do wydruku.
- «Sensowne wymiarowanie strony
- Jak łatwo podpiąć reklamy? Pomoże google»
- ↑Wskazówki dla autorów serwisów WWW