10 tips til bedre print stilark
Udskrivning stilark er blevet noget glemt, og alligevel forbliver de alle vigtige. Mange udskriver artikler, der skal læses under rejsen, eller når de ikke har adgang til internettet.
Udskriv stilark har bestemte fordele . For eksempel er læsning på papir mindre trættende på øjnene end læsning på skærmen.
Følgende tutorials er også nemmere, hvis du har en ved siden af dig, med din kodeditor åben på skærmen; På den måde behøver du ikke skifte vinduer hver gang for at se noget op.
I denne artikel vil vi påpege 10 enkle tip, der kan hjælpe dig med at oprette bedre udskriftsformatark .
I tilfælde af at du har glemt, er det sådan, hvordan du opretter et udskriftsark:
Det media="print" attribut sikrer, at brugerne ikke ser nogen af de stilarter, der er defineret i filen print.css .
Nogle opmærksomhed er dog påkrævet, selvom: hvis dit primære stilark ikke har nogen mediefunktion, vil udskriftsformatarket arve sin stil. For at adskille dem skal du angive dit primære stilark som følger:
Her er 10 tips til at komme i gang med udskriftsformatarket.
1. Fjern navigationen
Hvad er den vigtigste forskel mellem papir og computer? Papir er statisk, mens en computer er interaktiv. Og for at lette denne interaktion har hjemmesider navigation, hvilket bliver ubrugeligt på papir.
Skjul navigationen og andre dele af dit websted, der bliver meningsløse på papir, såsom sidebjælker, der linker til andre indlæg. Koden til dette er meget let: bare indstil elementets display til none .
2. Forstør indholdsområdet
Når navigations- og sidebjælken er fjernet, spredes vores indhold nu på tværs af siden. Dette gør udskriftsarket mere likt et almindeligt dokument, i stedet for en papirversion af hjemmesiden.
Alt vi skal gøre for at udvide indholdet er nulstil float, fjern eventuelle margener og indstil bredden til 100%.
[css] # content {width: 100%; margin: 0; float: none;} [/ css]3. Nulstil baggrundsfarverne
De fleste browsere ignorerer allerede baggrundsegenskaber for at bevare blæk. Men for at sikre, at hele baggrunden er hvid, kan vi sætte kroppen til hvid, og derefter give hvert barnelement stadig på siden en hvid baggrund.
[css] krop {baggrund: hvid;} # indhold {baggrund: transparent;} [/ css]4. Nulstil tekstfarver
Ved at nulstille baggrunden fremkommer et andet problem. Hvad hvis du har en mørkegrå "Forfatterinformation" boks i slutningen af dine indlæg, med teksten i lysegrå eller hvid? Med baggrunden nu indstillet til hvid, vil disse oplysninger være usynlige.
For at løse dette skal du ændre enhver lyse tekst til noget mørkere: sort eller helst mørkegrå.
[css] #author {farve: # 111;} [/ css]
Tage Sam Brown s blog ovenfor. Kan du forestille dig, hvordan dette ville se ud, hvis han ikke nulstillede tekstens farver? Ureadable faktisk.
5. Vis destinationen for links
Da papir ikke er et interaktivt medium, kan læsere selvfølgelig ikke klikke på links for at indhente flere oplysninger.
Sig, at nogen læser en udskrift om et nyt nyt produkt. Se "Klik her for mere information" ville pludselig være ret irriterende for dem, ville det ikke? Dette kan nemt løses ved at tilføje linkdestinationen efter selve linktekstteksten, hvilket giver dig noget som dette: "Klik her for mere information (http://hereismore.com/information)."
Hvad mere er for CSS 2-klare browsere, kan dette gøres med almindeligt gammelt CSS. Her er koden:
[css] a: link: efter {indhold: "(" attr (href) ")";} [/ css]Du kan krydre tingene med en mindre skriftstørrelse, kursiv eller hvad som helst andet.
6. Lav Links Stand Out fra almindelig tekst
Læsere skal være i stand til at skelne links fra almindelig tekst. Grundlæggende anvendelighedsregler gælder her: Blå og understregning foretrækkes, men jeg foretrækker også at tilføje modige.
Husk at dokumenter ofte udskrives i sort / hvid. Ikke kun afhænge af farveforskel. Her er koden for fornuftige trykte links:
[css] a: link {font-weight: bold; text-decoration: understrege; farve: # 06c;} [/ css]# 0066cc er en frisk blå farve, og det ligner # 999999, når den er trykt i gråtoner. Med dette vil linkene se godt ud i farver eller i sort / hvid. De vil også skille sig ud fra almindelig tekst.
7. Hvad med skrifttype?
I print er 12 point standarden. Men hvordan oversætter vi det til CSS? Nogle siger at sætte skriftstørrelsen til 12 point (pt) er god nok. Andre anbefaler at sætte det på 100%. Endnu andre siger ikke at erklære nogen skriftstørrelse i dit print stilark overhovedet, fordi det ville tilsidesætte brugerens præferencer.
Personligt går jeg med en 12-punkts skriftstørrelse det meste af tiden:
[css] p {font-size: 12pt;} [/ css]8. Hvad om skrifttyper?
De fleste foretrækker serif skrifttyper, fordi de er mindre trættende på øjnene, de fører bedre læseren gennem teksten og så videre. Indstilling af font-family til serif i dit print stilark er sandsynligvis en god ide, selvom nogle læsere kan blive overrasket over at finde ud af, at skrifttypen i deres udskrift ikke er den samme som den på din hjemmeside.
Her er koden til en god skrifttypestabel:
[css] krop {font-family: Georgia, 'Times New Roman', serif;} [/ css]
En af fordelene ved CSS 3s @ font-face-egenskab er, at dine specielle skrifttyper kan udskrives, og at udskrifterne ser meget mere ud som din hjemmeside!
9. Min blog har mange kommentarer. Hvad skal jeg gøre?
Nå, det er virkelig dit valg. På den ene side tænker på alle de træer, du vil spare, bare ved at tilføje #comments { display: none; } til dit print stilark. På den anden side er kommentarer af stor værdi på nogle blogs og indeholder nogle gode diskussioner.
Ved at flytte kommentarerne til deres egen side giver du brugerne mulighed for at udskrive dem. CSS har en ejendom, der gør det meget nemt:
[css] #comments {side-break-before: always;} [/ css]Hvis din artikel f.eks. Er to og en halv side lang, vil kommentarerne løbe fra side 4 op til, f.eks. 6. Brugere vil kunne vælge, hvilke sider der skal udskrives uden at miste nogen oplysninger.
10. Vis en skrivebeskyttet besked
" Tak for udskriften af denne artikel! Glem ikke at komme tilbage til mysite.com for friske artikler. "Hvorfor ikke vise en venlig besked som denne i udskrivningen? Eller måske bede læsere om at genbruge det papir, de har brugt til at bevare miljøet.
Her er hvad det ville se ud:
Tak for, at du udskriver denne artikel. Glem ikke at komme tilbage til mysite.com for friske artikler.
[css] #printMsg {display: block;} [/ css] Du kan også tilføje en smule styling, som en 1-pixel grænse. Glem ikke at tilføje #printMsg { display: none; } til dit almindelige stilark for at undgå forvirrende besøgende.
Udstillingsvindue
Her er nogle eksempler fra kendte hjemmesider, der har tænkt (eller glemt) om udskriftsarket. Du er velkommen til at blive inspireret.
Ser godt ud:
Her er nogle hjemmesider, der gør et godt stykke arbejde med deres udskriftsformatark:
24 måder : Webstedet for denne "adventskalender for web geeks" har et fancy design, men jeg spekulerede på, hvordan det ville se ud i print. Resultatet er rigtig flot. Den slanke CSS 3 ting er blevet fjernet. Layoutet er rent og alligevel glat. Den store branding er blevet fjernet, erstattet af en simpel retjusteret "24 måder" ved siden af postens titel.
ThinkVitamin : Carsonified's blog er et godt eksempel på, hvordan man laver udskrifts stilark. Ingen rigtige svage punkter, bortset fra at webadressens destination ikke vises.
CSS-Tricks : Chris Coyier fra CSS-Tricks.com har gjort et godt stykke arbejde med sit udskriftsark. Han har fjernet alle rod og flyttet kommentarer til en ny side, så brugerne kan vælge ikke at udskrive dem.
Kunne bruge noget arbejde
Her er nogle hjemmesider, der allerede er gode, men hvis print stilark kunne bruge lidt polsk. Ingen lovovertrædelse for nogen i dette afsnit.
Webdesign Ledger : Webdesign Ledger synes at have forsømt sit print stilark. Når du klikker på "Udskriv", slutter du med tre sider med annoncer og relaterede links.
Design Cubicle : Brian Hoff synes også at have glemt hans udskriftsark. Når du udskriver en artikel, får du også kommentarformularen.
Flickr : At være i stand til at udskrive fotos til at vise til venner ville være rart. Flickr kunne have fjernet alt, men billedet selv og ophavsretsoplysningerne i udskrifter. Men alt vises i ren, uformet HTML.
Ressourcer
- Praktiske tips til oprettelse af et CSS-typografiark ved linje25
- Udskriv stilark: Den endelige vejledning
- CSS Design: Går at udskrive
- CSS-Tricks får endelig et udskriftsark
Skrevet udelukkende til WDD af Pieter Beulque. Han er en studerende og web-udvikler , der bor i Belgien. Du kan følge ham videre Twitter også.