headershadow

Latest Blogposts

Hoe krijg je de URL in beeld bij printen?

Wanneer je een webpagina wilt printen kun je heel wat instellingen van de website aanpassen met CSS. Je gebruikt hiervoor een specifiek stijlblad waarbij je alle gegevens voor het te printen geheel invoegt.

Hoe je dat doet lees je in een artikel over CSS voor het printen van je website.

Een van de onderdelen die het printen lastig maakt zijn de verschillende links die je gebruikt. Deze links komen er gewoon als tekst in te staan terwijl, wanneer de gebruiker print, het veel gemakkelijker is als er een complete URL gedrukt staat.

De gebruiker weet dan alsnog welke link hij of zij kan bezoeken.

Print stylesheet

Dit kun je op een eenvoudige manier aan je print stylesheet toevoegen. Hoe je dat doet? In onderstaande video leg ik het allemaal uit, maar daarna krijg je de codes ook nog eens.

Als eerste de gewone html code voor de webpagina.




	
	


Op HTML-site vind je meerdere handige tutorials over bijvoorbeeld CSS

In de head plaats je vervolgens de CSS code voor de printversie van je website. Dit kun je overigens ook in een extern stijlblad plaatsen.

Afkorting voluit weergeven

De tweede mogelijkheid is om bij het printen een afkorting voluit weer te geven. In het geval van ons voorbeeld een abbreviatie.

Een afkorting kan wel eens onduidelijkheid oproepen en met het title attribuut (niet verwarren met het title element) kun je de gehele afkorting uitschrijven. Met de volgende CSS code wordt de afkorting voluit geprint.

abbr:after {
content: " (" attr(title) ") "; }

Het resultaat van bovenstaande codes kun je terugzien in de video.