Add QR Codes To Web Pages Automatically For Easy Link References From Printed Copies

In this author’s humble opinion, most QR Codes are acne in print. However, there are a few places where the ubiquitous digital codes may be appropriate, even useful… one of those being CSS print stylesheets.

Previously I’ve shown how to add visible URLs after links on printed web pages. While this works, the technique requires the reader to type in the supplied URL manually. If we provide a QR code instead, the user can easily scan the digital information from the printed page and go directly to the link, as shown below:

For this example, I’ll generate a QR code using the Google Charts API. The API has just four required components:

The entire query string will take the following format:

https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=<url>&choe=UTF-8

I’d typically present the QR code at the top of the page, just after the opening h1 element, which will usually contain a link to the current document. As an example, I’ll use the URL and title for the previous article in this blog.

<h1><a href=/blog/613/Create-A-SilkScreen Effect">Create a Silkscreen Effect For Images With CSS3</a></h1>

If your site only consisted of a few pages, you could hardcode the QR code as generated content within an embedded style for each page. Obviously we don't want the QR code to appear on the screen version of the page, so we’ll wrap the QR code generator in an @media print query:

<style>

@media print { 

h1 { margin-right: 200px; margin-bottom: 2rem; line-height: 1.2; }

h1 a:after { content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://demosthenes.info/blog/613/Create-A-SilkScreen-Effect&choe=UTF-8); position: absolute; right: 0; top: 0;  }

}

</style>

The printed result would look like the screenshot at the top of this page. Note that I've provided the <h1> element with a margin on the right side so that long title headings do not print over the absolutely positioned QR code in the top right corner of the page.

If you had a large site, coding URLs by hand to generate a QR code for each page would be very inefficient. Alternatively, assuming you were using PHP, you could generate the URL of the current page for the Google API while keeping the CSS as an embedded style:

<style>

@media print { 

h1 { margin-right: 200px; margin-bottom: 2rem; line-height: 1.2; }

h1 a:after { content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>&choe=UTF-8); position: absolute; right: 0; top: 0;  }

}

</style>

These automatically generated QR codes will ensure that visitors can easily return to the appropriate URL of a page by scanning the printed copy, rather than manually entering an easily-mistyped address.