Als u ooit via internet ticketreserveringen of een routebeschrijving naar een hotel heeft afgedrukt, bent u waarschijnlijk niet onder de indruk van de resultaten. Het kan daarom zijn dat u zich niet bewust bent dat afgedrukte documenten op vrijwel dezelfde manier kunnen worden opgemaakt als op het scherm, met behulp van Cascading Style Sheets (CSS).

Scheiding van zorgen

Een belangrijk voordeel van CSS is de scheiding tussen inhoud en presentatie. In de eenvoudigste bewoordingen betekent dit in plaats van zeer ouderwetse stilistische markeringen zoals:

Rubriek

We gebruiken semantische opmaak:

Rubriek

Dit is niet alleen veel schoner, het betekent ook dat onze presentatie gescheiden is van onze inhoud. Browsers renderen h1 elementen als standaard grote, vetgedrukte tekst, maar we kunnen die stijl op elk moment wijzigen met een stylesheet:

h1 {font-weight: normal; }

Door die stijlverklaringen in een apart bestand te verzamelen en naar dat bestand te verwijzen vanuit ons HTML-document, kunnen we nog beter gebruik maken van scheiding. Het stijlblad kan worden hergebruikt en we kunnen dat ene bestand op elk moment wijzigen om de opmaak bij te werken in elk document dat het gebruikt.

Inclusief een afdrukstijlblad

Op dezelfde manier als het opnemen van een stijlpagina op het scherm, kunnen we een stijlpagina specificeren om af te drukken. Een stijlblad voor het scherm wordt meestal als volgt meegeleverd:

Een extra kenmerk, media, maakt targeting mogelijk op basis van de context waarin het document wordt weergegeven. Standaard is het vorige element gelijk aan:

Dit betekent dat de stylesheet wordt toegepast op elk medium waarin het document wordt weergegeven. Het mediaattribuut kan echter ook afdruk- en schermwaarden aannemen:

In dit voorbeeld is de print.css stylesheet wordt alleen gebruikt als het document is afgedrukt. Dit is een erg handig mechanisme. We kunnen alle gangbare stijlen (misschien lettertypefamilie of regelafstand) verzamelen in een stylesheet die van toepassing is op alle media, en mediaspecifieke opmaak in individuele stylesheets. Nogmaals, dit is een ander gebruik van scheiding van zorgen.

Enkele voorbeeldstijlverklaringen

Een schone achtergrond

U wilt vrijwel zeker geen inkt verspillen aan het afdrukken van een kleurrijke achtergrond of een achtergrondafbeelding. Begin met het resetten van eventuele standaardwaarden voor deze waarden die mogelijk in uw document zijn ingesteld:

lichaam {
achtergrond: wit;
de kleur zwart;
}

U kunt ook voorkomen dat achtergrondafbeeldingen worden afgedrukt. Deze moeten decoratief zijn en daarom geen verplicht onderdeel van uw inhoud:

* {
achtergrondafbeelding: geen! belangrijk;
}

Verwant: Hoe u een achtergrondafbeelding instelt in CSS

Hoe u een achtergrondafbeelding instelt in CSS

CSS is een krachtig hulpmiddel voor het stylen van webpagina's. Door te leren hoe u een achtergrondafbeelding plaatst, leert u veel CSS-basisprincipes.

Marges beheren

Een ander voor de hand liggend punt bij het afdrukken is de paginamarge. Hoewel CSS een manier biedt om de marge in te stellen, moet u er rekening mee houden dat uw browser en printer ook de marge-instellingen zelf kunnen beïnvloeden.

In het afdrukdialoogvenster van Chrome is er bijvoorbeeld een marge-instelling met waarden als geen en Op maat die alles wat gespecificeerd is via CSS zal overschrijven:

Om deze reden wordt aanbevolen om margebeslissingen op openbare webpagina's aan de lezer over te laten. Voor persoonlijk gebruik of voor het maken van een standaardlay-out kan het echter geschikt zijn om afdrukmarges in te stellen via CSS. De @bladzijde regel staat het instellen van marges toe, en moet als volgt worden gebruikt:

@bladzijde {
marge: 2cm;
}

CSS heeft ook de capaciteit voor meer geavanceerde afdruklay-outs, zoals het variëren van de marge naargelang de pagina een oneven nummer (rechts), even nummer (links) of het omslagblad is.

Helaas wordt dit slecht ondersteund, vooral de omslagpagina-optie, maar het kan in minimale mate worden gebruikt. De volgende stijlen produceren pagina's met iets grotere ondermarges dan boven en iets grotere marges aan de buitenste paginarand dan de rug:

@bladzijde {
marge-links: 20 mm;
marge-rechts: 20 mm;
marge-boven: 40 mm;
marge-onder: 50 mm;
}
@pagina: links {
marge-links: 30 mm;
}
@page: right {
marge-rechts: 30 mm;
}

