Guide till utskrifter av webbsidor med print stylesheet

Tobias Dokken
Skriven av Tobias Dokken, januari 6, 2017

Att optimera en webbsida för att ge sina besökare möjligheten att kunna skriva ut någorlunda läsbara sidor brukar vara en del av webbutvecklingen som hoppas över.

Det brukar ses som det försummade barnet, ungefär som optimering för mobilen brukade vara fram till för bara något år sen och till viss del fortfarande är.

Du kanske själv har skrivit ut någon gång med mindre lyckat resultat?

Behövs det verkligen?

Det är möjligt att sidan redan ger läsbara utskrifter utan optimering men varför inte skala bort allt onödigt såsom menyer, reklam och övrigt som inte behövs i skrift?

Hade utskrifterna sett bättre ut så hade det troligtvis varit vanligare att skriva ut (eller spara som pdf) men vi är vana redan från begynnelsen att utskrift av webbsidor är fula (och har blivit ännu fulare sen responsiv design slog igenom).

När jag talar om utskrifter inkluderar jag även att spara sidan som pdf, eftersom samma teknik används.

Jag har ingen aktuell statistik på hur vanligt det är att man skriver ut webbsidor, men det är ingen vågad gissning att säga att det beror på vilken typ av sida man har. Det känns till exempel inte som att lika hög % kommer skriva ut från en videosajt än de som kommer skriva ut från en sajt med recept.

– E-handlare borde bli bättre på att optimera utskrifter

E-handlare borde bli bättre på att optimera sina utskrifter. Tänk produktsidor och bekräftelser. I de fall som kunden faktiskt väljer att skriva ut bekräftelser så är det viktigt att faktiskt ge ett bra intryck med en snygg utskrift.

– Använd Google Analytics för att ta reda på hur många som faktiskt skriver ut

Det bästa är att implementera kod så att Google Analytics kan spåra varje gång som ens sida skrivs ut. Jag kommer beskriva längre ner hur man gör.

– Är det svårt att optimera utskrifter?

Inte alls! Åtminstone inte om man jämför med all övrig kodning av en webbsida. Det enda man behöver göra är att ange i utskriftsmallen (Print style sheet) vilka komponenter som man vill dölja, sätta texten till svart färg och bakgrunden transparent.

Varför har utskrifter försummats?

Vi slarvar. Man gör det som syns och det som efterfrågas. Syns det inte så tänker man inte på det och då tar man inte upp det för utvecklaren som något som behöver åtgärdas.

Snabbkurs i hur man optimerar utskriftsmallen, print style sheet, för utskrifter

Det finns många sätt som man kan optimera utskrifsmallen på beroende på de krav man har. Jag kommer bara gå igenom det grundläggande som behövs för att komma igång.

Bästa sättet är att lägga till en sektion i befintlig stilmall som talar om önskad stil för utskriftsläge.

 @media print {
/* print styles go here */
}

Alternativt kan man lägga till en separat stilmall för utskrifter

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

Men det alternativt kräver ett extra anrop vilket man bör undvika i den mån det är möjligt.

Det man vill uppnå med en utskriftssida är att det ska vara läsbart och se stilrent ut.

Så vi skapar först en stil som gäller för alla element på sidan och som tar bort bakgrundsfärger och eventuella skuggor och gör textfärgen svart.

* {
    background:transparent !important;
    color:#000 !important;
    box-shadow:none !important;
    text-shadow:none !important;
}

Sen vill vi ta bort de delar av sidan som inte behövs i en utskrift som till exempel navigationsmenyer och annonser.

header, footer, menu, banners,.valfriKlassSomViInteVillVisa {
     display: none;
}

Vi vill undvika att utskriften delar en bild på grund av sidbrytning så vi lägger till följande

img {
     page-break-inside: avoid;
}

Det går även bra att använda samma procedur för tabeller, listor och övriga element som man inte vill ska brytas.

img,table, section,ul {
  page-break-inside: avoid;
}

Vi vill också gärna undvika att sidan bryts direkt efter rubriken

h1, h2, h3, h4, h5 {
 page-break-after: avoid;
}                       

Hur ska man göra med länkar?

Det är en bra fråga. Mest logiskt är att visa hela sökvägen till länken i utskriften. Det åstadkommer man lätt med följande kodsnutt.

a[href]:after {
    content: " (" attr(href) ")";  /*Talar om att man vill visa hela länken*/
    font-size:12px;
    color:blue;
}

Där vi även lagt till en mindre fontstorlek och annan färg eftersom en länk i skrift har lägre prioritet än vanlig text. Nu lägger vi till lite extra för att inte visa adressen till länkar som används främst för funktioner och är oanvändbar i skrift.

a[href^="#"]:after,a[href^="javascript"]:after {
    content: "";
}

Nu vill vi ställa in marginalerna för sidan så att utskrifterna  inte ser så ihoppressade ut.

@page {
    margin:2cm;
}

Så här ser våran slutkod ut

