Smashing Magazine - we smash you with the information that will make your life easier. really.

Printing the Web: Solutions and Techniques

Advertisement

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.

    Print-layouts-003 in Printing the Web: Solutions and Techniques

  • 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.

    Print-layouts-002 in Printing the Web: Solutions and Techniques

  • 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-layouts-004 in Printing the Web: Solutions and Techniques

  • 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.”

Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (No votes yet)
Loading ... Loading ...

Tags: , , , ,

Advertising
  1. 1
    Aaron
    February 21st, 2007 4:44 am

    Nice article.

    If there’s one thing in life that annoys me (well actually there’s quite a few…), it’s websites that haven’t been set up to print properly.

    I’m studying, so I do quite a lot of research online, and printing. I hate it when you have to print two pages of navigation before you get to the main copy, or half the main copy chops off the edge of the page.

    Webmasters, read this article and sort your sites out!

  2. 2
    Montoya
    February 21st, 2007 7:38 am

    That reminds me, I need to write a couple print layouts soon :)

  3. 3
    Uzbek
    February 21st, 2007 1:43 pm

    After reading all these, I’ll need to go and do some work on generating nice and clean print versions of forum topics. This should not be dificult :)

    Uzbek

  4. 4
    bbebop
    February 21st, 2007 4:03 pm

    umm, where’s the “print version” link? well, at least it’s a full-text rss feed. i’ll print that! thanks.

  5. 5
    Håkon Wium Lie
    February 21st, 2007 8:58 pm

    CSS3 has some nifty new features for printing. Here are two drafts:

    http://www.w3.org/TR/css3-gcpm/
    http://www.w3.org/TR/css3-page/

    Prince, a web-to-PDF converter implements many of these features:

    http://www.princexml.com

  6. 6
    Blue Buffalo
    February 23rd, 2007 1:06 am

    What a great resource of articles for online printing. Well needed in the web design community.

  7. 7
    Jermayn Parker
    February 23rd, 2007 11:41 am

    Hey thanks for that, you have just saved me hours worth of trouble trying to find/ research this information for some of my up and coming projects.

    Thanks

  8. 8
    Allexiel
    February 23rd, 2007 9:21 pm

    This article is of incredible value to me, thank you! I’ll print this out ;)

  9. 9
    djidji
    February 27th, 2007 8:35 pm

    I think your website’s very good congratulation

  10. 10
    Carrousel Yacht
    April 13th, 2007 5:18 pm

    Thanks for the help with print stylesheets, css, and print links.

  11. 11
    rzrsej
    July 22nd, 2007 9:24 pm

    A cool selection of fixes for this problem, but I’m actually more interested in the problem itself. There does seem to be a clear distinction between online and offline reading, as you suggest. Part of this is simple – people don’t want to spend hours sitting in front of a computer. The notion of sitting in a nice bubble bath and reading a novel is far more inviting. Yet this leaves a couple of important questions. First, has the scanning behavior we have all adopted with respect to the web translated into changes in the way we read more traditional texts, or do we manage to keep these two types of reading completely distinct from one another? Second, why haven’t any e-book readers taken off? Is there some sort of stigma attached to actually reading something that came from the web or are we just so attached to the look and feel of physical “pages.”

  12. 12
    m@rqs
    February 11th, 2008 6:28 am

    The best reference would have been to apply this stuff right here … but I don’t see any “print icon” here ?

  13. 13
    voyance
    March 17th, 2008 5:56 am

    Thanks for this website!

  14. 14
    voyance
    April 5th, 2008 1:51 am

    Thanks! Great blog!

  15. 15
    oxyk
    June 20th, 2008 12:50 pm

    thanks! great articles :)

  16. 16
    oxyk
    August 13th, 2008 7:21 am

    //wanna try..
    document.write(”…”);

  17. 17
    Vincent Le Pes
    October 3rd, 2008 1:44 pm

    Just a heads up, it’s Mark Boulton, not Mike Boullton…just a little typo :)

  18. 18
    site
    December 5th, 2008 5:32 am

    thanks very interesting

  19. 19
    Hate the govt, love the country
    April 8th, 2009 7:19 am

    Decent article, topic deserves more attention.

    If you are still printing the web you must be ancient. Printing is only relevant with specific content such as applications & completed invoices. I would not want you to print my websites. First its all protected under US copyright laws including the pictures, you ‘researching’ pirate! Especially the art; go research that. Second, I like trees.

    So I will make printable only what my clients deem suitable to be printed.

  20. 20
    Gordon
    May 1st, 2009 3:54 am

    There is a very easy way of printing without menus, footers etc.

    Prepare a print.css. The first line should be
    @import “style.css”; (or whatever you have called it)
    Next add the following lines
    .NONO{display:none;}
    .yesyes{difplay:inline;}
    a {text-decoration:none;color:#000;}

    In your web page (or template) find all areas of the page you do NOT want to print. Hopefully they will be surrounded by divs. If not do this.

    Make add the class NONO to each div e.g.

    You will see that it is possible to add more than one class to a div.

    If you want to put a special header at the top of the printout add the following

    A HEADER and add

    .yesyes{display:none;} to your original stylesheet.

    The nett effect of this is to stop all NONO classes from printing (links will print in black with no underline), and all yesyes divs print, but not display.

    Easy !

    See it in action at this my church web site

  21. 21
    Gordon
    May 1st, 2009 4:04 am

    Oopps.

    Here is the coding again.


    .NONO{display:none;} - in print.css
    .yesyes{display:inline;} - in print.css
    a {text-decoration:none;color:#000;} - in print.css
    .yesyes {display:none;} - in style.css

    div class=”header NONO” – make a pages’s div non-printing and all links will print in black with no underline
    div class=”yesyes” – make a pages’s div print but not display

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
  • Re: Correct way to learn PHP

    Start off by reading all the 15 parts of PHP 101 on Devzone.

  • Re: Using Tutorials?

    I say you're okay. I wouldn't straight up jack someone else's design and present it as my own, even if it was a tutorial, but it's certainly acceptable to learn some…

  • Correct way to learn PHP

    So, I'm a designer but I wanna expand my abilities and learn PHP, to be more exact I wanna learn CI - Codeigniter!

  • I wanna make comics!

    Hello,I'm designer but I've never involved in vector painting so I need your help

  • Re: Twitter

    @gatorwebdesignShould tweet something really...

Post your job