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 web1
    Mike Boulton gives an example on how to design a nice print layout, which looks like print layout in traditional magazines.
    2

    Five Simple Steps to Typesetting on the web: Printing the web3

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

    10 Minutes to Printer-Friendly Page7

  • From Screen to Print: Creating a Print CSS in Dreamweaver8
    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.

    From Screen to Print: Creating a Print CSS in Dreamweaver9

  • Print Different10
    Quite an old article by Eric Mayer, in which he describes different media types you should consider designing print layouts.
  • ALA’s New Print Styles11
    Eric Meyer about A List Apart Print-Layout. The article is a “follow-up” of the article CSS Design: Going to Print12, 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 Media13
    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: Printing14
    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 Web15
    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 Links16
    works just the way Footnote Links work, but also adds the URLs of Links in the brackets after the links.
  • Print-Friendly CSS and Usability17
    Roger Johansson discusses, whether print layouts, which are different from the page structure, are user-friendly. Themaninblue’s post18 on the same topic.
  • Print to Preview19
    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 CSS20
    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.”

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops and loves solving complex problems in large companies. Get in touch.

  1. 1

    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!

    0
  2. 2

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

    0
  3. 3

    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

    0
  4. 4

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

    0
  5. 5

    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

    0
  6. 6

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

    0
  7. 7

    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

    0
  8. 8

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

    0
  9. 9

    I think your website’s very good congratulation

    0
  10. 10

    Carrousel Yacht

    April 13, 2007 5:18 pm

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

    0
  11. 11

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

    0
  12. 12

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

    0
  13. 13

    Thanks for this website!

    0
  14. 14

    Thanks! Great blog!

    0
  15. 15

    thanks! great articles :)

    0
  16. 16

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

    0
  17. 17

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

    0
  18. 18

    thanks very interesting

    0
  19. 19

    Hate the govt, love the country

    April 8, 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.

    1
  20. 20

    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

    0
  21. 21

    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

    0
  22. 22

    nice article, thanks for the informations…

    0
  23. 23

    great post, thanks !

    0
  24. 24

    I believe there are a lot more pleasant times ahead for folks who take a look at your site. I really like your website, keep posting!

    0
  25. 25

    As a Christian, I blieeve I?m to be prepared to meet my Maker at any moment, not that I?m a pessimist. As a Minister of the Gospel, in your personal beliefs, do you blieeve that the end of the world is coming in 2012 and that we Christians should prepare for the true ?end? rather than be seeking places to ?ride out the storm? as lots of other folks seem to be doing? The consensus seems to be that the end of the world, ?as we know it? is coming, but we just need to survive it and adjust. Do you blieeve we?re going to have any options?

    0
  26. 26

    This is a great alrcite especially for companies that don’t understand how important it really is to track users and the amount they print. The very last quote by O’Dwyer, ?These kinds of efforts result in significant reduction in the amount of funding needed to provide color,? is so true but companies still under utilize MPS. I hope businesses begin to understand how cost effective this solution could be and begin utilizing Managed Print Services more effectively.

    0

↑ Back to top