Formatera utskriften av dina webbsidor
Förord
När din chef frågar dig vart "Sida för utskrift"-länken är på sidan så kan du i fortsättningen bara skratta åt det och öppna en Cola till.. Med dagens webbläsare kan du bygga in den sidan direkt i ditt stylesheet.
Varför vill jag formatera utskriften?
Ofta när man bygger hemsidor så kanske man vill att de ska se bra ut på skärmen. Spektakulära färger, mycket grafik och flashiga effekter. Men om någon vill skriva ut informationen på din sida då vill nog inte den personen ha en massa tjafs på sin utskrift. Reklam, färgsprakande bilder och fräcka menyner - bläckpatroner och toners till skrivare kostar pengar, och man vill i allmänhet inte skriva ut mer än man behöver. Var är då lösningen? En speciell sida för utskrift? Nej! Inte idag! Man måste inte skapa helt separata sidor för utskrift - man behöver inte skapa länkar som med javascript öppnar nya fönster och med automatik skriver ut innehållet. Idag är det mycket enklare.
Om du har en relativt ny webbläsare så kan du med all sannorlikhet hitta menyalternativet "Förhandsgranska" (Print Preview) i "Arkiv"(File)-menyn på din webbläsare. Om du väljer det, så får du se hur den aktuella sidan ser ut när man skriver ut den. Om du går upp där och väljer det nu, så ser du till exempel hur den här sidan kommer att se ut när du skriver ut.
Bilder i menyerna, navigering och banners är egentligen helt ovesäntligt vid utskrift - det är väl ändå informationen man vill åt. Nu påstår jag att det finns ett mycket enkelt och smidigt sätt att välja precis vilka element som visas på skärm, utskrif och en mängd andra medier för den delen.
Hemligheten heter media
Kanske känner du redan till Cascading Stylesheets? Jag tänker inte förklara väldigt ingående vad de olika stylesheeten i denna artikel gör. Vill du lära dig, vilket du bör, så finns det andra sidor och artiklar som tar upp det.
Sättet du bestämmer vad som ska skrivas ut är barnsligt enkelt! Du delar helt enkelt upp ditt stylesheet i flera olika delar med hjälp av mediatyper.
Du skriver bara @media [typ(er)] { och sedan skriver du ett speciellt stylesheet för just de kommaseparerade mediatyperna [typer] du valt och avslutar med }.
Ovanstående exempel betyder alltså: På skärmen ska typsnitt utan serifer användas med storleken small. När man skriver ut det så ska typsnitt Med serifer användas, då det är mer gjort för läsning på papper, och ha storleken 11 punkter. Både på skärmen och vid utskrift ska texten vara fet.
Typen kan vara något av flera olika saker, men jag nämner bara tre stycken här. För mer information så finns det länkar i slutet av denna artikel. Här är några mediatyper:
| Mediatyp | Gäller |
|---|---|
| screen | Enbart datorskärmen |
| Enbart utskrifter | |
| projection | Projektor/Storskärm |
| all | Alla olika mediatyper |
Du kan ju också, som du ser i exemplet, kombinera typerna om du separerar dem med kommatecken. Notera alltså att det finns flera mediatyper än dessa tre, så "all" betyder inte samma sak som "print,screen,projection".
Att gömma menyer och reklam
Med samma princip som ovan så kan vi helt enkelt gömma olika objekt som vi inte vill ska synas på utskriften. Om vi har en DIV med en banner i:
Så kan du dölja den DIV:en vid utskrift genom att bara skriva följande stylesheet:
Eller om du till exempel vill att alla bilder med classen "skrivejut" ska vara dolda vid utskrift så kan du skriva:
Alternativa sätt att inkludera
Äldre webbläsare, till exempel Netscape 4, förstår inte dessa olika mediatyper så bra. Om du väljer att
göra som jag har gjort i tidigare exempel så kommer sidan inte alls att se bra ut i Netscape 4.
Men då finns det ett annat sätt att lösa det på - du kan ha ett stylesheet för varje media!
Du kan alltså välja media direkt när du inkluderar ditt stylesheet genom att specifiera mediatypen då du inkluderar ditt stylesheet.
När du inkluderar filerna på detta sätt så behöver du alltså inte ha några @media-definieringar inne i dina stylesheet.
Inne i dina stylesheet kan du om du vill dessutom inkludera andra stylesheets.
Sidbrytning
Inte nog med att man kan välja vad som ska visas vid utskrift, man kan dessutom undvika sidbrytning inom vissa block - eller tvinga fram dem om man känner för det.
Om du inte vill att t.ex. en paragraf får brytas vid utskrift så kan du skriva såhär:
Eller om du vill styra hur sidbrytningen hanteras före och efter en paragraf så kan du använda page-break-after och page-break-before. Dessa två kan bland annat ha värdena "always" och "avoid". Sätter man det till "always" så blir det alltid sidbrytning före varje sådant block.
Ett helt exempel
Här följer en hel html-sida som du kan klippa ut och ha som utgångsläge om du vill testa själv. Notera också att underrubriken (h2) automatiskt hamnar på sida nummer 2 vid utskrift.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Exempel
En blaffa som inte ska skrivas ut
En rubrik
Brödtext, brödtext och brödtext.
Underrubrik 1
Den här utskriften sponsras av Bananer.
Avslutningsvis
Jag hoppas nu att du i alla fall fått upp ögonen på att detta existerar, och vilka möjligheter som finns vid formatering av utskrift på en hemsida. Man kan experimentera med många olika saker inom detta område. Detta är ett enkelt och effektivt sätt att designa utskrifterna, och det enda besökaren behöver veta är just hur man skriver ut sidan. De behöver inte leta på någon speciell "Sida för utskrift"-länk eller något liknande. Det ska ju vara så enkelt som möjligt för besökaren, eller hur?
Tänk även på typsnitten. Att Läsa Verdana på ett papper är inte alls vänligt för ögat. De små "fötterna" (seriferna) på vissa typsnitt existerar just för att de ska vara enkla att läsa på papper. Det blir en osynlig linje i textmassan som blir lätt för ögat att följa.
För att testa hur Projection ser ut så kan du använda webbläsaren
Ricky Rehn
Kanon med denna typ av artiklar. Det löste mina utskriftsproblem på ett bra sätt. Problemet är bara att hitta artiklarna.