30 besökare, 1 medlem och 1 Student är online nu
Loopia

Webdesign och HTML

Mediatypen "Print" för utskrift

Det finns ett antal olika mediatyper som rekommenderas för bästa resultat på olika typer av enheter. Ett par exempel är enheter som stöder talsyntes eller brailleskrift. Det finns även fler enheter för visning än en "vanlig" bildskärm. Det kan vara tex handhållna enheter (mobiltelefoner, PocketPC), TV-apparater (med låg upplösning), projektion på vägg eller duk mm. Läs mer om "Media Types" hos W3C Öppnas i nytt fönster (Open in new window)

En webbsida är i första hand gjord för att visas på en bildskärm och de flesta webbläsare använder som standard mediatypen "screen" (bildskärm). Upplösningen på bildskärmen är då en av förutsättningarna när du anpassar storleken på innehållet. Läs mer i guiden Bildskärmens upplösning och grafikformat »

För att anpassa dina webbsidor till utskrift kan du använda CSS med mediatypen "print" där du anger vilka egenskaper som gäller om dina sidor skrivs ut. Här visas tre olika metoder för att ange mediatypen.

media="print" i en egen extern CSS-mall

När du använder en extern CSS-mall så kan du ha ett malldokument med mediatypen "screen" som används för att ange egenskaper för visning i webbläsaren och ett annat malldokument med mediatypen "print" som används för att ange egenskaper vid utskrift.

Här används mallen "layout.css" för skärmvisning och mallen "print.css" för utskrifter:

<head>

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

</head>

Notera att mediatypen "screen" är standard för webbläsare och normalt inte behöver anges.

I exemplen nedan används elementet BODY för att ange att teckensnittet ska vara "sans-serif" i enheten "pixlar" på skärmen men "serif" och i enheten "punkter" vid utskrift.

Innehållet i mallen "layout.css" där textinnehållet är anpassad för skärm:

body { font-family: Verdana, Arial, sans-serif; font-size: 11px; }

Innehållet i mallen "print.css" där textinnehållet är anpassad för utskrift:

body { font-family: Georgia, Times, serif; font-size: 10pt; }

TIPS! Läs mer om externa CSS-mallar i guiden CSS - grunder »

 

media="print" i samma externa CSS-mall

Du kan använda ett enda gemensamt malldokument till både mediatypen "screen" och mediatypen "print". Då använder du regeln @MEDIA för att lägga till olika mediespecifika områden i samma mall. Den formatering som ska vara specifik för utskrifter anges då inom regeln @media print

Här anges att bara den externa CSS-mallen "layout.css" ska användas:

<head>

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

</head>

Så här kan innehållet i malldokumentet "layout.css" se ut när det används både till skärm och utskrift:

body { font-family: Verdana, Arial, sans-serif; font-size: 11px; }

@media print {
body { font-family: Georgia, Times, serif; font-size: 10pt; }
}

I exemplet ovan används elementet BODY för att ange att teckensnittet ska vara "sans-serif" i enheten "pixlar" på skärmen men "serif" och i enheten "punkter" vid utskrift.

 

media="print" direkt i dokumentet

Du kan ange formateringen direkt i dokumentet (och även kombinera med externa CSS-mallar). Här anges samma formatering som i de två exemplen ovan men nu direkt i dokumentet:

<head>

<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 11px; }
</style>

<style type="text/css" media="print">
body { font-family: Georgia, Times, serif; font-size: 10pt; }
</style>

</head>

 

Tips för utskriftsformatering

Här är några tips och exempel när du anpassar dina CSS-mallar för utskrift. Alla exempel använder en gemensam extern CSS-mall (se exemplet ovan) och @MEDIA för att ange formatet för utskrifter.

Ange svart text och vit bakgrund för utskrifter
När du skriver ut vit text på en svart bakgrund förbrukar skrivaren mer färg eller toner. Dessutom ändrar vissa webbläsare färgerna för att ge en bättre utskrift. Du kan själv påverka utskriften genom att ange de färger som ska användas. Här anges att svart text på vit bakgrund ska användas vid utskrift men att andra färger ska användas för bildskärm:

