Print stylesheet in CSS

, dan zet je dit in de print style sheet:

#menu {
display: none;
}

Gebruik je voor je banners
<div id=”banner”>, dan zet je dit in de print style sheet:

#banner{
display: none;
}

Afbeeldingen die je niet wil laten terugkomen kan je een aparte class meegeven, bijvoorbeeld class="noprint". In je print style sheet zet je dan:

.noprint {
display: none;
}

Gecombineerd ziet dit er zo uit:

#menu, #banner, .noprint {
display: none;
}

Het volledige A4-tje gebruiken

De inhoud die wordt uitgeprint wil je op de volledige breedte van het printpapier laten terugkomen. In de meeste gevallen een A4, maar met deze methode werkt het ook voor A3, A5 en andere formaten. Alle elementen (divs en tables) geef je de volgende opmaak mee:

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

Dit kan er dus bijvoorbeeld zo uitzien:

#container, #content, #inhoud, #post, #comments {
width: 100%;
margin: 0;
float: none;
}

Links uitschrijven

Links op een A4 zijn niet aanklikbaar. Het is dus verstandig in je printpagina de links volledig uit te schrijven. Dit is vrij eenvoudig door de volgende code op te nemen:

a:after {
content: " (" attr(href) ") ";
}

Achter een link komt dan tussen haakjes de url van de link te staan. Natuurlijk is het ook mogelijk om hier extra opmaak aan mee te geven, bijvoorbeeld een andere kleur, cursief gedrukt, kleinere of juist grotere letters.

Deze methode is redelijk eenvoudig en snel door te voeren. Het bevordert de leesbaarheid van een tekst niet. Het gebruik van voetnoten lijkt daarom de way to go.

Internet adres van een link als voetnoot op je print pagina plaatsen.

Een methode om alle links op je pagina als voetnoot te plaatsen is met behulp van een stukje JavaScript code. Aaron Gustafson heeft hier een stuk over geschreven. De laatste versie van het script kan je op Easy Designs vinden.

Een goede print stylesheet heeft vele voordelen. Hopelijk heeft dit artikel je op weg geholpen. Zo niet, dan staan de comments open!