Printing the Web: Solutions and Techniques

• By Vitaly Friedman
• February 21st, 2007
• CSS, Print
• 26 Comments

Users don’t read, they scan. In fact, after many years, reading online still didn’t manage to assert itself against reading offline. Therefore long articles are usually printed out and read on paper. However, not every page will be printed out correctly by default – sometimes layout doesn’t fit, sometimes font size isn’t chosen properly or leading simply isn’t big enough. It is also important to include some further references to the printed version of the page, so users can get back to you, once they’ve read the printed version of your article.

Good news: web-developers can control the way web-site looks on the paper.To make sure that no data will lost and the legibility of content remains optimal after the printing, you can, of course, use CSS.

There are many options and techniques you can use developing print layouts. Here is a quick overview of some interesting solutions you can use to generate print layouts “on the fly”. Links checked: July/1. 2008

Printing the Web: CSS-Techniques

• Five Simple Steps to Typesetting on the web: Printing the web
  Mike Boulton gives an example on how to design a nice print layout, which looks like print layout in traditional magazines.
  

  

• Footnote Links: Improving Link Display for Print
  Aaron Gustafson presents a CSS+JavaScript-based method, which replaces all links on a page with corresponding footnotes. Elegant and extremely (!) useful solution.
  
• 10 Minutes to Printer-Friendly Page
  Print-layouts can be generated with PHP. Marko Dugonjic shows, how.

  

• From Screen to Print: Creating a Print CSS in Dreamweaver
  This article will examine how our layout displays one set of elements on the screen, yet when printed, prints a different layout using elements that do not display on screen.You’ll learn about media types and how to take advantage of them and using the cascade to create lightweight, compact pages for print. Since Community MX constantly tweaks its site, some things may be slightly different if you read this article a few months from its publishing date.

  

• Print Different
  Quite an old article by Eric Mayer, in which he describes different media types you should consider designing print layouts.
• ALA’s New Print Styles
  Eric Meyer about A List Apart Print-Layout. The article is a “follow-up” of the article CSS Design: Going to Print, which was published in ALA 2002.”Say no to “printer-friendly” versions and yes to printer-specific style sheets. CSS expert Eric Meyer shows how to conceive and design print style sheets that automatically format web content for off-screen delivery. Includes tips on hiding inappropriate content, styling text for the printer, and displaying the URL of every link on the page.”
• CSS Styling for Print and Other Media
  Ian Lloyd about the media-attribute and development of user-friendly print layouts.”There are many different media types that you can apply to CSS, some of which are more useful than others, and they let you specify the look, feel, or sound of the web page that is linked to the CSS files. In this section, we’ll look at the various media types that are available.”
• Complete CSS Guide: Printing
  In CSS2, the page properties are defined by the @page rule, while several new properties help control page breaking. John Allsopp explains in detail, which guidelines you should keep in mind designing print layouts and how you use @page-rules such as page-break-before, Widows, Orphans etc. efficiently.
• Printing The Web
  James Kalbach describes common mistakes and discusses important aspects of print layouts regarding usability.”Consider how users interact with other formats and media, particularly paper, and address the reality that people print web pages. With a little planning and foresight creating printable pages is relatively easy and extends a positive user experience to paper.”
• Dive Into Mark Print-friendly Links
  works just the way Footnote Links work, but also adds the URLs of Links in the brackets after the links.
• Print-Friendly CSS and Usability
  Roger Johansson discusses, whether print layouts, which are different from the page structure, are user-friendly. Themaninblue’s post on the same topic.
• Print to Preview
  Pete McVicar’s JavaScript creates a preview page with a warning message users can use to navigate back to the original page.
• Printing Web documents and CSS
  Jim Wilkinson explains, what print layouts should have, (e.g. the URL of the original web-page), which elements should be removed (e.g. navigation) and what how you should handle links, footers and headers. Also problems in different browsers are taken into consideration.”This document describes some of the issues concerning the use of CSS to reformat Web documents for printing (using the media type “print”). We also discuss those aspects that CSS is not able to control or even influence. We assume a good knowledge of CSS and concentrate on practical issues, given the current deficiencies in browsers in implementing print-related CSS.”