22 besökare, 1 medlem och 2 Studenter är online nu
Loopia

CSS (Cascading Style Sheets)

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.

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.

Om du använder standardfärgen #0000CC och ser 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äsaren 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; }
}

 

Skriv ut valda delar av sidornas innehåll

Om du använder DIV (boxar) för att bygga upp din CSS-layout kan du välja vilka DIV som ska skrivas ut.

I exemplet nedan döljs allt innehåll i BODY. Därefter anges vilka DIV som ska skrivas ut. Positioneringen innebär att innehållet skrivs ut utan att den disposition som gäller på bildskärm gäller.

Ersätt namnet #content_box med namnet på dina egna DIV-boxar:

/* UTSKRIFT - skriver bara ut innehållet i valda DIV */

@media print {
body * {
visibility: hidden;
}
#content_box , #content_box * {
visibility: visible;
}

/* Positionerar innehållet vid utskriften */
#content_box {
position: absolute;
left: 0;
top: 0;
height: inherit;
}
}

 

 

 

Ingen 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.

Ingen utskrift av valda sidor

Använd regeln @MEDIA direkt i de sidor du inte vill ska skrivas ut.

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>

Ingen utskrift av någon sida

Använd regeln @MEDIA i huvudmallen som används av alla sidor.

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;}
}