Een print css maken

Het kan nuttig zijn om een apart stylesheet aan te maken voor een pagina die geprint moet worden. Bijvoorbeeld omdat je een kortingsbon wilt weggeven via internet of omdat je je cv printbaar wilt aanleveren aan een toekomstig werkgever. Om te voorkomen dat iemand onnodig veel (en in kleur) moet printen kun je in een print stylesheet aangeven dat een achtergrond gewoon wit moet zijn en de tekst gewoon zwart. Tevens kan er wellicht het een en ander aan content weg; het menu, de header, de footer, eventueel een sidebar met advertenties etc. Middels een print stylesheet kun je aangeven dat bepaalde zaken verborgen moeten worden.

 

Opdracht

Maak een print CSS voor een website. Zorg er voor dat de website voldoende elementen heeft om te wijzigen zoals een menu, een header met een afbeelding, een achtergrond afbeelding etc. Neem in je website ook linkjes op naar andere websites en zorg er vervolgens voor dat de URL op het print stylesheet leesbaar is.

Ga naar  http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/ voor extra tips. Hier zie je ook een aantal voorbeelden van websites met hun bijbehorende print stylesheet.

 

Tutorial

Op smashing magazine vind je veel goede tutorials. Dit is een Engelstalige website maar je kunt de bronbestanden downloaden en dan stap voor stap de aanpassingen doorvoeren. Zie https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

De website zonder print stylesheet

Tutorial via https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

De website geprint

De website geprint. Alleen relevante informatie is nog aanwezig.

 

Theorie

Je kunt op twee manieren een print stylesheet toevoegen:

Als extra extern stylesheet:

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

Als query in je stylesheet:

media print {

}

Voor print ga je van centimeters uit. Je zult dus op de een of andere manier moeten achterhalen hoe breed je site in pixels moet zijn om enigszins schappelijk geprint te worden. Via http://www.unitconversion.org/typography/pixels-x-to-centimeters-conversion.html kun je centimeters naar pixels converteren of andersom.

In mijn voorbeeld ben ik uitgegaan van 19 centimeter printbare ruimte. Dit leverde 718.11023622 pixels op. Ik heb dit afgerond naar 700 pixels.

 

Links in je tekst

Vaak heb je in je website links opgenomen maar niet de URL. Vooral omdat dit niet mooi staat; sommige URL’s zijn lang. Echter, de tekst “klik hier voor meer informatie” doet het niet erg goed op papier. Nu is er een handig stukje CSS code die deze link wel zichtbaar laat worden, in dit geval achter de gewone tekst:

a:link:after { content: ” (” attr(href) “) “; }

Link op website

De link op de website zoals deze in HTML is geplaatst.

Link op papier

De link zoals deze er na het printen uitziet met de CSS code toegevoegd. De link zelf wordt achter de tekst geplaatst.

 

Vormgeef overwegingen

Verder zul je een aantal beslissingen moeten nemen:

  • font-size aanpassen aan print.
  • font-family aanpassen (serif leest beter dan sans-serif).
  • achtergrondkleuren zoveel als mogelijk verwijderen; dit kost anders toch maar printerinkt.
  • tekstkleuren bijstellen naar (bijna) zwart.
  • welke content kan weg? Het menu bijvoorbeeld heeft geen waarde.

Bij deze beslissingen zul je wel steeds je ontwerp zelf in de gaten moeten houden. Wat mag er veranderen en wat niet?

Opmerking
Ik merk dat met inline-block of floating elementen het een en ander niet lekker zit. Je moet je elementen een heel stuk smaller maken voordat ze netjes naast elkaar willen staan. Dit ziet er niet meer goed uit. Ik heb besloten om bij mijn website mijn elementen gewoon 100% breed te laten zijn (display:block).

Links

Een leuke site met tips hiervoor is http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/