Lav dine sider printervenlige med CSS
af Jonas Astrup, HTML.dk
Sidst opdateret 23. november 2000
Hvordan ser dine sider ud når de bliver printet ud på papir? Sandsynligvis fyldt med menuer, billeder, og andre ting som du egentlig helst ville undgå blev printet med ud.
Ville det ikke være smart hvis man kunne lave det sådan at f.eks. en menu blev usynlig når siden blev printet ud? Så ville brugerne altid få en pæn og læsevenlig udskrift fra dit website.
Det kan man faktisk lave med CSS, og det er lige præcis hvad denne artikel handler om - hvordan man med CSS kan tilpasse sine dokumenter til både skærm og print.
Et simpelt eksempel
Lad os først kigge på en helt simpel side med noget tekst, og et billede der linker til forsiden af html.dk:
... <h1>Latinsk fyldtekst</h1> <div class="billede"> <a href="http://www.html.dk"><img src="billede.gif"></a> </div> <p>Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas ad nostrum tempus Livi scriptoris ab aevo, si nimis antique, si dure.....</p> ...
Hvis den side blev printet ud, ville ikke alene overskriften og teksten blive printet ud, men også billedet:
Billedet giver jo overhovedet ingen mening på et stykke papir - man kan ikke klikke på papiret, og man kan ikke gå til forsiden. Derfor vil vi nu se på hvordan vi fjerner billedet fra udskriften.
Forskellige stylesheets til forskellige medier
Du ved sikkert allerede hvordan man linker et stylesheets ind på sine sider:
<link rel="stylesheet" href="style.css" type="text/css">
Det smarte er nu at man med atributten media kan specificere hvilket medie et stylesheet skal gælde for. Det vil sige at vi kan lave to forskellige stylesheets - et til skærm og et til print - og derefter linke dem ind på vores dokument sådan her:
<link rel="stylesheet" href="screen.css" type="text/css" media="screen"> <link rel="stylesheet" href="print.css" type="text/css" media="print">
Nedenstående figur illustruerer hvordan det samme dokument bliver fortolket med to forskellige stylesheets alt efter om det ses på en skærm eller printes på en printer:
Sådan gøres et element usynligt
Nu mangler vi altså blot at lave et stylesheet hvor billedet er usynligt, og derefter anvende dette som vores printer stylesheet.
I vores kode (se ovenfor) omgav vi vores billede med et <div> med en class vi kaldte "billede". Derfor kan vi nu gøre hele denne boks usynlig med følgende CSS:
.billede {
visibility:hidden;
position:absolute;
top:0px;
left:0px;
}
Bemærk at vi simpelthen blot sætter egenskaben visibility til hidden (synlighed=skjult), og derefter placerer boksen i øverste venstre hjørne for at undgå at den optager plads i dokumentet.
Den endelige kode
Vi har altså set på hvordan man kan benytte forskellige stylesheets til forskellige medier, og vi har set på hvordan man kan gøre et element usynligt. Så mangler vi blot at få sat stumperne sammen.
Først laver vi de to stylesheets, hvor vi i det ene (print.css) angiver koden ovenfor for at gøre billedet usynligt. Derefter linker vi nu de to stylesheets ind:
<html> <head> <title>eksempel</title> <link rel="stylesheet" href="screen.css" type="text/css" media="screen"> <link rel="stylesheet" href="print.css" type="text/css" media="print"> </head> <body> <h1>Latinsk fyldtekst</h1> <div class="billede"> <a href="http://www.html.dk"><img src="billede.gif"></a> </div> <p>Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas ad nostrum tempus Livi scriptoris ab aevo, si nimis antique, si dure.....</p> </body> </html>
Når ovenstående dokument bliver printet ud er billedet ikke med på udskriften.
Mere avancerede eksempler
Eksemplet i denne artikel er med et enkelt billede. Metoden er dog præcis den samme når man ønsker at fjerne andre ting fra udskrifter, f.eks. tabeller, menuer, bannere, o.s.v.
Denne side (www.html.dk) er opbygget med et stylesheet til print, som gør at hele navigationen, menuen og banneret ikke bliver printet ud. Herudover benyttes forskellige fonte til skærm og papir - mange mener nemlig at fonte med fødder (f.eks. Times New Roman) er bedre egnet til papir end fonte uden fødder (f.eks. Arial).
Koden i denne artikel er valid W3C-kode. Metoden understøttes af IE4+ og NN6+, m.fl.
- Relateret materiale på HTML.dk
- Relaterede nyhedsgrupper på Usenet
