CSS - Printpagina, printvriendelijk


Bij het uitprinten van websites worden afhankelijk van de bouw veel kleuren gebruikt en ook eventueel diverse afbeeldingen. Door middel van CSS kun je een aparte stylesheet maken die alleen dient voor momenten dat een pagina wordt afgedrukt. Op deze manier kun je ervoor zorgen dat een afdruk er ook goed uit komt te zien. Het maken van een stylesheet voor print gaat het handigst met een externe stylesheet maar kan ook inline.

Je roept deze stylesheet op dezelfde manier op zoals je normaal ook zou doen, echter is er wel een kleine wijziging in de code. Je moet hier namelijk aangeven als media dat het om 'print' gaat waardoor de CSS automatisch en alleen wordt gebruikt voor het afdrukken.

<link href="css.css" rel="stylesheet" type="text/css" media="print" />


Bij bijvoorbeeld een inline stylesheet pas je dat dan toe als volgt,

<style type="text/css" media="print">
.classnaam {
        padding: 0px;
}
</style>


Als je dit hebt ingesteld pas je de CSS aan naar eigen wens om zo de gebruiker een printvriendelijke versie van je website aan te bieden. Zo kun je bijvoorbeeld het handigst je huidige stylesheet nemen, deze kopieren en vervolgens per onderdeel aangeven wat er wel niet moet worden getoond. Om een element geheel uit te schakelen bij een afdruk van de pagina gebruik je dan 'display:none;' zoals hieronder is gedaan in het voorbeeld. Dit zou je bijvoorbeeld kunnen doen met een hoofd en submenu, een header of een footer.

.classnaam {
        display:none;
}


Verder kun je aanvullende eigenschappen meegeven zoals het uitschakelen van achtergrondafbeeldingen of een achtergrondkleur en het wijzigen van het lettertype zoals je dat normaal zou instellen voor de normale opmaak van je pagina. Je kunt het resultaat van je stylesheet bekijken en testen door naar Afdrukvoorbeeld te gaan in de browser.

Pagina's scheiden

Met CSS kun je eventueel enige invloed uitoefenen op het verdelen van de tekst over meerdere pagina's. Dit kan gedaan worden met page-break, toe te passen op de onderstaande manier. Zo kunnen middels CSS code meerdere pagina's gemaakt worden, bijvoorbeeld altijd na de footer of plaats gewoon telkens een div om pagina's te scheiden.

@media print {
        div#main {
                page-break-inside:avoid;
        }
        div.header {
                page-break-before:always;
        }
        div.footer {
                page-break-after:always;
        }
}