Website Tools

Free consultancy on your website to help decide if our services are suitable

Contact North Square using our online form

Client News

Chelmsford Council

North Square completes an evaluation of Chelmsford Borough Council. We have worked for over 60 local authorities in the United Kingdom. View major clients, testimonials, and request references in our Client Portfolio.
(April 2012)

Newsletter

North Square's website best practice newsletter provides updates on our latest research articles and recommended tools. We encourage you to look at our sample newsletter.

Creating Printer-friendly Pages with Cascading Style Sheets (CSS)

<< Back to Resources Index

02 August 2009

The History of Printing Web Pages

Web developers have always had to ensure that their pages were viewable on screens at 800 by 600 resolution (width by height) and above. The problem with 800 by 600 is that most printers cannot print objects beyond 500 to 600 pixels across on standard A4 or legal letter paper.

Some web developers just ignore the problem of printing. Others create printer-friendly links on the page that are narrower. These links are designed to replace the use of the Print function in the user's browser. These printer-friendly pages are either:

Unique printable HTML files.
Printable pages that intelligently reference the text from the screen version of the page (using e.g. ASP, PHP), but use a different layout (which is narrower etc).

The problem with these techniques are:

Both techniques are time consuming to programme.
Unique HTML files in their own right are time consuming to update (when content on the screen page needs changing, the HTML printable page file needs changing as well).
Both techniques require links on the website which add to page clutter (and consume space that could be used more usefully).
These techniques have probably been used because printing the page using the function in the browser cuts the right edge of the page off.

With the advent of Cascading Style Sheets (CSS), developers can now create a specific print-friendly CSS file. The screen version of the page can be modified so that all objects fit onto standard print paper. Developers do not need to update 2 different pages and users can print pages using the function in the browser.

Differentiating Screen and Printer-Friendly Pages

In our Website Evaluation Reports, we recommend that printable pages differ from screen pages in the following ways:

All navigation should be removed.
There should be minimal amounts of graphics and colour.
All background colours should be removed or changed to white.
Ensure that all text is converted to a dark colour or black and contrasts sufficiently from the background.
Variable width dimensions are ideal because the page will scale to fit whatever paper size the user is printing on.
Fixed width pages should not exceed 500 horizontal pixels.
Printer-friendly pages should display a telephone number or email address so that users can make contact with the organisation without needing to view the website again.
With CSS 3, developers can now display the address of links on their printer-friendly pages.

In the next section we discuss how to code some of the above.

CSS Print-Friendly Coding Examples

How to Link to Print-friendly CSS Files

The following code can be used between <head> and </head> to link to a printer-friendly Cascading Style Sheet:

The media attribute can contain many values such as all, screen, print, aural and braille. Creating a printer-friendly style sheet often involves copying the all or screen style sheets and removing or hiding objects.

Removing and Hiding Objects in Print-Friendly Pages

In Cascading Style Sheets, objects can either be removed completely from the page, or hidden. Objects that are removed are taken out of the natural flow of the page and where applicable, other objects will move up the page to fill the void. Objects that are hidden remain part of the page framework, but are hidden from view. In most cases, objects will need removing although it is normal to experiment with both techniques. For example, on the North Square printable pages, we remove the navigation bar:

navigation_bar {display: none}

The code to hide objects is:

navigation_bar {visibility: hidden}

Converting Fixed Width to Variable Dimensions

Web pages that have fixed width dimensions e.g. width: 670px; can easily be converted to variable width e.g. width: 100%;.

Displaying the Address of Links on Print-friendly Pages

The following code is taken from the North Square print-friendly Cascading Style Sheet file.

a[href^="/"]:after { content: " (http://www.north-square.com" attr(href) ") ";}

Make sure your domain is inserted into the code above.

by David Miller
Website Analyst,
North Square Interactive

North Square's Services

North Square Interactive is an online consultancy that delivers cost effective, best practice, Website Evaluation reports, Usability Testing, Website Competitor Analysis, Accessibility Audits, Browser Testing, and more. For further information about all of our services, please visit our Online Consultancy Index.

<< Back to Resources Index

Home -- Top of page -- Privacy Policy -- Terms of use