Een webpagina is (meestal) ontworpen voor het beeldscherm. Er zijn echter genoeg redenen te bedenken waarom iemand een artikel, gevonden op intra- of internet, even wil uitprinten.
Helaas ziet een pagina die er op het scherm prachtig uitziet niet altijd even mooi uit op papier. Gelukkig kan je hier invloed op uitoefenen. Veel sites maken gebruik van "printvriendelijke pagina's", maar dat is nergens voor nodig.
Media types
Je kan style sheets maken voor verschillende media, bijvoorbeeld papier of tv. Je moet dan dat mediatype meegeven aan de style-tag:
<style type="text/css" media="print" />
Of, in het geval van een extern style sheet:
<link rel="stylesheet" type="text/css" href="beeldbuis.css" media="tv" />
Opbouw print style sheet
Je maakt een apart css-bestand, en daarin leg je de eigenschappen vast die je op papier wilt zien. Bijvoorbeeld: het is op het scherm gebruikelijk om een document vrij grote marges mee te geven. Maar als je dan het document afdrukt, wordt die marge opgeteld bij de printmarges die veel programma's al standaard hebben! Daarom is het handig om in elk geval de marges op 0 te zetten:
body{
margin: 0;
}
Achtergrondplaatjes zijn op papier niet erg gewenst, voor de print style sheet zet je de achtergrond specifiek op wit, dan krijg je zoiets:
body{
margin: 0;
background-color: White;
background-image: none;
}
De meeste browsers negeren achtergrondkleuren en -plaatjes bij het printen, dus het is wellicht wat overbodig.
Voor de lettertypen kan je nu zonder problemen pts gebruiken als eenheid:
P, td{
font: 12pt Arial;
}
h1{
font: 18pt Arial;
}
Als je een element, bijvoorbeeld plaatjes, niet op papier wilt zien, maak je gebruik van de eigenschap display:
img{
display: none;
}
Let op: in plaats van display: none kan je ervoor kiezen om visibility: hidden te gebruiken. De laatste laat wel de ruimte zien die het element inneemt, display: none doet dat niet (en kan dus de lay-out van de pagina verknippen).
Stylesheet in je pagina zetten.
Als het goed is heb je nu twee style sheets, één voor het beeldscherm en één voor papier. Je maakt nu twee keer gebruik van het link-attribuut, in de head van het document:
<link href="beeldscherm.css" rel="stylesheet" type="text/css" media="screen" /> <link href="printer.css" rel="stylesheet" type="text/css" media="print" />
Misschien denk je nu: Ik heb geen zijn om in al mijn documenten een nieuwe link-regel te plaatsen, of laat je CMS dat niet toe. Je kan gelukkig ook de print style sheet invoeren in je bestaande style sheet:
Print style sheet opnemen in bestaande style sheet
Om een print style sheet op te nemen in een bestaand style sheet voeg je onderaan je style sheet de volgende regel toe:
@media print{
/* Je print styles hieronder */
body{
background: etc..
}
}
Deze methode gebruik ik ook op deze site.
Zorg er dan wel voor dat je media="all" kiest in de link-regel (het heeft me eens een uur gekost om uit te vinden waarom de print-styles genegeerd werden).
Dit zijn slechts enkele tips, experimenteer zelf een beetje. Om bomen te redden kan je in je browser gaan naar de optie 'Afdrukvoorbeeld' om te kijken hoe de weergave er op papier uit ziet, je hoeft dan niet telkens een printje te draaien.
Tags: CSS, html, webontwerp