Stilsett for utskrift

Å skrive ut en avisartikkel på papir er ofte en smertefull prosess. Til tross for at artikkelen ser vakker ut på skjerm, fremstår det gjerne som at hele desken ved VG er byttet ut med fulle aper når den kommer ut av skriveren.

Artikkelen er sannsynligvis spredd utover dobbelt så mange sider som nødvendig, fulle av menyer, lenker og reklame som vanskelig kan klikkes på når de henger på veggen.

Det finnes flere måter å løse dette problemet på. Den vanligste er å plassere en lenke til en «utskriftsvennlig versjon» på et tilsynelatende tilfeldig valgt sted på siden. Det er dog ikke en spesielt god løsning. Den er tungvindt for vedkommende som lager nettsiden, forvirrende for søkemotorer som kan ende opp med å indeksere to nesten identiske sider. Og, viktigst av alt, irriterende for brukerne som ikke lenger kan bruke «Utskrift»-knappen i nettleseren sin.

Heldigvis finnes der en løsning som både er enklere og mer elegant. Fem linjer CSS er alt som skal til:

@media print {
   .reklame, .meny {
      display: none;
   }
}

CSS-spesifikasjonen definerer en rekke forskjellige medietyper, hvorav «print» er én. Med deklarasjonen @media print {} angir vi at den aktuelle blokken med kode skal ignoreres når dokumentet vises på skjerm, og kun ta effekt ved utskrift. I eksempelet over skjuler vi alle menyer og reklamebannere fra vårt hypotetiske dokument, slik at alt som gjenstår er selve artikkelteksten.

Dersom du ønsker det kan du selvsagt også angi mer leselige skriftstørrelser, farger med bedre kontrast, hensiktsmessige sidemarger eller gjøre andre justeringer for å gjøre utskriften mer leselig:

@media print {

   ...

   #artikkel {
      font-size: 14pt;
      color: black;
      background-color: white;
      width: auto;
      margin: 1% 2%;
      padding: 0;
      float: none;
   }
}

Du kan også putte utskrifts-reglene i et separat stilsett:

<link href='utskrift.css' rel='stylesheet' media='print'>

En demonstrasjon av hvordan disse tingene fungerer i praksis finner du her:

http://e-tjenesten.org/eksperimenter/utskrift/

Mer informasjon om relevant CSS-magi finner du i spesifikasjonen:

• CSS2, chapter 7: Media types
• CSS2, chapter 13: Paged media
• CSS3 Module: Paged Media (fremdeles eksperimentelt, med varierende nettleserstøtte)

Wilhelm Joys Andersen er daglig leder i E-tjenesten SA og har mange års erfaring innen webutvikling og automatisert testing.

Lagt ut 16:47, 1. April 2010.