Smashing Magazine we smash you with the information that will make your life easier. really.
Printing the Web: Solutions and Techniques
February 21st, 2007 in CSS | 57 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”.
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.
- A Print CSS Primer
A detailted introduction and tutorial by Kenji Ross. - 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.”
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 45 Blog Designs
- 65 Flash Designs
- Brilliant Wallpapers
- Brilliant HDR Pictures
- Brilliant Photos
- Free Design Templates
- Free CSS Layouts
- Free Icon Sets
- Free High-Quality Fonts
- Slideshows & Lightboxes
- Adobe Photoshop Tutorials
- Adobe Illustrator Tutorials
All Posts
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Blog Designs
- Blog Headers
- Book Covers
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Design
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel art
- PNG Transparency
- Portfolios
- RSS Best Design Practices
- RSS Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Splash Pages
- Start Pages
- Stock Icons
- Tab-Based Interfaces
- Tag Clouds
- Textures & Backgrounds
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Web Profis Ideas 1, 2
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
Webtips
Sideblog
Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.
How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.
A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.
In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.
One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.
Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.
Fully Personal Interface research is a survey where people are questioned about their interface preferences. Results: labels and icons should be placed on the left, horizontal menus are more popular than vertical ones.
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!
Montoya (February 21st, 2007, 7:38 am)
That reminds me, I need to write a couple print layouts soon :)
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
Sam (February 21st, 2007, 2:57 pm)
Nice article.
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.
Håkon Wium Lie (February 21st, 2007, 8:58 pm)
CSS3 has some nifty new features for printing. Here are two drafts:
Link [www.w3.org]
Link [www.w3.org]
Prince, a web-to-PDF converter implements many of these features:
Link [www.princexml.com]
Adam (February 22nd, 2007, 1:09 am)
Link [www.sickbrain.org]
Blue Buffalo (February 23rd, 2007, 1:06 am)
What a great resource of articles for online printing. Well needed in the web design community.
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
Allexiel (February 23rd, 2007, 9:21 pm)
This article is of incredible value to me, thank you! I’ll print this out ;)
djidji (February 27th, 2007, 8:35 pm)
I think your website’s very good congratulation
Carrousel Yacht (April 13th, 2007, 5:18 pm)
Thanks for the help with print stylesheets, css, and print links.
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.”
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 ?
voyance (March 17th, 2008, 5:56 am)
Thanks for this website!
voyance (April 5th, 2008, 1:51 am)
Thanks! Great blog!