Formatera utskrifter med CSS

Den senaste månaden har vi jobbat en hel del med pappersutskrifter av olika det slag, så det kan nog bli en del blogg-material om det i framtiden.

Tänkte börja med grunderna i för hur man formaterar en sida för utskrifter med CSS. Ofta vill man ju inte att allt som syns på skärmen ska komma mer på utskriften, då lägger man till en separat stilmall enligt följande.

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

I denna stilmall kan det vara bra att ställa in fontstorleken i punkter. Här kommer ett exempel där jag har angett hur all text ska visas i body-elementet. Font-storleket har jag satt till 7 punkter som ger en rätt liten text och gör att man får plats med mer på ett papper. Vit bakgrund är ju också bra om man har något annat i sin riktiga stilmall. Grådaskiga utskrifter är inget bra och drar en hel del bläck i onödan.

body {
color : #000000;
background : #ffffff;
font-family: Verdana, Arial, Helvetica, san-serif;
font-size : 7pt;
}

De delar som inte ska vara med på utskriften sätter man till display till none, så här:

#dontPrintElementWithThisId,#header,#footer {
display:none;
}

37Signals skriver mer om hur man gömmer element på utskrifter och hur man kan formatera en blogg så den blir snygg på papper.

Sen ett sjysst tips på Snook.ca som förklarar hur man kan ange vart en ny sida ska börja när man skriver ut. Det kände jag inte till innan men har eftersökt ett sätt att göra detta på.

#alwaysStartNewPageOnThisElement {page-break-before:always;}

By Jesper Lind
1