Hvis du noen gang har skrevet ut billettreservasjoner eller veibeskrivelse til et hotell fra nettet, har du sannsynligvis ikke vært så imponert over resultatene. Du kan derfor være uvitende om at trykte dokumenter kan utformes på samme måte som de kan vises på skjermen ved hjelp av Cascading Style Sheets (CSS).

Separasjon av bekymringer

En viktig fordel med CSS er separasjon av innhold fra presentasjon. I de enkleste ordene betyr dette i stedet for veldig gammeldags stilistisk markering som:

Overskrift

Vi bruker semantisk markering:

Overskrift

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

h1 {font-weight: normal; }

Ved å samle disse stilerklæringene i en egen fil, og henvise til den filen fra HTML-dokumentet vårt, kan vi utnytte separasjonen enda bedre. Stilarket kan brukes på nytt, og vi kan når som helst endre den enkelte filen for å oppdatere formateringen i hvert dokument som bruker den.

Inkludert et utskriftsark

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

Et ekstra attributt, media, tillater målretting basert på konteksten dokumentet blir gjengitt i. Som standard tilsvarer det forrige elementet:

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

I dette eksemplet er print.css stilark vil bare bli brukt når dokumentet skrives ut. Dette er en veldig nyttig mekanisme. Vi kan samle all vanlig styling (kanskje fontfamilie 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å stilerklæringer

En ren bakgrunn

Du vil nesten absolutt ikke kaste bort blekk ved å skrive ut en fargerik bakgrunn eller et bakgrunnsbilde. Start med å tilbakestille standardverdiene for disse verdiene som kan være satt i dokumentet:

kropp {
bakgrunn: hvit;
farge svart;
}

Det kan også være lurt å forhindre at bakgrunnsbilder skrives ut - disse skal være dekorative og derfor ikke en nødvendig del av innholdet ditt:

* {
bakgrunnsbilde: ingen! viktig;
}

I slekt: Hvordan sette et bakgrunnsbilde i CSS

Hvordan sette et bakgrunnsbilde i CSS

CSS er et kraftig verktøy for styling av nettsider. Å lære å plassere et bakgrunnsbilde lærer deg mange grunnleggende om CSS.

Kontrollerende marginer

Et annet åpenbart poeng å vurdere når det gjelder utskrift, er sidemargen. Mens CSS gir et middel for å sette marginstørrelse, bør du huske at nettleseren din og skriveren også kan påvirke margininnstillingene.

For eksempel, i utskriftsdialogen i Chrome, er det en marginnstilling som har verdier inkludert ingen og tilpasset som overstyrer alt som er spesifisert via CSS:

Av denne grunn anbefales det å legge marginavgjørelser til leseren på offentlige nettsider. Imidlertid kan det være hensiktsmessig å stille utskriftsmarginer via CSS for personlig bruk eller for å lage et standardoppsett. De @side regel tillater marginer å settes, og bør brukes som følger:

@side {
margin: 2cm;
}

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

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

@side {
margin-venstre: 20mm;
margin-høyre: 20mm;
margin-topp: 40mm;
margin-bunn: 50mm;
}
@side: venstre {
margin-venstre: 30mm;
}
@side: høyre {
margin-høyre: 30mm;
}

Skjuler irrelevant innhold

Ikke alt innhold vil være egnet for en utskriftsversjon av dokumentet. Hvis siden din inneholder bannernavigering, annonser eller et sidefelt, vil du kanskje 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 stil som skiller dem fra omliggende tekst:

a {tekstdekorasjon: ingen; farge: arve; }

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

a [href]: etter {
innhold: "(" attr (href) ")";
skriftstørrelse: 90%;
farge: # 333;
}

Denne CSS gir resultater som følgende:

a [href]: etter spesifikt målretter stillingen etter (:etter) hvert koblingselement (en) som faktisk har en URL ([href]). De innhold erklæring her setter inn verdien av href attributt mellom parenteser. Merk at andre stilregler kan brukes for å kontrollere visningen av det genererte innholdet.

Håndtering av sidebrudd

For å unngå at sideskift etterlater isolert innhold, eller bryter det vanskelig i midten, kan du bruke sideskiftegenskapene: side-break-før, side-break-after og sideinnbrudd. For eksempel:

tabell {sideinnbrudd: unngå; }

Dette bør bidra til å forhindre at tabeller strekker seg over flere sider, forutsatt at ingen er høyere enn en enkelt side. På samme måte:

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

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

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

Vise utskriftsstiler

I alle tilfeller bør nettleseren og operativsystemet tilby en forhåndsvisning av utskrift, ofte som en del av standard utskriftsdialogboksen.

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

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

Bla deretter ned til Etterlign CSS mediatype omgivelser. I rullegardinmenyen kan du veksle mellom utskrifts- og skjermvisninger av dokumentet:

Når du etterligner utskriftsformatet, er standarden Stil 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.

Skrive ut til en PDF

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

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

Skriv ut en rekke dokumenter

Du kan bruke et utskriftsark for å lage kvalitetsdokumenter, inkludert alt fra din CV til oppskrifter eller kunngjøringer om hendelser. Nettsider ser vanligvis stygge ut og inneholder uønskede detaljer når de skrives ut, men et lite antall stiltilpasninger kan forbedre utskriftsresultatene dramatisk. Å lagre de endelige resultatene som en PDF er en rask måte å lage attraktive, profesjonelle dokumenter på.

Slik skriver du 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.

Om forfatteren