« 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 About.com 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 www.pdfzone.com and CSS media types at www.w3schools.com/css/css_mediatypes.asp
July 2001
May 2004
|
