Brug af CSS til at formatere dokumenter til udskrivning

Brug af CSS til at formatere dokumenter til udskrivning

Hvis du nogensinde har udskrevet billetreservationer eller rutevejledning til et hotel fra nettet, har du sandsynligvis været mindre imponeret over resultaterne. Du kan derfor være uvidende om, at udskrevne dokumenter stort set kan styles på samme måde, som de kan 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 termer betyder dette i stedet for meget gammeldags stilistisk markup som:



Heading

Vi bruger semantisk markup:






Det er ikke kun 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 denne stil med et stilark:

h1 { font-weight: normal; }

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



Inklusiv et printstilark

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


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




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


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



Nogle eksempler på stildeklarationer

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 alle standardværdier for disse værdier, der kan være angivet i dit dokument:

body {
background: white;
color: black;
}

Du vil måske også forhindre, at baggrundsbilleder udskrives - disse skal være dekorative og derfor ikke en nødvendig del af dit indhold:

* {
background-image: none !important;
}

Relaterede: Sådan indstilles et baggrundsbillede i CSS

hindbær pi 3 b+ starter ikke

Kontrol af margener

Et andet oplagt punkt at overveje vedrørende udskrivning er sidemargen. Selvom CSS giver mulighed for at angive margenstørrelse, skal du huske på, at din browser og printer også kan påvirke margenindstillingerne selv.

For eksempel er der i Chrome's udskrivningsdialogboks en margenindstilling, der har værdier, herunder ingen og brugerdefinerede som vil tilsidesætte alt, der er angivet via CSS:

Af denne grund anbefales det at overlade marginbeslutninger til læseren på offentlige websider. Til personlig brug eller til oprettelse af et standardlayout kan det imidlertid være hensigtsmæssigt at indstille udskriftsmargener via CSS. Det @side regel gør det muligt at angive margener og bør bruges som følger:

@page {
margin: 2cm;
}

CSS har også kapacitet til mere sofistikerede printlayouter, f.eks. At variere margenen efter, om siden er en ulige (højre), lige nummer (venstre) eller forsiden.

bedste apps til samsung galaxy watch

Desværre understøttes dette dårligt - især forsiden - men det kan bruges i minimalt omfang. Følgende stilarter producerer sider med lidt større bundmargener end top og lidt større margener på yderkanten end ryggen:

@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}

Skjuler irrelevant indhold

Ikke alt indhold er egnet til en printversion af dit dokument. Hvis din side indeholder bannernavigation, annoncer eller et sidebjælke, kan du forhindre, at disse oplysninger vises i den trykte version, f.eks .:

#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 { text-decoration: none; color: inherit; }

Du vil dog måske 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 linkede tekst:

a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}

Denne CSS giver resultater som følgende:

a [href]: efter specifikt målretter positionen efter ( :efter ) hvert linkelement ( til ), 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 styre visningen af ​​det genererede indhold.

Håndtering af sideskift

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

table { page-break-inside: avoid; }

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 { page-break-before: always; }

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

dette websted kan ikke nås, forbindelsen blev nulstillet. err_connection_reset
h1 + h2 { page-break-before: avoid; }

Visning af udskriftsstilarter

I alle tilfælde skal din browser og dit operativsystem have en funktion til forhåndsvisning af print, ofte som en del af standardudskrivningsdialogen.

Chrome -browseren gør det mere bekvemt at kontrollere og endda fejlsøge dine printstilarter via udviklerværktøjer, som vist i dette eksempel, der viser et CV med et printstilark. Åbn først hovedmenuen og vælg Flere værktøjer efterfulgt af Udvikler værktøjer mulighed:

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

Rul derefter ned til Efterlign CSS -medietype indstilling. Rullemenuen giver dig mulighed for at skifte mellem udskrivnings- og skærmvisninger af dit dokument:

Ved emulering af udskriftsstylearket er standarden Styles browser er tilgængelig for at inspicere og ændre livsstilsreglerne. Husk, at emulering af udskrift på en skærm stadig ikke er 100% præcis. Browseren ved intet om papirstørrelse og @side regel kan ikke efterlignes.

Udskrivning til en PDF

En praktisk funktion i 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 udskriftsformat til et glimrende middel til at oprette et dokument af høj kvalitet, der kan sendes som vedhæftet fil samt udskrives.

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

Del Del Tweet E -mail Sådan udskrives websider til PDF med Microsoft Edge

Er 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 lette trin.

Læs Næste Relaterede emner
  • Programmering
  • Trykning
  • CSS
Om forfatteren Bobby Jack(58 artikler udgivet)

Bobby er en teknologientusiast, der arbejdede som softwareudvikler i det meste af to årtier. Han brænder for spil, arbejder som Reviews Editor hos Switch Player Magazine og er nedsænket i alle aspekter af onlineudgivelse og webudvikling.

Mere fra Bobby Jack

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere