Logga in
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.
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:
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:
Innehållet i mallen "print.css" där textinnehållet är anpassad för utskrift:
TIPS! Läs mer om externa CSS-mallar i guiden CSS - grunder »
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:
Så här kan innehållet i malldokumentet "layout.css" se ut när det används både till skärm och utskrift:
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.
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:
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.
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:
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.
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:
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.
Vid utskriften döljs hela boxen med egenskapen display: none;
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:
Vid visning på skärm döljs hela boxen med egenskapen display: none; och vid utskrift skrivs innehållet ut över hela sidans bredd:
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:
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.
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":
Använd regeln @MEDIA i huvudmallen som används av alla sidor.
Här anges formateringen i CSS-mallen "layout.css":
skriv ut »