CSS gebruiken om documenten op te maken voor afdrukken

CSS gebruiken om documenten op te maken voor afdrukken

Als u ooit reserveringen voor tickets of een routebeschrijving naar een hotel van internet heeft afgedrukt, bent u waarschijnlijk niet onder de indruk van de resultaten. U weet daarom misschien niet 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 van inhoud en presentatie. In de eenvoudigste bewoordingen betekent dit in plaats van zeer ouderwetse stilistische opmaak zoals:



Heading

We gebruiken semantische markup:






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

h1 { font-weight: normal; }

Door die stijldeclaraties 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 opnieuw worden gebruikt 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 schermstijlblad, kunnen we een opmaakmodel voor afdrukken specificeren. Een schermstijlblad wordt meestal als volgt meegeleverd:


Maar een extra attribuut, voor de helft , 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 media-attribuut kan echter ook de waarden print en scherm aannemen:


In dit voorbeeld is de print.css stylesheet wordt alleen gebruikt wanneer het document is afgedrukt. Dit is een heel handig mechanisme. We kunnen alle gebruikelijke styling (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 het scheiden van zorgen.



Enkele voorbeelden van stijlverklaringen

Een schone achtergrond

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

body {
background: white;
color: black;
}

Misschien wilt u ook voorkomen dat achtergrondafbeeldingen worden afgedrukt - deze moeten decoratief zijn en daarom geen verplicht onderdeel van uw inhoud:

* {
background-image: none !important;
}

Verwant: Een achtergrondafbeelding instellen in CSS

kan een minderjarige een PayPal-account hebben?

Marges controleren

Een ander voor de hand liggend punt om te overwegen met betrekking tot afdrukken is de paginamarge. Hoewel CSS een manier biedt om de margegrootte 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 zoals: geen en Op maat die alles overschrijft dat via CSS is gespecificeerd:

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 maakt het mogelijk marges in te stellen en moet als volgt worden gebruikt:

@page {
margin: 2cm;
}

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

hoe mac-harde schijf op pc te lezen

Helaas wordt dit slecht ondersteund, vooral de voorbladoptie, 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:

@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}

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 deze details in de gedrukte versie verschijnen, bijvoorbeeld:

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

Hyperlinks zijn uiteraard niet relevant in gedrukt materiaal, dus u wilt waarschijnlijk alle stijlen verwijderen die ze onderscheiden van de omringende tekst:

a { text-decoration: none; color: inherit; }

U wilt echter misschien nog steeds dat lezers toegang hebben tot de originele URL's, en een eenvoudige oplossing is om ze automatisch in te voegen na de gekoppelde tekst:

a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}

Deze CSS geeft de volgende resultaten:

een[href]:na richt zich specifiek op de positie na ( :na ) elk linkelement ( tot ) die daadwerkelijk een URL heeft ( [href] ). De inhoud declaratie voegt hier de waarde van de . in 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 ongemakkelijk in het midden breken: pagina-einde-voor , pagina-einde-na en pagina-einde-binnen . Bijvoorbeeld:

table { page-break-inside: avoid; }

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

h1, h2 { page-break-before: always; }

Dit betekent dat dergelijke kopjes altijd een nieuwe pagina beginnen. Het kan echter problemen opleveren als je de h1 van je pagina meteen volgt met een h2, aangezien de h1 vanzelf op een pagina terechtkomt. Om dit te voorkomen, annuleert u eenvoudig het pagina-einde met een selector die op die specifieke instantie is gericht, bijvoorbeeld:

hoe te booten van iso op usb
h1 + h2 { page-break-before: avoid; }

Afdrukstijlen bekijken

In alle gevallen moeten uw browser en besturingssysteem een ​​afdrukvoorbeeldfunctie bieden, vaak als onderdeel van het standaard afdrukvenster.

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

Selecteer in het nieuwe paneel dat verschijnt Menu , dan Meer hulpmiddelen , gevolgd door weergave :

Scroll dan naar beneden naar de CSS-mediatype emuleren instelling. Met de vervolgkeuzelijst kunt u schakelen tussen de afdruk- en schermweergave van uw document:

Bij het emuleren van het afdrukstijlblad is de standaard Stijlen browser is beschikbaar om de live-stijlregels te inspecteren en te wijzigen. 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 handige functie 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 verzonden - geen echte verrassing, aangezien een PDF-bestand tenslotte een afgedrukt document moet vertegenwoordigen.

Dit maakt HTML, in combinatie met een printstylesheet, een uitstekend middel om een ​​hoogwaardig document te maken dat als bijlage kan worden verzonden, maar ook kan worden afgedrukt.

Je kunt een printstylesheet gebruiken om kwaliteitsdocumenten te maken, inclusief alles van je 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 drastisch verbeteren. Het opslaan van de eindresultaten als PDF is een snelle manier om aantrekkelijke, professionele documenten te maken.

Deel Deel Tweeten E-mail Webpagina's naar PDF afdrukken met Microsoft Edge

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

Lees volgende Gerelateerde onderwerpen
  • Programmeren
  • Afdrukken
  • CSS
Over de auteur Bobby Jack(58 artikelen gepubliceerd)

Bobby is een technologie-enthousiasteling die bijna twee decennia als softwareontwikkelaar heeft gewerkt. Hij is gepassioneerd door gaming, werkt als recensie-editor bij Switch Player Magazine en is ondergedompeld in alle aspecten van online publiceren en webontwikkeling.

Meer van Bobby Jack

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren