10 tips for bedre utskriftsstilark
Skriv ut stilark har blitt noe glemt, og likevel forblir de viktige alle sammen. Mange skriver ut artikler som skal leses mens de reiser, eller når de ikke har tilgang til Internett.
Skriv ut stilark har bestemte fordeler . For eksempel er lesing på papir mindre slitsomt på øynene enn å lese på skjermen.
Også følgende opplæringsprogrammer er enklere hvis du har en ved siden av deg, med kodeditoren din åpen på skjermen; På den måten trenger du ikke å bytte vinduer hver gang for å se noe opp.
I denne artikkelen vil vi påpeke 10 enkle tips som vil hjelpe deg med å lage bedre utskriftsstilark .
Hvis du har glemt, kan du sette opp et utskriftsformatark:
De media="print" Attributtet sikrer at brukerne ikke ser noen av stilene som er definert i filen print.css .
Noen oppmerksomhet er påkrevd, skjønt: hvis ditt hoved stilark ikke har et medieattributt, vil utskriftsformatarket arve sin stil. For å skille dem, sett ditt hoved stilark som følger:
Her er 10 tips for å komme i gang med utskriftsformatarket.
1. Fjern navigasjonen
Hva er hovedforskjellen mellom papir og datamaskin? Papiret er statisk, mens en datamaskin er interaktiv. Og for å lette denne samspillet har nettsteder navigering, som blir ubrukelig på papir.
Skjul navigasjons- og andre deler av nettstedet ditt som blir meningsløst på papir, for eksempel sidebjelker som lenker til andre innlegg. Koden for dette er veldig enkelt: bare sett elementets display til none .
2. Forstør innholdsområdet
Med navigering og sidebar fjernet, er innholdet vårt nå spredt over hele siden. Dette gjør at utskriftsformatet ser mer ut som et vanlig dokument, i stedet for en papirversjon av nettstedet.
Alt vi trenger å gjøre for å utvide innholdet, tilbakestilles flyten, fjern eventuelle marginer og sett bredden til 100%.
[css] # content {width: 100%; margin: 0; float: none;} [/ css]3. Tilbakestill bakgrunnsfarger
De fleste nettlesere ignorerer allerede bakgrunnsegenskaper for å bevare blekk. Men for å sikre at hele bakgrunnen er hvit, kan vi sette kroppen til hvit, og deretter gi hvert barnelement fortsatt på siden en hvit bakgrunn.
[css] kropp {bakgrunn: hvit;} # innhold {bakgrunn: transparent;} [/ css]4. Tilbakestill tekstfarger
Ved å tilbakestille bakgrunnen, kommer et annet problem opp. Hva om du har en mørkegrå "Forfatterinformasjon" -boks på slutten av innleggene dine, med teksten i lysegrå eller hvit? Med bakgrunnen nå satt til hvit, vil denne informasjonen være usynlig.
For å fikse dette, endrer du lyse tekst til noe mørkere: svart eller helst mørkegrå.
[css] #author {color: # 111;} [/ css]
Ta Sam Brown bloggen over. Kan du forestille deg hvordan dette ville se ut hvis han ikke tilbakestilte tekstens farger? Ureadable faktisk.
5. Vis destinasjonen til koblinger
Fordi papir ikke er et interaktivt medium, kan leserne selvfølgelig ikke klikke på koblinger for å samle mer informasjon.
Si at noen leser en utskrift om et fancy nytt produkt. Å se "Klikk her for mer informasjon" plutselig ville være ganske irriterende for dem, ikke sant? Dette løses enkelt ved å legge til linkdestinasjonen etter selve koblingsteksten, noe som gir deg noe slikt: "Klikk her for mer informasjon (http://hereismore.com/information)."
Hva mer, for CSS 2-klare nettlesere, kan dette gjøres med vanlig gammel CSS. Her er koden:
[css] a: link: etter {innhold: "(" attr (href) ")";} [/ css]Du kan krydre opp ting med en mindre skriftstørrelse, kursiv eller hva som helst annet.
6. Gjør linkene stående ut fra vanlig tekst
Leserne må kunne skille lenker fra vanlig tekst. Grunnleggende bruksregler gjelder her: Blått og understrekking er foretrukket, men jeg foretrekker å legge til fet skrift også.
Husk at dokumenter ofte skrives ut i svart og hvitt. Ikke bare avhengig av fargeforskjell. Her er koden for fornuftige utskriftskoblinger:
[css] a: link {font-weight: bold; text-decoration: understreke; farge: # 06c;} [/ css]# 0066cc er en frisk blå farge, og det ser ut som # 999999 når den skrives ut i gråtoner. Med dette vil koblingene se bra ut enten i farge eller i svart / hvitt. De vil også skille seg ut fra vanlig tekst.
7. Hva om fontstørrelse?
I utskrift er 12 poeng standarden. Men hvordan oversetter vi det til CSS? Noen sier at innstillingen av skriftstørrelsen til 12 poeng (pt) er god nok. Andre anbefaler å sette det til 100%. Enda andre sier at de ikke erklærer noen skriftstørrelse i utskriftsformatarket i det hele tatt, fordi dette ville tilsidesette brukerens preferanser.
Personlig går jeg med en 12-punkts skriftstørrelse mesteparten av tiden:
[css] p {font-size: 12pt;} [/ css]8. Hva om skrifttyper?
De fleste foretrekker seriffonter fordi de er mindre slitsomme på øynene, de leder bedre leseren gjennom teksten og så videre. Innstilling av font-family til serif i utskriftsformatarket ditt er sannsynligvis en god ide, selv om enkelte lesere kan bli overrasket over å finne ut at skrifttypen i utskriften ikke er den samme som den på nettstedet ditt.
Her er koden for en god skrivefont stack:
[css] body {font-family: Georgia, "Times New Roman", serif;} [/ css]
En av fordelene med CSS 3s @ font-face-egenskapen er at dine spesielle skrifttyper kan skrives ut, og at utskriftene ser mye mer ut som nettstedet ditt!
9. Min blogg har mange kommentarer. Hva burde jeg gjøre?
Vel, dette er virkelig ditt valg. På den ene siden tenk på alle trærne du ville spare, bare ved å legge til #comments { display: none; } til utskriftsstilbladet. På den annen side er kommentarer av stor verdi på noen blogger og inneholder en god diskusjon.
Ved å flytte kommentarene til sin egen side, gir du brukerne muligheten til å skrive ut dem. CSS har en eiendom som gjør dette veldig enkelt:
[css] #kommentarer {side-break-før: alltid;} [/ css]Hvis for eksempel artikkelen din er to og en halv side lang, vil kommentarene løpe fra side 4 til, for eksempel, 6. Brukere vil kunne velge hvilke sider som skal skrives ut uten å miste informasjon.
10. Vis en skrivebeskyttet melding
" Takk for at du skriver ut denne artikkelen! Vennligst ikke glem å komme tilbake til mysite.com for friske artikler. "Hvorfor ikke vise en vennlig melding som dette i utskriften? Eller spør leserne om å resirkulere papiret de har brukt til å bevare miljøet.
Her er det som ville se ut:
Takk for at du skriver ut denne artikkelen. Vennligst ikke glem å komme tilbake til mysite.com for friske artikler.
[css] #printMsg {display: block;} [/ css] Du kan også legge til litt styling, som en 1-pikslet kantlinje. Ikke glem å legge til #printMsg { display: none; } til ditt vanlige stilark, for å unngå forvirrende besøkende.
Vise frem
Her er noen eksempler fra kjente nettsteder som har tenkt (eller glemt) om utskriftsformatarket. Du er velkommen til å bli inspirert.
Ser bra ut:
Her er noen nettsteder som gjør en god jobb med sine utskriftsformatark:
24 måter : Nettstedet for denne "adventskalenderen for web geeks" har en fancy design, men jeg lurte på hvordan det ville se ut i print. Resultatet er veldig fint. Den slanke CSS 3-tingene har blitt fjernet. Oppsettet er rent og likevel flatt. Den store merkevaren har blitt fjernet, erstattet av en enkel rettjustert "24 måter" ved siden av postens tittel.
ThinkVitamin : Carsonified's blogg er et godt eksempel på hvordan du gjør utskriftstypeblad. Ingen ekte svake punkter, bortsett fra at nettadressens destinasjon ikke vises.
CSS-triks : Chris Coyier av CSS-Tricks.com har gjort en god jobb med sin utskriftstilke. Han har fjernet all rot og flyttet kommentarer til en ny side, slik at brukerne kan velge å ikke skrive ut dem.
Kunne bruke noe arbeid
Her er noen nettsteder som allerede er flotte, men hvis utskriftsstilark kan bruke litt polsk. Ikke fornærmet noen i denne delen.
Webdesign Ledger : Webdesign Ledger ser ut til å ha forsømt sin utskriftsformat. Når du klikker på "Skriv ut", slutter du med tre sider med annonser og relaterte lenker.
Design Cubicle : Brian Hoff ser ut til å ha glemt sitt utskriftstilark. Når du skriver ut en artikkel, får du også kommentarskjemaet.
Flickr : Å kunne skrive ut bilder for å vise til venner, ville være fint. Flickr kunne ha fjernet alt annet enn selve bildet og opphavsretten i utskrifter. Men alt vises i ren, uformet HTML.
ressurser
- Praktiske tips for å lage et CSS-stilark av Line25
- Skriv ut stilark: Den endelige veiledningen
- CSS Design: Skriver ut
- CSS-Tricks får til slutt et utskriftsformat
Skrevet utelukkende for WDD av Pieter Beulque. Han er en student og webutvikler , bosatt i Belgia. Du kan følge ham på Twitter også.