@media print {
   * {
       background:transparent !important;
       color:#000 !important;
       box-shadow:none !important;
       text-shadow:none !important;
      }
    header, footer, menu, banners,.valfriKlassSomViInteVillVisa {
       display: none;
    }
   img,table, section,ul {
     page-break-inside: avoid;
   }
   h1, h2, h3, h4, h5 {
       page-break-after: avoid;
   }
   a[href]:after {
        content: " (" attr(href) ")";  /*Talar om att man vill visa hela länken*/
        font-size:12px;
        color:blue;
    }
    a[href^="#"]:after,a[href^="javascript"]:after {
         content: "";
    }
    @page {
      margin:2cm;
    }
}

Hur kollar man hur en webbsida ser ut i utskriftsläge?

Enklaste sättet är att välja att skriva ut så får man upp förhandsgranskningen i webbläsaren. Det gör man med Ctrl + P (Windows) eller Command+P (Mac) eller direkt från menyn.

Testa gärna hur den här sidan ser ut i utskriftsläge. Jag har inte gjort någon mer optimering än enligt tipsen ovan.

Med Chrome och Firefox så kan man ställa in så att sidan visas i utskriftsläge.

Instruktioner för Chrome


Öppna Developer Tools. Det gör man med Ctrl-Shift-I (Windows) eller CMD + Opt + I (Mac) eller öppna från menyn. Välj sedan att klicka på knappen med de tre prickarna. Då får du upp en meny där du väljer Rendering. Bocka i Emulate CSS Media. Voila! Nu visar webbläsaren hur sidan ser ut i utskriftsläge och du kan nu testa dig fram för att få fram önskat utseende.

Instruktioner för Firefox

Öppna Developer Toolbar. Det gör du enklast med Shift + F2 eller Tools -> Web Developer -> Developer Toolbar från menyn så får du upp ett fält där du kan skriva text. Skriv media emulate print så visas sidan i utskriftsläge. Skriv media emulate screen för att komma tillbaka till vanligt visningsläge.

Hur man kollar i Google Analytics hur många som skrivit ut

Det kan vara en bra idé att undersöka om någon faktiskt skriver ut från er sida. Då kan man utifrån det resultatet avgöra om det är värt att satsa på det.

Det vi behöver är att skapa en bild för spårning som triggas varje gång sidan skrivs ut. Koden lägger man in precis före </body>-taggen.

<script>

 var googleAccountID = "UA-ERT-ID-HÄR";

 function s4() {

return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);

}

 function guid() {

return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();  }

(function(){

  var GIF = "https://ssl.google-analytics.com/collect?v=1&t=event" +

   "&ec=print&tid=" + googleAccountID + "&cid=" + guid() +

   "&z=" + (Math.round((new Date()).getTime() / 1000)).toString() +

   "&ea=" + encodeURIComponent(document.title) +

   "&el=" + encodeURIComponent(document.location.pathname);

  var rule = "body:after{content:url(" + GIF + ")}";

  var head = document.head || document.getElementsByTagName('head')[0];

  var css  = document.createElement('style');

  if (css && head) {

   css.setAttribute("type",  "text/css");

   css.setAttribute("media", "print");

   if (css.styleSheet) { // For IE

       css.styleSheet.cssText = rule;

   } else {

          css.appendChild(document.createTextNode(rule));

   }

 head.appendChild(css);

  

   /* Written by Amit Agarwal - labnol.org */

  }

})();

</script>

Hela koden är hämtad från Digital Inspiration, läs gärna mer där hur det fungerar.

Slutord

Eftersom det inte tar lång tid att optimera stilmallen för utskrift så tycker jag att man inte förlorar mycket på det, även om ingen skriver ut från just din sajt.

Lägger man till spårning av utskrifter så får man en bättre uppfattning av hur pass nödvändigt det är.

Vad tycker du?

 

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Related posts

LÄS ÄVEN

Vad är Amazon Go?

2017-02-09

Vad är Amazon Go och hur kommer det revolutionera sättet vi handlar på?

0

Optimera så att din webbsida ser bra ut med stor skärmupplösning

2017-02-07

Varför optimerar man inte webbsidor för större skärmar?

0

Skapar webbsidor lika långsamt som en sköldpadda

2017-01-23

Därför tog det 5 år att skapa min sajt – Sanningen bakom att skapa en webbsida

0

Vad är Web Beacon

2017-01-16

Vad är web beacon och hur hotar det vår personliga integritet?

0

2017-01-16

Hur gör svenska tidningar med utskrifter på webben

0

Kinesiska mobilappen WeChat

2016-12-27

Analys av WeChat och Kinas framfart på Internet

0

Därför borde kaklagen smulas sönder

2016-12-20

Därför borde kaklagen smulas sönder

0

Är kaklagen död?

2016-12-19

Är kaklagen död? Granskning av hur myndigheterna implementerat lagen

0

Säkerhetsbristen med Target blank

2016-12-12

Target _blank – Säkerhetsbristen som Facebook valt att inte åtgärda

0

Gå till bloggen
DelaDela Dela på Twitter Dela på LinkedIn Dela på Facebook Dela på Google plus
Kontakta
Nyhetsbrev