Irrelevante inhoud verbergen

Niet alle inhoud is geschikt voor een gedrukte versie van uw document. Als uw pagina bannernavigatie, advertenties of een zijbalk bevat, wilt u misschien voorkomen dat die details in de gedrukte versie verschijnen, bijvoorbeeld:

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

Hyperlinks zijn duidelijk niet relevant in gedrukt materiaal, dus u zult waarschijnlijk alle stijlen willen verwijderen die ze onderscheiden van omringende tekst:

een {tekstversiering: geen; kleur: erven; }

Het kan echter zijn dat u wilt dat lezers toegang hebben tot de originele URL's, en een eenvoudige oplossing is om ze automatisch in te voegen na de gelinkte tekst:

a [href]: na {
content: "(" attr (href) ")";
lettergrootte: 90%;
kleur: # 333;
}

Deze CSS geeft resultaten zoals de volgende:

een [href]: na richt zich specifiek op de positie na (:na) elk linkelement (een) die daadwerkelijk een URL heeft ([href]). De inhoud declaratie hier voegt de waarde van de href attribuut tussen haakjes. Merk op dat andere stijlregels kunnen worden toegepast om de weergave van de gegenereerde inhoud te regelen.

Omgaan met pagina-einden

Gebruik de eigenschappen voor pagina-einde om te voorkomen dat pagina-einden geïsoleerde inhoud achterlaten of deze onhandig in het midden onderbreken: pagina-einde-ervoor, pagina-einde-na en pagina-einde-binnen. Bijvoorbeeld:

tabel {pagina-einde-binnen: vermijden; }

Dit zou moeten helpen voorkomen dat tabellen meerdere pagina's beslaan, op voorwaarde dat er geen groter is dan een enkele pagina. Evenzo:

h1, h2 {pagina-einde-voor: altijd; }

Dit betekent dat dergelijke koppen altijd een nieuwe pagina beginnen. Het kan echter problemen veroorzaken als u de h1 van uw pagina onmiddellijk volgt met een h2, aangezien de h1 helemaal vanzelf op een pagina terechtkomt. Om dit te voorkomen, annuleert u eenvoudig het pagina-einde met behulp van een selector die op dat specifieke exemplaar is gericht, bijvoorbeeld:

h1 + h2 {pagina-einde-voor: vermijden; }

Afdrukstijlen bekijken

In alle gevallen moeten uw browser en besturingssysteem een ​​functie voor afdrukvoorbeeld bieden, vaak als onderdeel van het standaardafdrukdialoogvenster.

De Chrome-browser maakt het gemakkelijker om uw printstijlen te controleren en zelfs te debuggen via Developer Tools, zoals blijkt uit dit voorbeeld met een cv met een printstijlblad. Open eerst het hoofdmenu en selecteer Meer tools gevolgd door de Developer Tools optie:

Selecteer in het nieuwe paneel dat verschijnt Menu, vervolgens Meer tools, gevolgd door Renderen:

Scrol vervolgens omlaag naar het Emuleer CSS-mediatype instelling. Met de vervolgkeuzelijst kunt u schakelen tussen de afdrukweergave en schermweergave van uw document:

Bij het emuleren van de print stylesheet is de standard Stijlen browser is beschikbaar om de live stijlregels te inspecteren en aan te passen. Houd er rekening mee dat het emuleren van afdrukuitvoer op een scherm nog steeds niet 100% nauwkeurig is. De browser weet niets over het papierformaat en de @bladzijde regel kan niet worden geëmuleerd.

Afdrukken naar een pdf

Een handig kenmerk van moderne besturingssystemen is de mogelijkheid om af te drukken naar een pdf-bestand. In feite kan alles wat u kunt afdrukken in plaats daarvan naar een pdf-bestand worden gestuurd - geen echte verrassing aangezien een pdf-bestand tenslotte een gedrukt document zou moeten vertegenwoordigen.

Dit maakt HTML, in combinatie met een print stylesheet, een uitstekend middel om een ​​kwalitatief hoogstaand document te creëren dat zowel als bijlage als geprint kan worden verzonden.

Druk verschillende documenten af

U kunt een afdrukstijlblad gebruiken om kwaliteitsdocumenten te maken, van alles van uw cv tot recepten of aankondigingen van evenementen. Webpagina's zien er meestal lelijk uit en bevatten ongewenste details wanneer ze worden afgedrukt, maar een klein aantal stijlaanpassingen kan de afdrukresultaten aanzienlijk verbeteren. Het opslaan van de eindresultaten als pdf is een snelle manier om aantrekkelijke, professionele documenten te maken.

Webpagina's afdrukken naar PDF met Microsoft Edge

Ben je ooit een interessant artikel tegengekomen dat je voor later wilde bewaren? Welnu, u kunt in drie eenvoudige stappen opslaan als PDF met Edge.

Over de auteur