Bruke CSS til å formatere dokumenter for utskrift

Bruke CSS til å formatere dokumenter for utskrift

Hvis du noen gang har skrevet ut billettreservasjoner eller veibeskrivelser til et hotell fra nettet, har du sannsynligvis vært mindre imponert over resultatene. Du kan derfor ikke være klar over at utskrevne dokumenter kan styles på omtrent samme måte som på skjermen ved hjelp av Cascading Style Sheets (CSS).





Adskillelse av bekymringer

En viktig fordel med CSS er at innhold skilles fra presentasjon. I de enkleste termer betyr dette i stedet for en veldig gammeldags stilistisk markering som:



Heading

Vi bruker semantisk markup:






Ikke bare er dette mye renere, det betyr også at presentasjonen vår er atskilt fra innholdet vårt. Nettlesere gjengir h1 elementer som stor, fet tekst som standard, men vi kan når som helst endre den stilen med et stilark:

h1 { font-weight: normal; }

Ved å samle disse stilerklæringene i en egen fil, og referere den filen fra vårt HTML -dokument, kan vi gjøre separasjonen enda bedre. Stilarket kan gjenbrukes, og vi kan når som helst endre den enkelte filen for å oppdatere formateringen i hvert dokument som bruker den.



Inkludert et utskriftsstilark

På samme måte som å inkludere et skjermstilark, kan vi spesifisere et stilark for utskrift. Et skjermstilark er vanligvis inkludert slik:


Et ekstra attributt, halv , tillater målretting basert på konteksten der dokumentet gjengis. Som standard tilsvarer det forrige elementet:




Dette betyr at stilarket vil bli brukt på ethvert medium dokumentet gjengis i. Imidlertid kan mediaattributtet også ta verdier for utskrift og skjerm:


I dette eksemplet, print.css stilark vil bare bli brukt når dokumentet er skrevet ut. Dette er en veldig nyttig mekanisme. Vi kan samle all vanlig styling (kanskje skriftfamilie eller linjeavstand) i et stilark som gjelder for alle medier, og mediespesifikk formatering i individuelle stilark. Igjen, dette er en annen bruk av separasjon av bekymringer.



Noen eksempler på stildeklarasjoner

En ren bakgrunn

Du vil nesten ikke kaste bort blekk ved å skrive ut en fargerik bakgrunn eller et bakgrunnsbilde. Start med å tilbakestille standardverdiene for disse verdiene som kan ha blitt angitt i dokumentet:

body {
background: white;
color: black;
}

Du vil også forhindre utskrift av bakgrunnsbilder - disse skal være dekorative og derfor ikke en nødvendig del av innholdet ditt:

* {
background-image: none !important;
}

I slekt: Hvordan sette et bakgrunnsbilde i CSS

en av de viktigste fordelene kapasitive berøringsskjermer har over resistive berøringsskjermer er

Kontrollerende marginer

Et annet åpenbart poeng å vurdere når det gjelder utskrift, er sidemarginen. Selv om CSS gir deg muligheten til å angi marginstørrelse, må du huske på at nettleseren og skriveren også kan påvirke marginnstillingene selv.

For eksempel, i utskriftsdialogboksen for Chrome, er det en marginnstilling som har verdier inkludert ingen og tilpasset som vil overstyre alt som er spesifisert via CSS:

Av denne grunn anbefales det å overlate marginbeslutninger til leseren på offentlige nettsider. For personlig bruk eller for å lage et standardoppsett kan det imidlertid være hensiktsmessig å angi utskriftsmarginer via CSS. De @side regel tillater marginer, og bør brukes som følger:

@page {
margin: 2cm;
}

CSS har også kapasitet til mer sofistikerte utskriftslayouter, for eksempel å variere margen etter om siden er en oddetall (høyre), partall (venstre) eller forsiden.

Last ned YouTube -video direkte til iPhone

Dessverre støttes dette dårlig - spesielt forsidealternativet - men det kan brukes i minimal grad. Følgende stiler produserer sider med litt større bunnmarginer enn topp og litt større marginer på ytre sidekant enn ryggraden:

@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 innhold

Ikke alt innhold vil være egnet for en trykt versjon av dokumentet. Hvis siden din inneholder bannernavigasjon, annonser eller et sidefelt, kan det være lurt å forhindre at disse detaljene vises i utskriftsversjonen, for eksempel:

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

