Action, protest, campaigns, demos and issues magazine features, photos, articles, stories photos of London, New York, Wales, England and photography features music, parties, clubs, events, records, releases drug information, harm reduction, no-nonsense guide punch a celebrity football, features, issues, cardiff city games, useless games and diversions technical info, web authoring, reviews and features site news, updates and urban75 blog urban75 community news and events urban75 bulletin boards join the chatroom search urban75 back to urban75 homepage
London features, photos, history, articles New York features, photos, history, articles Brixton features, photos, history, articles panoramas, 360 degree vistas, London, New York, Wales, England Offline London club night festival reports, photos, features and articles urban75 sitemap and page listing about us, info, FAQs, copyright join our mailing list for updates and news contact urban75
web question and answers

« Q & A page

« tech pages

Q: Building printer-friendly Web pages
by Mike Slocombe

Q: Have you any suggestions on how to build printer-friendly Web pages? I run a site for a small organisation and having booking, membership and order forms for postal use is invaluable.
David Walton

A: What looks good on screen rarely looks good when it's printed out on paper, particularly when it comes to text.

Typefaces that work well on screen are often not the most appropriate for print media and the multiple column layouts of forms, newspapers and magazines can be unreadable on the Web.

The good news is that the Cascading Style Sheets 2 (CSS2) specification supports 'media types' which lets you specify different stylesheet settings for screen, print, handhelds, speech browsers and more.

If you're using linked external style sheets, you have to create separate stylesheets optimised for print and web suse and then refer to them in the <head> </head> section of your HTML page:

<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Visit for a guide to setting up stylesheets for different screen and print.

Some people prefer to produce HTML and PDF versions of your document. For printing, PDF (Portable Document Format) files are an excellent solution, offering precise and consistent control over layout and typography with 'bookmark' navigation, searching, and forms support.

PDF files are usually created in traditional word processing and desktop publishing packages and are self-contained documents, capable of being read on any machine that has the Adobe Acrobat Reader software installed.

PDFs can be inserted into a Web page by using <EMBED SRC= "myfile.pdf"> or <OBJECT> tags, or by linking to them using the <A HREF="myfile.pdf"> </A> tag.

If the file is a hefty beast, warn people first by adding the file size to the link, such as 'My book - download PDF version (122k)'.

To make the pages printer-friendly, make sure they accommodate the two most common international page formats (A4 and US Letter) by specifying one inch margins and a printable area of 15.9cm wide by 22.9cm tall.

The downside of PDF is that it requires your potential audience to be prepared to download the Acrobat plug-in. Document sizes can also get fairly chunky compared to HTML.

Also, if you're embedding the page in an HTML document, some layouts with small type can become nigh on impossible to read unless you resort to the fiddly zoom feature.

To give your visitors the best of both worlds, you can include a piece of code that'll automatically send the print-optimised version to the printer. Put this in the part of your HTML document and include an HTML text link to the PDF file for older browsers:

<LINK REL= "alternative" MEDIA="print" HREF="myfile.pdf" TYPE="application/postscript">

You can also get PDF tips from and CSS media types at

July 2001

May 2004

urban75 - community - action - mag - photos - tech - music - drugs - punch - football - offline club - brixton - london - new york - useless - boards - help/FAQs - © - design - contact - sitemap - search