Om du någonsin har skrivit ut biljettreservationer eller vägbeskrivningar till ett hotell från webben, har du förmodligen varit mindre imponerad av resultaten. Du kanske därför inte är medveten om att utskrivna dokument kan formateras på ungefär samma sätt som de kan på skärmen, med hjälp av Cascading Style Sheets (CSS).
Dela upp problemen
En viktig fördel med CSS är separeringen av innehåll från presentation. I enklaste termer betyder detta istället för mycket gammaldags stilistisk uppmärkning som:
<font size="7"><b>Heading</b></font>
Vi använder semantisk uppmärkning:
<h1>Heading</h1>
Detta är inte bara mycket renare, det betyder också att vår presentation är skild från vårt innehåll. Webbläsare renderar h1 element som stor, fet text som standard, men vi kan ändra den stilen när som helst med en stilmall:
h1 { font-weight: normal; }
Genom att samla dessa stildeklarationer i en separat fil och referera till den filen från vårt HTML-dokument, kan vi använda separationen ännu bättre. Stilmallen kan återanvändas, och vi kan ändra den enskilda filen när som helst för att uppdatera formateringen i varje dokument som använder den.
Inklusive en utskriftsformatmall
På samma sätt som att inkludera en skärmformatmall kan vi ange en stilmall för utskrift. En skärmformatmall ingår vanligtvis så här:
<link href="https://www.makeuseof.com/format-web-page-for-printer/base.css" rel="stylesheet" />
Men ett ytterligare attribut, media, tillåter inriktning baserat på det sammanhang där dokumentet renderas. Som standard motsvarar det föregående elementet:
<link href="https://www.makeuseof.com/format-web-page-for-printer/base.css" rel="stylesheet" media="all" />
Detta innebär att formatmallen kommer att tillämpas för alla medier som dokumentet renderas i. Men mediaattributet kan också ha värden för utskrift och skärm:
<link href="https://www.makeuseof.com/format-web-page-for-printer/print.css" rel="stylesheet" media="print" />
I det här exemplet är print.css stilmall kommer endast att användas när dokumentet skrivs ut. Detta är en mycket användbar mekanism. Vi kan samla all vanlig stil (kanske typsnittsfamilj eller radavstånd) i en stilmall som gäller alla media, och mediespecifik formatering i enskilda stilmallar. Återigen, detta är en annan användning av separation av bekymmer.
Några exempel på stildeklarationer
En ren bakgrund
Du vill nästan säkert inte slösa med bläck på att skriva ut en färgstark bakgrund eller en bakgrundsbild. Börja med att återställa alla standardvärden för dessa värden som kan ha ställts in i ditt dokument:
body {
background: white;
color: black;
}
Du kanske också vill förhindra att bakgrundsbilder skrivs ut – dessa bör vara dekorativa och därför inte en obligatorisk del av ditt innehåll:
* {
background-image: none !important;
}
Kontrollera marginaler
En annan uppenbar punkt att tänka på när det gäller utskrift är sidmarginalen. Även om CSS tillhandahåller ett sätt att ställa in marginalstorlek, bör du komma ihåg att din webbläsare och skrivare också kan påverka marginalinställningarna själva.
Till exempel, i Chromes utskriftsdialogruta finns det en marginalinställning som har värden inklusive ingen och beställnings- som kommer att åsidosätta allt som anges via CSS:
Av denna anledning rekommenderas det att lämna marginalbeslut till läsaren på offentliga webbsidor. För personligt bruk eller för att skapa en standardlayout kan det dock vara lämpligt att ställa in utskriftsmarginaler via CSS. De @sida regeln tillåter att marginaler ställs in och bör användas enligt följande:
@page {
margin: 2cm;
}
CSS har också kapacitet för mer sofistikerade utskriftslayouter, som att variera marginalen beroende på om sidan är en udda siffra (höger), jämn siffra (vänster) eller försättsbladet.
Tyvärr stöds detta dåligt – särskilt försättsbladsalternativet – men det kan användas i minimal utsträckning. Följande stilar ger sidor med något större bottenmarginaler än övre och något större marginaler på den yttre sidkanten än ryggraden:
@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}
Döljer irrelevant innehåll
Allt innehåll är inte lämpligt för en tryckt version av ditt dokument. Om din sida innehåller bannernavigering, annonser eller ett sidofält kanske du vill förhindra att dessa uppgifter visas i den tryckta versionen, till exempel:
#contents, div.ad { display: none; }
Fixar länkar
Hyperlänkar är uppenbarligen inte relevanta i tryckt material, så du vill förmodligen ta bort alla stilar som skiljer dem från omgivande text:
a { text-decoration: none; color: inherit; }
Men du kanske fortfarande vill att läsarna ska ha tillgång till de ursprungliga webbadresserna, och en enkel lösning är att automatiskt infoga dem efter den länkade texten:
a[href]:after {
content: " (" attr(href) ")";
font-size: 90%;
color: #333;
}
Denna CSS ger resultat som följande:
a[href]:efter riktar sig specifikt till positionen efter (:efter) varje länkelement (a) som faktiskt har en URL ([href]). De innehåll deklarationen infogar här värdet av href attribut mellan parenteser. Observera att andra stilregler kan tillämpas för att styra visningen av det genererade innehållet.
Hantera sidbrytningar
För att undvika sidbrytningar som lämnar isolerat innehåll, eller bryta det obekvämt i mitten, använd sidbrytningsegenskaperna: sidbrytning-före, sidbrytning-efter och page-break-in. Till exempel:
table { page-break-inside: avoid; }
Detta bör hjälpa till att förhindra att tabeller spänner över flera sidor, förutsatt att ingen är längre än en enda sida. Liknande:
h1, h2 { page-break-before: always; }
Det betyder att sådana rubriker alltid startar en ny sida. Det kan dock orsaka problem om du omedelbart följer din sidas h1 med en h2, eftersom h1 kommer att hamna på en sida helt för sig. För att undvika detta, avbryt helt enkelt sidbrytningen med en väljare som riktar sig till den specifika instansen, till exempel:
h1 + h2 { page-break-before: avoid; }
Visa utskriftsstilar
I alla fall bör din webbläsare och ditt operativsystem tillhandahålla en förhandsgranskningsfunktion, ofta som en del av standarddialogrutan för utskrift.
Chrome-webbläsaren gör det bekvämare att kontrollera och till och med felsöka dina utskriftsstilar via utvecklarverktyg, vilket visas i det här exemplet som visar ett CV med en utskriftsformatmall. Öppna först huvudmenyn och välj Fler verktyg följt av Utvecklarverktyg alternativ:
Från den nya panelen som visas väljer du Meny, då Fler verktyg, följd av Tolkning:
Scrolla sedan ner till Emulera CSS-medietyp miljö. I rullgardinsmenyn kan du växla mellan utskrifts- och skärmvyn för ditt dokument:
När du emulerar utskriftsformatmallen, standarden Stilar webbläsare är tillgänglig för att inspektera och ändra livestilsreglerna. Tänk på att emulering av utskrifter på en skärm fortfarande inte är 100 % korrekt. Webbläsaren vet ingenting om pappersstorlek och @sida regel kan inte efterliknas.
Skriva ut till en PDF
En praktisk funktion i moderna operativsystem är möjligheten att skriva ut till en PDF-fil. I själva verket kan allt du kan skriva ut istället skickas till en PDF-fil – ingen riktig överraskning eftersom en PDF-fil trots allt ska representera ett utskrivet dokument.
Detta gör HTML, i kombination med en utskriftsstilmall, till ett utmärkt sätt att skapa ett högkvalitativt dokument som kan skickas som en bilaga, såväl som att skrivas ut.
Skriv ut en mängd olika dokument
Du kan använda en utskriftsformatmall för att skapa kvalitetsdokument, inklusive allt från ditt CV till recept eller evenemangsannonser. Webbsidor ser vanligtvis fula ut och innehåller oönskade detaljer när de skrivs ut, men ett litet antal stiljusteringar kan dramatiskt förbättra utskriftsresultaten. Att spara de slutliga resultaten som en PDF är ett snabbt sätt att skapa attraktiva, professionella dokument.
Om författaren
Bobby Jack (65 artiklar publicerade)
Bobby är en teknikentusiast som arbetat som mjukvaruutvecklare under de flesta av två decennier. Han brinner för spel, arbetar som chefredaktör på Switch Player Magazine och är fördjupad i alla aspekter av onlinepublicering och webbutveckling.
Mer från Bobby Jack
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