Hyperkoblinger er åpenbart ikke relevante i trykt materiale, så du vil sannsynligvis fjerne alle stiler som skiller dem fra omgivende tekst:

a { text-decoration: none; color: inherit; }

Imidlertid vil du kanskje fortsatt at leserne skal ha tilgang til de originale nettadressene, og en grei løsning er å sette dem inn automatisk etter den koblede teksten:

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

Denne CSS gir resultater som følgende:

a [href]: etter retter seg spesielt mot stillingen etter ( :etter ) hvert lenkeelement ( til ) som faktisk har en URL ( [href] ). De innhold erklæringen setter inn verdien av href attributt mellom parenteser. Vær oppmerksom på at andre stilregler kan brukes for å kontrollere visningen av det genererte innholdet.

Håndtering av sideskift

For å unngå at sidepauser etterlater isolert innhold eller bryter det vanskelig i midten, bruk sidebrytingsegenskapene: side-pause-før , side-break-after og side-break-innsiden . For eksempel:

table { page-break-inside: avoid; }

Dette skal bidra til å holde tabeller fra å spenne over flere sider, forutsatt at ingen er høyere enn en enkelt side. På samme måte:

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

Dette betyr at slike overskrifter alltid starter en ny side. Det kan imidlertid forårsake problemer hvis du umiddelbart følger sidens h1 med en h2, siden h1 vil ende opp på en side helt alene. For å unngå dette, bare avbryt sideskiftet med en velger som retter seg mot den spesifikke forekomsten, for eksempel:

datamaskinen er koblet til internett, men fungerer ikke
h1 + h2 { page-break-before: avoid; }

Vise utskriftsstiler

I alle tilfeller bør nettleseren og operativsystemet gi deg en forhåndsvisning, ofte som en del av standard utskriftsdialogboks.

Chrome -nettleseren gjør det mer praktisk å kontrollere og til og med feilsøke utskriftsstilene dine via utviklerverktøy, som vist i dette eksemplet som viser en CV med et utskriftsstilark. Først åpner du hovedmenyen og velger Flere verktøy etterfulgt av Utviklerverktøy alternativ:

Velg det nye panelet som vises Meny , deretter Flere verktøy , etterfulgt av Gjengivelse :

Bla deretter ned til Etterlign CSS -medietype omgivelser. Rullegardinmenyen lar deg veksle mellom utskrifts- og skjermvisninger for dokumentet ditt:

Ved emulering av utskriftsstilarket er standarden Stiler nettleser er tilgjengelig for å inspisere og endre reglene for live stil. Husk at emulering av utskrift på en skjerm fremdeles ikke er 100% nøyaktig. Nettleseren vet ingenting om papirstørrelse og @side regelen kan ikke etterlignes.

Skriver ut til en PDF

En praktisk funksjon i moderne operativsystemer er muligheten til å skrive ut til en PDF -fil. Faktisk kan alt du kan skrive ut i stedet sendes til en PDF -fil - ingen reell overraskelse siden en PDF -fil tross alt skal representere et trykt dokument.

Dette gjør HTML, i kombinasjon med et utskriftsstilark, til et utmerket middel for å lage et dokument av høy kvalitet som kan sendes som vedlegg og skrives ut.

Du kan bruke et utskriftsstilark til å lage kvalitetsdokumenter, inkludert alt fra CV -en til oppskrifter eller hendelsesmeldinger. Websider ser vanligvis stygge ut og inneholder uønskede detaljer når de skrives ut, men et lite antall stiljusteringer kan forbedre utskriftsresultatene dramatisk. Lagring av de endelige resultatene som en PDF er en rask måte å lage attraktive, profesjonelle dokumenter.

Dele Dele kvitring E -post Hvordan skrive ut websider til PDF med Microsoft Edge

Har du noen gang kommet over en interessant artikkel som du ønsket å lagre til senere? Vel, du kan lagre som PDF med Edge i tre enkle trinn.

Les neste Relaterte temaer
  • Programmering
  • Printing
  • CSS
Om forfatteren Bobby Jack(58 artikler publisert)

Bobby er en teknologientusiast som jobbet som programvareutvikler i de fleste to tiårene. Han brenner for spill, jobber som Reviews Editor i Switch Player Magazine, og er fordypet i alle aspekter av online publisering og webutvikling.

Mer fra Bobby Jack

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere