Om du någonsin har skrivit ut biljettbokningar eller vägbeskrivningar till ett hotell från webben har du förmodligen varit mindre imponerad av resultatet. Du kanske därför inte är medveten om att utskrivna dokument kan utformas på ungefär samma sätt som de kan visas på skärmen med hjälp av Cascading Style Sheets (CSS).

Dela upp problemen

En viktig fördel med CSS är separationen av innehåll från presentation. I de enklaste termerna betyder detta istället för mycket gammaldags stilistisk markering som:

Rubrik

Vi använder semantisk markering:

Rubrik

Inte bara är detta 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 ett formatmall:

h1 {font-weight: normal; }

Genom att samla dessa stildeklarationer i en separat fil och hänvisa till filen från vårt HTML-dokument kan vi utnyttja separationen ännu bättre. Stilarket 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.

Innehåller ett utskriftsark

På samma sätt som att inkludera ett skärmformatark kan vi ange ett formatmall för utskrift. Ett skärmformatark ingår vanligtvis så:

Ett ytterligare attribut, media, tillåter inriktning baserat på det sammanhang där dokumentet återges. Som standard motsvarar det föregående elementet:

Det betyder att stilarket kommer att tillämpas på vilket medium som dokumentet återges i. Men attributet media kan också ta värdena för utskrift och skärm:

I detta exempel är print.css stilark används endast när dokumentet skrivs ut. Detta är en mycket användbar mekanism. Vi kan samla all vanlig styling (kanske typsnitt eller linjeavstånd) i ett formatmall som gäller för alla medier och mediespecifik formatering i enskilda formatmallar. Återigen är detta en annan användning av åtskillnad av bekymmer.

Några exempel på stildeklarationer

En ren bakgrund

Du vill nästan säkert inte slösa bläck genom 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:

kropp {
bakgrund: vit;
svart färg;
}

Du kanske också vill förhindra att bakgrundsbilder skrivs ut - dessa bör vara dekorativa och därför inte en nödvändig del av ditt innehåll:

* {
bakgrundsbild: ingen! viktig;
}

Relaterad: Hur man ställer in en bakgrundsbild i CSS

Hur man ställer in en bakgrundsbild i CSS

CSS är ett kraftfullt verktyg för att utforma webbsidor. Att lära sig att placera en bakgrundsbild lär dig många CSS-grunder.

Kontrollerande marginaler

En annan uppenbar punkt att tänka på när det gäller utskrift är sidmarginalen. Medan CSS ger 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.

I Chrome: s utskriftsdialogruta finns det till exempel en marginalinställning som har värden inklusive ingen och beställnings- som åsidosätter allt som anges via CSS:

Av denna anledning rekommenderas att lämna marginalbeslut till läsaren på offentliga webbsidor. Men för personligt bruk eller för att skapa en standardlayout kan det vara lämpligt att ställa in utskriftsmarginaler via CSS. De @sida regel tillåter att marginaler ställs in och ska användas på följande sätt:

@page {
marginal: 2 cm;
}

CSS har också kapacitet för mer sofistikerade utskriftslayouter, som att variera marginalen beroende på om sidan är udda (höger), jämnt nummer (vänster) eller försättsbladet.

Tyvärr stöds detta dåligt - särskilt omslagsalternativet - men det kan användas i minimal utsträckning. Följande stilar producerar sidor med något större bottenmarginaler än övre och något större marginaler på ytterkanten än ryggraden:

@page {
marginal till vänster: 20mm;
marginal höger: 20mm;
marginal-topp: 40mm;
marginal botten: 50mm;
}
@page: left {
marginal till vänster: 30mm;
}
@page: höger {
marginal höger: 30mm;
}

Döljer irrelevant innehåll

Inte allt innehåll passar för en utskriftsversion av ditt dokument. Om din sida innehåller bannernavigering, annonser eller ett sidofält kanske du vill förhindra att dessa uppgifter visas i utskriftsversionen, till exempel:

#contents, div.ad {display: none; }

Hyperlänkar är uppenbarligen inte relevanta i tryckt material, så du vill nog ta bort alla stilar som skiljer dem från omgivande text:

a {text-dekoration: ingen; färg: ärva; }

Du kanske ändå vill att läsarna ska ha tillgång till de ursprungliga webbadresserna, och en enkel lösning är att infoga dem automatiskt efter den länkade texten:

a [href]: efter {
innehåll: "(" attr (href) ")";
teckenstorlek: 90%;
färg: # 333;
}

Denna CSS ger resultat som följande:

a [href]: efter specifikt riktar sig mot positionen efter (:efter) varje länkelement (a) som faktiskt har en URL ([href]). De innehåll deklarationen här infogar värdet på href attribut mellan parenteser. Observera att andra stilregler kan tillämpas för att styra visningen av det genererade innehållet.

Hantering av sidbrytningar

För att undvika sidbrytningar som lämnar isolerat innehåll eller bryter det besvärligt i mitten, använd sidbrytningsegenskaperna: sidbrytning före, sidbrytning och sidbrytning. Till exempel:

tabell {sidbrytning: undvik; }

Detta bör hjälpa till att hålla tabeller från flera sidor, förutsatt att ingen är högre än en sida. Liknande:

h1, h2 {page-break-before: alltid; }

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 hamnar på en sida ensam. För att undvika detta, helt enkelt avbryta sidbrytningen med en väljare som riktar sig mot den specifika instansen, till exempel:

h1 + h2 {page-break-before: undvik; }

Visa utskriftsstilar

I alla fall bör din webbläsare och operativsystem tillhandahålla en förhandsgranskningsfunktion, ofta som en del av standardutskriftsdialogrutan.

Chrome-webbläsaren gör det bekvämare att kontrollera och till och med felsöka dina utskriftsstilar via utvecklarverktyg, vilket visas i detta exempel som visar ett CV med ett utskriftsformat. Öppna först huvudmenyn och välj Fler verktyg följt av Utvecklarverktyg alternativ:

Välj från den nya panelen som visas Meny, då Fler verktyg, följd av Tolkning:

Rulla sedan ner till Emulera CSS-medietyp miljö. I rullgardinsmenyn kan du växla mellan utskrifts- och skärmvyer av ditt dokument:

När man emulerar utskriftsformatet, är standarden Stilar webbläsare är tillgänglig för att inspektera och ändra reglerna för levande stil. Tänk på att emulering av utskriftsutskrifter på en skärm fortfarande inte är 100% korrekt. Webbläsaren vet ingenting om pappersstorlek och @sida 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 verklig överraskning eftersom en PDF-fil trots allt ska representera ett tryckt dokument.

Detta gör HTML, i kombination med ett utskriftsformat, till ett utmärkt sätt att skapa ett högkvalitativt dokument som kan skickas som en bilaga och skrivas ut.

Skriv ut en mängd olika dokument

Du kan använda ett utskriftsark för att skapa kvalitetsdokument, inklusive allt från ditt CV till recept eller händelsemeddelanden. 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.

Hur man skriver ut webbsidor till PDF med Microsoft Edge

Har du någonsin stött på en intressant artikel som du ville spara till senare? Du kan spara som PDF med Edge i tre enkla steg.

Om författaren