Hvis du nogensinde har udskrevet billetreservationer eller retninger til et hotel fra internettet, har du sandsynligvis været mindre end imponeret over resultaterne. Du kan derfor være uvidende om, at udskrevne dokumenter kan styles på samme måde som de kan vises på skærmen ved hjælp af Cascading Style Sheets (CSS).

Adskillelse af bekymringer

En vigtig fordel ved CSS er adskillelse af indhold fra præsentation. I de enkleste vendinger betyder dette i stedet for meget gammeldags stilistisk markering som:

Overskrift

Vi bruger semantisk markering:

Overskrift

Ikke kun er dette meget renere, det betyder også, at vores præsentation er adskilt fra vores indhold. Browsere gengiver h1 elementer som stor, fed tekst som standard, men vi kan til enhver tid ændre den stil med et typografiark:

h1 {fontvægt: normal; }

Ved at samle disse stilerklæringer i en separat fil og henvise til den fil fra vores HTML-dokument kan vi gøre endnu bedre brug af adskillelsen. Stilarket kan genbruges, og vi kan til enhver tid ændre den enkelte fil for at opdatere formateringen i hvert dokument, der bruger den.

Inkluderet et udskrivningsark

På samme måde som at inkludere et skærmformatark kan vi specificere et typografiark til udskrivning. Et skærmformatark er typisk inkluderet som sådan:

En yderligere attribut, medier, tillader målretning baseret på den kontekst, hvori dokumentet gengives. Som standard svarer det forrige element til:

Dette betyder, at typografiarket vil blive anvendt på ethvert medium, dokumentet gengives i. Medieattributten kan dog også tage værdier for udskrivning og skærm:

I dette eksempel er print.css stilark vil kun blive brugt, når dokumentet udskrives. Dette er en meget nyttig mekanisme. Vi kan samle al almindelig styling (måske skrifttypefamilie eller linjeafstand) i et typografiark, der gælder for alle medier og mediespecifik formatering i individuelle typografiark. Igen er dette en anden brug af adskillelse af bekymringer.

Nogle eksempler på stilerklæringer

En ren baggrund

Du vil næsten helt sikkert ikke spilde blæk ved at udskrive en farverig baggrund eller et baggrundsbillede. Start med at nulstille standardindstillingerne for disse værdier, der muligvis er angivet i dit dokument:

krop {
baggrund: hvid;
farve: sort;
}

Det kan også være en god idé at forhindre udskrivning af baggrundsbilleder - disse skal være dekorative og derfor ikke en påkrævet del af dit indhold:

* {
baggrundsbillede: ingen! vigtig;
}

Relaterede: Sådan indstilles et baggrundsbillede i CSS

Sådan indstilles et baggrundsbillede i CSS

CSS er et kraftfuldt værktøj til styling af websider. At lære at placere et baggrundsbillede lærer dig en masse CSS-basics.

Kontrollerende margener

Et andet indlysende punkt at overveje med hensyn til udskrivning er sidemargenen. Mens CSS giver et middel til at indstille marginstørrelse, skal du huske på, at din browser og printer også selv kan påvirke marginindstillingerne.

For eksempel er der i Chrome's udskrivningsdialog en margenindstilling, der inkluderer værdier inklusive ingen og brugerdefinerede som tilsidesætter alt, hvad der er specificeret via CSS:

Af denne grund anbefales det at overlade margenbeslutninger til læseren på offentlige websider. Til personlig brug eller til oprettelse af et standardlayout kan det dog være passende at indstille udskriftsmargener via CSS. Det @side regel tillader at indstille margener og skal bruges som følger:

@side {
margen: 2 cm;
}

CSS har også kapacitet til mere sofistikerede udskriftslayouter, såsom at variere margenen efter, om siden er en ulige nummerering (højre), lige nummerering (venstre) eller forside.

Desværre understøttes dette dårligt - især forsiden - men det kan bruges i et minimalt omfang. Følgende stilarter producerer sider med lidt større bundmargener end øverste og lidt større margener på den ydre sidekant end rygsøjlen:

@side {
margen til venstre: 20mm;
margen-højre: 20mm;
margin-top: 40mm;
margin-bund: 50mm;
}
@side: venstre {
margen til venstre: 30 mm;
}
@side: højre {
margen-højre: 30mm;
}