body { color: #663333; background-color: #CC6633; }

@media print {
body { color: #000000; background-color: #ffffff; }
}

Använd Serif-teckensnitt och anpassa textstorleken
Text som ska läsas på en bildskärm blir tydligare om ett sans-serif-teckensnitt används som tex Arial, Verdana, Helvetica, Geneva. Vid utskrifter är däremot serif-fonter tydligare och du bör istället använda tex Times, Times New Roman och Georgia (läs mer i guiden Teckensnitt och format » ). För visning på en bildskärm fungerar enheten "pixlar" bra men för skrivare är "punkter" standard. Om du tex använder storleken 12px för bildskärm kan du använda 12pt för utskrift.

p { font-family: Verdana, Arial, sans-serif; font-size: 12px; }

@media print {
p { font-family: Georgia, Times, serif; font-size: 12pt; }
}

Använd standardegenskaper på länkad text
Länkad text som på bildskärm kan visas med olika färger eller kantlinjer kan vara svåra att se när de skrivs ut. Även om inte länken är klickbar vid utskrift så kan det finnas en poäng med att se villka delar av texten som är länkad till refererad information. Använder standardfärgen #0000CC och se till att länkad text även är understruken så syns det tydligt vid utskrift. Här anges olika egenskaper för länkad text för bildskärm och utskrift:

a:link { color: #990000; text-decoration: none; }
a:visited { color: #990000; text-decoration: none; }
a:hover { text-decoration: underline; }

@media print {
a:link { color: #0000cc; text-decoration: underline; }
a:visited { color: #0000cc; text-decoration: underline; }
}

Dölj bilder, annonser och annan online-information
Vi utgår ifrån att textinnehållet är det viktigaste på din webbplats. Bilder som är viktiga online kanske inte behöver skrivas ut om det tar bort fokus från textinnehållet. Om du har annonser i form av text eller banners kan du dölja dem vid utskrift. Om du ska göra det eller inte kan bero på avtal med annonsörer men annars finns kanske ingen anledning att ha med annonser på utskrifterna. Bilder och text som bara fyller ett syfte online kan du dölja vid utskriften.

I exemplet nedan används en box (DIV) med namnet "reklamkolumn" som innehåller reklamen.

<div id="reklamkolumn">
Reklam och banners här...
</div>

Vid utskriften döljs hela boxen med egenskapen display: none;

#reklamkolumn { float: left; width: 130px; padding: 5px; margin: 0; color: #666666; }

@media print {
#reklamkolumn {display: none;}
}

Lägg till information om webbplatsen
Adressen till sidan är viktigt att ha med på utskriften och underlättar för besökaren att återvända till din webbplats. webbläsare lägger till URL i sidhuvud eller sidfot vid utskrift men det kan väljas bort av användaren och det kan vara en anledning till att lägga till adressinformation manuellt. Du kan även lägga till information om Copyright och villkor för användning av innehållet.

I exemplet nedan används en box (DIV) med namnet "printinfo" som innehåller copyright-information:

<div id="printinfo">
Copyright © www.webdesignskolan.se Materialet får skrivas ut och användas för personligt bruk. Användning i undervisningssyfte är ej tillåten utan vårt tillstånd - läs mer här: https://webdesignskolan.se/copyright/copyright.php
</div>

Vid visning på skärm döljs hela boxen med egenskapen display: none; och vid utskrift skrivs innehållet ut över hela sidans bredd:

#printinfo {display: none;}

@media print {
#printinfo { width: 100%; margin: 0; display: inline; font-size: 8pt; font-style: italic; }
}

 

Utskriftsformatering av CSS-layout

Om du använder DIV (boxar) för att bygga upp din CSS-layout kan du kontrollera egenskaperna för varje box vid visning på skärm och vid utskrift. Exemplet visar en CSS-layout som innehåller boxar med opacitet, kantlinjer, runda hörn, reklam, banners och ljus text mot mörk bakgrund. Så här ser layouten ut i webbläsaren:

Prova att skriva ut CSS-layouten ovan! Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window)

Resultatet vid utskrift (utan utskriftsformatering) varierar i olika webbläsare. Dessutom kan resultatet variera mellan förgranskning och verklig utskrift. Så här ser förgranskning (och utskrift) ut i Firefox:

Förgranskningen i Internet Explorer ger nästan samma resultat men vid utskrift får den vänstra boxen en svart bakgrund och ljus text...

Genom att använda regeln @MEDIA i samma externa CSS-mall och använda tipsen i avsnittet ovan kan vi påverka utskriftsresultatet.

Prova att skriva ut CSS-layouten ovan! Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window)

Vid utskrift av exemplet ovan är reklamen dold, teckensnittet ändrat och länkar visas med blå och understruken text. Dessutom är en den extra copyright-informationen utskriven:

Klicka här för att se CSS-mallen som används i exemplet »

 

Förhindra utskrift av sidornas innehåll

Om du vill förhindra att sidornas innehåll kan skrivas ut kan du tillämpa egenskapen display: none; för BODY på de aktuella sidorna. Notera att detta inte är något skydd för bilder och textinnehåll på sidorna. Dessutom kan informationen skrivas ut via en skärmdump med "Prt Scr" eller liknande.

Här anges egenskapen för media="print" direkt i dokumentet som annars använder den externa CSS-mallen "layout.css":

<head>

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

<style type="text/css" media="print">
body {display: none;}
</style>

</head>

Använd regeln @MEDIA om du vill ange CSS-egenskapen i samma externa CSS-mall som används för övrig formatering. Här anges formateringen i CSS-mallen "layout.css":

body { font-family: Verdana; font-size: 11px; background-color: #FEA003; }

/* Dölj innehåll vid utskrift */
@media print {
body {display: none;}
}

Prova att skriva ut CSS-layouten nedan!

Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window)