Stylesheet om webpagina te printen

door Kris Bergstra · 26 maart 2011

Pas geleden had ik een klant en die vond het belangrijk dat de adrespagina mooi geprint kon worden. Er zijn meerdere redenen te bedenken om je webpagina te kunnen printen. Maar meestal heb je dan andere instellingen nodig dan normaal. Advertenties en een menu hoeven bijvoorbeeld niet geprint te worden.

Een print stijlblad roep je op dezelfde manier aan, als een gewoon stijlblad, met dien verstande dat je er wel een ander media attribuut aan koppelt. Doordat je het media attribuut ‘print’ gebruikt wordt er vanzelf gebruik gemaakt van deze stylesheet op het moment dat je gaat printen.

Vervolgens ga je het stijlblad ‘print.css’ daadwerkelijk maken.

Wat zet je in een print stijlblad?

De CSS die je in een stijlblad plaatst om te printen, zal de CSS uit een gewoon stijlblad overrulen. Je hoeft dus alleen maar de CSS in dit stijlblad te plaatsen die voor de gewone stijlen in de plaats komen. Je hoeft dus niet opnieuw alle lettertypes aan te geven als je die gewoon hetzelfde wilt laten.

Ten eerste verwijder je vervolgens de niet gewenste delen. Ik kan me voorstellen dat je het menu niet geprint hoeft te hebben. Je hoeft geen zijbalk weer te geven en de sitemap aan de onderzijde van een webpagina hoeft ook niet geprint te worden. Je plaatst daarvoor de volgende code in je stijlblad, er vanuit gaande dat je de volgende opzet hebt gebruikt

#sidebar, #footer, .noprint {display: none;}

Hier zie je dus ook een class staan met de naam .noprint. Als je het nodig vindt kun je in he html ook bepaalde onderdelen de class noprint meegeven zodat deze ook niet weergegeven worden op de geprinte versie.

Het is niet handig als er heel veel witruimte overblijft als je de zijkant wit hebt laten maken met display none. Je moet dus zorgen voor de oplossing dat de hele ruimte op het papier gebruikt wordt.

De belangrijkste CSS die je hierbij nodig hebt is width: 100%; margin: 0; float: none;.

Voor het onderdeel, bijvoorbeeld de wrapper of container die je gebruikt, om alle onderdelen of divs heen, gebruik je deze code. Bijvoorbeeld:

#wrapper {width: 100%; margin: 0; float: none;}

Lettertype aanpassen

Het beste kun je een serif font gebruiken voor teksten die je moet printen, bijvoorbeeld ‘Times new roman’. Dit leest prettig vanaf papier. Daarnaast is het slim om een standaard grootte lettertype in te stellen. Je voorkomt daarmee dat de letters heel groot worden afgedrukt.

Denk ook aan de teksten die op een donkere achtergrond staan. Zorg ervoor dat je altijd een zwarte letter op een witte achtergrond plaatst als je gaat printen.

Al deze instellingen kun je in de print stylesheet opnemen.

Links laten verwijzen

Met nieuwere browsers kun je ervoor zorgen dat de printversie van een document ook de complete URL toont van een link. Plaats de volgende code in het print.css bestand:

a:link:after, a:visited:after { content:" [" attr(href) "] "; }

Je krijgt dan bij het printen de volgende weergave:

Een link die niet werkt [http://www.eenwebsite.nl]

Deze mogelijkheid werkt niet in Internet Explorer tot en met versie 8.

Stylesheet om webpagina te printen

Wat zet je in een print stijlblad?

Lettertype aanpassen

Links laten verwijzen

1 reactie

Geef een reactie Reactie annuleren