Skjuler irrelevant indhold

Ikke alt indhold vil være egnet til en udskrevet version af dit dokument. Hvis din side indeholder bannernavigation, reklamer eller en sidebjælke, kan du forhindre, at disse detaljer vises i den trykte version, for eksempel:

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

Hyperlinks er naturligvis ikke relevante i trykt materiale, så du vil sandsynligvis fjerne alle stilarter, der adskiller dem fra omgivende tekst:

a {tekst-dekoration: ingen; farve: arve; }

Du vil dog muligvis stadig have, at læsere skal have adgang til de originale webadresser, og en ligetil løsning er automatisk at indsætte dem efter den sammenkædede tekst:

a [href]: efter {
indhold: "(" attr (href) ")";
skriftstørrelse: 90%;
farve: # 333;
}

Denne CSS giver resultater som følgende:

a [href]: efter specifikt målretter positionen efter (:efter) hvert linkelement (-en) der faktisk har en URL ([href]). Det indhold erklæring her indsætter værdien af href attribut mellem parenteser. Bemærk, at andre stilregler kan anvendes til at kontrollere visningen af ​​det genererede indhold.

Håndtering af sideafbrydelser

For at undgå sideskift, der efterlader isoleret indhold eller bryder det akavet i midten, skal du bruge sideskiftegenskaberne: side-break-før, side-break-after og side-break-inde. For eksempel:

tabel {side-break-inside: undgå; }

Dette skal hjælpe med at forhindre tabeller i at spænde over flere sider, forudsat at ingen er højere end en enkelt side. Tilsvarende:

h1, h2 {side-break-before: altid; }

Dette betyder, at sådanne overskrifter altid starter en ny side. Det kan medføre problemer, hvis du straks følger din sides h1 med en h2, da h1 ender på en side alene. For at undgå dette skal du blot annullere sideskift ved hjælp af en vælger, der er målrettet mod den specifikke forekomst, for eksempel:

h1 + h2 {side-break-before: undgå; }

Visning af udskrivningsstilarter

Under alle omstændigheder skal din browser og dit operativsystem have en funktion til forhåndsvisning af udskrivning, ofte som en del af standardudskrivningsdialogen.

Chrome-browseren gør det mere bekvemt at kontrollere og endda fejle dine udskrivningsformater via Developer Tools, som det fremgår af dette eksempel, der viser et CV med et udskrivningsark. Åbn først hovedmenuen, og vælg Flere værktøjer efterfulgt af Udvikler værktøjer mulighed:

Vælg det nye panel, der vises Menu, derefter Flere værktøjer, efterfulgt af Gengivelse:

Rul derefter ned til Efterlig CSS-medietype indstilling. Rullelisten giver dig mulighed for at skifte mellem udskrivnings- og skærmvisningen af ​​dit dokument:

Ved efterligning af udskrivningsark, standarden Stil browser er tilgængelig for at inspicere og ændre reglerne for live-stil. Husk, at emulering af udskriftsoutput på en skærm stadig ikke er 100% nøjagtig. Browseren ved intet om papirstørrelse og @side regel kan ikke efterlignes.

Udskrivning til en PDF

Et praktisk træk ved moderne operativsystemer er muligheden for at udskrive til en PDF-fil. Faktisk kan alt, hvad du kan udskrive, i stedet sendes til en PDF-fil - ingen reel overraskelse, da en PDF-fil trods alt skal repræsentere et udskrevet dokument.

Dette gør HTML i kombination med et udskriftsark til et fremragende middel til at skabe et dokument i høj kvalitet, der kan sendes som en vedhæftet fil såvel som udskrives.

Udskriv en række dokumenter

Du kan bruge et udskriftsark til at oprette kvalitetsdokumenter, herunder alt fra dit CV til opskrifter eller begivenhedsmeddelelser. Websider ser typisk grimme ud og indeholder uønskede detaljer, når de udskrives, men et lille antal stiltilpasninger kan dramatisk forbedre udskriftsresultaterne. At gemme de endelige resultater som en PDF er en hurtig måde at oprette attraktive, professionelle dokumenter på.

Sådan udskrives websider til PDF med Microsoft Edge

Har du nogensinde stødt på en interessant artikel, som du gerne vil gemme til senere? Nå, du kan gemme som PDF med Edge i tre nemme trin.

Om forfatteren