Een nette printvariant van je webpagina aanbieden

Voor diverse doeleinden is het praktisch om een printbare variant van je website aan te kunnen bieden. Dit is handig wanneer je bijvoorbeeld artikelen verkoopt, wanneer je reisinformatie biedt, aanbiedingen toont en meer. De meeste (zo niet alle) browsers bieden standaard een printmogelijkheid, door middel van de CTRL-P of CMD-P bij Mac kun je een scherm oproepen die laat zien wat je gaat printen en hoeveel je daarvan wilt printen.

Echter kun je als eigenaar van de website stimuleren dat de informatie uitgeprint wordt, aangezien dit als goede offline reclame en informatiebron kan dienen.

Dit doe je door de informatie die uitgeprint wordt te sturen, en een button op de website te plaatsen die het afdrukscherm opent.

De button

Wat de browser aanzet tot het printen is een stukje javascript, die kun je achter een button of een stukje tekst plaatsen:

  <a href="javascript:window.print()"> 
     <img src="printer.bmp" border="0" alt="Pagina afdrukken"></a> 
  <a href="javascript:window.print()">Pagina afdrukken</a>

Het sturen van de printbare informatie

Je kunt de informatie die uitgeprint wordt sturen door middel van een stylesheet, denk hierbij aan het weglaten van het navigatiemenu- de sidebar en andere overbodige informatie die ongewenst tijd en inkt kost bij het printen.

Als eerst zet je een referentie naar de stylesheet tussen de <head> en </head> van je website.

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

Het belangrijkste is hierbij dat je in de media statement aangeeft dat het een print is. Zo zal deze stylesheet door de meeste browsers en devices gebruikt worden voor enkel de printfunctie.

De info in die print stylesheet zal niet veel code komen, maar alleen een code die aangeeft dat een specifieke class niet getoond wordt.

   .non-print { display: none;}

Deze class gebruik je voortaan in de website om aan te geven welke: div’s – titels – menus en informatie niet geprint moet worden.

Voorbeeld: Wil je bijvoorbeeld geen sidebar weergeven in je printvariant, maak je bij de <div id=”sidebar”> een toevoeging door de class: <div id=”sidebar” class=”non-print”>.

Het voordeel van een class is dat deze de XHTML validatie niet belemmerd wanneer het meerdere keren in de website te vinden is. Een class mag vaker voorkomen met hetzelfde statement, in tegenstelling tot een Div.

Enkele buttons om te gebruiken: (rechter-klik opslaan als)