10 tips voor betere afdrukstijlen
Stijlpagina 's zijn enigszins vergeten en toch blijven ze belangrijk. Veel mensen printen artikelen om tijdens het reizen te lezen of wanneer ze geen toegang hebben tot internet.
Stijlvellen afdrukken hebben duidelijke voordelen . Bijvoorbeeld, lezen op papier is minder vermoeiend voor de ogen dan lezen op het scherm.
Ook is het volgen van tutorials gemakkelijker als je er een naast je hebt, met je code-editor open op het scherm; op die manier hoeft u niet telkens van venster te wisselen om iets op te zoeken.
In dit artikel wijzen we u 10 eenvoudige tips aan om u te helpen betere afdrukstijlen te maken .
Als u dit bent vergeten, kunt u als volgt een afdrukstijlblad instellen:
De media="print" kenmerk zorgt ervoor dat gebruikers geen van de stijlen zien die zijn gedefinieerd in het bestand print.css .
Er is echter enige aandacht vereist: als uw hoofdstijlblad geen media-attribuut heeft, ervaart het afdrukstijlblad de stijl ervan. Als u ze wilt scheiden, stelt u uw hoofdstijlpagina als volgt in:
Hier zijn 10 tips om aan de slag te gaan met het print stylesheet.
1. Verwijder de navigatie
Wat is het grootste verschil tussen papier en computer? Papier is statisch, terwijl een computer interactief is. En om die interactie te vergemakkelijken, hebben websites navigatie, die op papier nutteloos wordt.
Verberg de navigatie en andere delen van uw website die op papier zinloos worden, zoals zijbalken die naar andere berichten linken. De code hiervoor is heel eenvoudig: stel gewoon de elementen in display naar none .
2. Vergroot het inhoudsgebied
Met de navigatie en zijbalk verwijderd, is onze inhoud nu verspreid over de pagina. Hierdoor lijkt de afdrukstijlpagina meer op een gewoon document, in plaats van op een papieren versie van de website.
Alles wat we moeten doen om de inhoud uit te breiden, is de vlotter opnieuw in te stellen, eventuele marges te verwijderen en de breedte op 100% in te stellen.
[css] #content {width: 100%; margin: 0; float: none;} [/ css]3. Stel de achtergrondkleuren opnieuw in
De meeste browsers negeren achtergrondkenmerken om inkt te besparen. Maar om ervoor te zorgen dat de hele achtergrond wit is, kunnen we het lichaam wit maken en vervolgens elk onderliggende element op de pagina een witte achtergrond geven.
[css] body {background: white;} # content {background: transparent;} [/ css]4. Reset tekstkleuren
Door de achtergrond opnieuw in te stellen, verschijnt er een ander probleem. Wat als u een donkergrijs "Auteurinformatie" -vak aan het einde van uw berichten hebt, met de tekst in lichtgrijs of wit? Met de achtergrond nu ingesteld op wit, zal deze informatie onzichtbaar zijn.
Om dit te verhelpen, verander je van licht gekleurde tekst naar iets donkerder: zwart of bij voorkeur donkergrijs.
[css] #author {color: # 111;} [/ css]
Nemen Sam Brown 's blog hierboven. Kun je je voorstellen hoe dit eruit zou zien als hij de kleuren van de tekst niet opnieuw instelde? Onleesbaar inderdaad.
5. Geef de bestemming van links weer
Omdat papier geen interactief medium is, kunnen lezers natuurlijk niet doorklikken op koppelingen om meer informatie te verzamelen.
Stel dat iemand een print leest over een mooi nieuw product. Zien "Klik hier voor meer informatie" zou opeens nogal irritant voor hen zijn, toch? Dit kan eenvoudig worden opgelost door de linkbestemming toe te voegen na de linktekst zelf, en geeft u zoiets als dit: "Klik hier voor meer informatie (http://hereismore.com/information)."
Wat meer is, voor CSS 2-geschikte browsers, dit kan worden gedaan met gewone oude CSS. Hier is de code:
[css] a: link: after {content: "(" attr (href) ")";} [/ css]Je kunt dingen opfleuren met een kleinere lettergrootte, cursief of wat dan ook.
6. Maak links Onderscheid van reguliere tekst
Lezers moeten links van reguliere tekst kunnen onderscheiden. Basisgebruiksregels zijn hier van toepassing: blauw en onderstrepen hebben de voorkeur, maar ik geef er ook de voorkeur aan vetgedrukt toe te voegen.
Vergeet niet dat documenten vaak in zwart-wit worden afgedrukt. Ben niet alleen afhankelijk van kleurverschil. Hier is de code voor verstandige afgedrukte links:
[css] a: link {font-weight: bold; text-decoration: underline; color: # 06c;} [/ css]# 0066cc is een frisse blauwe kleur en het ziet er uit als # 999999 wanneer afgedrukt in grijstinten. Hierdoor zien de links er goed uit, afgedrukt in kleur of in zwart-wit. Ze zullen ook opvallen in de reguliere tekst.
7. Hoe zit het met de lettergrootte?
In print is 12 punten de norm. Maar hoe vertalen we dat naar CSS? Sommigen zeggen dat het instellen van de lettergrootte op 12 punten (pt) goed genoeg is. Anderen bevelen aan om hem op 100% in te stellen. Weer anderen zeggen dat ze helemaal geen tekengrootte op je print-stylesheet declareren, omdat dit de voorkeuren van de gebruiker zou overschrijven.
Persoonlijk ga ik meestal met een 12-punts lettertype:
[css] p {font-size: 12pt;} [/ css]8. Hoe zit het met lettertypen?
De meeste mensen geven de voorkeur aan serif-lettertypen omdat ze minder vermoeiend zijn voor de ogen, ze kunnen de lezer beter door de tekst leiden, enzovoort. Het instellen van font-family naar serif in uw print stylesheet is waarschijnlijk een goed idee, hoewel sommige lezers verrast kunnen zijn dat het lettertype in hun print-out niet hetzelfde is als dat op uw website.
Hier is de code voor een goede gedrukte lettertypestapel:
[CSS] lichaam {font-family: Georgia, 'Times New Roman', serif;} [/ CSS]
Een van de voordelen van de eigenschap @ font-face CSS 3 is dat uw speciale lettertypen ook kunnen worden afgedrukt, waardoor afdrukken veel meer op uw website lijkt!
9. Mijn blog bevat veel reacties. Wat moet ik doen?
Nou, dit is echt jouw keuze. Denk aan alle bomen die je zou kunnen redden door ze toe te voegen #comments { display: none; } naar uw print stylesheet. Aan de andere kant zijn opmerkingen van grote waarde op sommige blogs en bevatten ze een geweldige discussie.
Door de opmerkingen naar hun eigen pagina te verplaatsen, geeft u gebruikers de keuze of ze moeten worden afgedrukt. CSS heeft een eigenschap die dit heel gemakkelijk maakt:
[css] #comments {page-break-before: always;} [/ css]Als uw artikel bijvoorbeeld twee en een halve pagina lang is, lopen de reacties van pagina 4 tot bijvoorbeeld 6. Gebruikers kunnen kiezen welke pagina's moeten worden afgedrukt, zonder informatie te verliezen.
10. Toon een alleen-lezen bericht
" Bedankt voor het afdrukken van dit artikel! Vergeet alsjeblieft niet om terug te gaan naar mysite.com voor verse artikelen. "Waarom zou u zo'n vriendelijk bericht niet in de print laten zien? Of vraag lezers misschien om het papier te recyclen dat ze hebben gebruikt om het milieu te beschermen.
Hier is hoe dat eruit zou zien:
Bedankt voor het afdrukken van dit artikel. Vergeet alsjeblieft niet om terug te gaan naar mysite.com voor verse artikelen.
[css] #printMsg {display: block;} [/ css] U kunt ook een beetje styling toevoegen, zoals een rand van 1 pixel. Vergeet niet om toe te voegen #printMsg { display: none; } naar uw standaard stylesheet, om verwarrende bezoekers te voorkomen.
vitrine
Hier zijn enkele voorbeelden van bekende websites die hebben nagedacht (of vergeten) over het print stylesheet. Voel je vrij om geïnspireerd te worden.
Ziet er goed uit:
Hier zijn enkele websites die het goed doen met hun print stylesheets:
24 manieren : De website voor deze "adventskalender voor web-geeks" heeft een fraai ontwerp, maar ik vroeg me af hoe het er in de gedrukte vorm uitzag. Het resultaat is echt leuk. De gelikte CSS 3-spullen zijn verwijderd. De lay-out is schoon en toch glad. De grote branding is verwijderd en vervangen door een eenvoudige rechts uitgelijnde '24 manieren' naast de titel van het bericht.
ThinkVitamin : De blog van Carsonified is een goed voorbeeld van hoe je een typogram kunt maken. Geen echte zwakke plekken behalve dat de bestemming van de URL niet wordt getoond.
CSS-Tricks : Chris Coyier van CSS-Tricks.com heeft het goed gedaan met zijn print stylesheet. Hij heeft alle rommel verwijderd en opmerkingen verplaatst naar een nieuwe pagina, zodat gebruikers ervoor kunnen kiezen ze niet af te drukken.
Kan wat werk gebruiken
Hier zijn enkele websites die al geweldig zijn, maar waarvan de stylesheets een beetje Pools kunnen gebruiken. Geen aanstoot aan iemand in deze sectie.
Webdesign Ledger : Webdesign Ledger lijkt zijn print stijlblad te hebben verwaarloosd. Wanneer u op 'Afdrukken' klikt, krijgt u drie pagina's met advertenties en bijbehorende links.
De ontwerpcel : Brian Hoff lijkt zijn printtypeblad ook te zijn vergeten. Wanneer u een artikel afdrukt, krijgt u ook het reactieformulier.
Flickr : Het kunnen afdrukken van foto's om aan vrienden te laten zien zou leuk zijn. Flickr had alles behalve de afbeelding zelf en de copyright-informatie in afdrukken kunnen verwijderen. Maar alles verschijnt in gewone, ongestileerde HTML.
Middelen
- Handige tips voor het maken van een print CSS-stylesheet door Line25
- Stijlvel afdrukken: de definitieve gids
- CSS-ontwerp: gaat afdrukken
- CSS-Tricks krijgt eindelijk een print stylesheet
Exclusief geschreven voor WDD door Pieter Beulque. Hij is een student en webontwikkelaar , woonachtig in België. Je kunt hem volgen tjilpen te.