In a time when everyone seems to have a tablet, which makes it possible to consume everything digitally, and the only real paper we use is bathroom tissue, it might seem odd to write about the long-forgotten habit of printing a Web page. Nevertheless, as odd as it might seem to visionaries and tablet manufacturers, we’re still far from the reality of a paperless world.

In fact, tons of paper float out of printers worldwide every day, because not everyone has a tablet yet and a computer isn’t always in reach. Moreover, many of us feel that written text is just better consumed offline. Because I love to cook, sometimes I print recipes at home, or emails and screenshots at work, even though I do so as rarely as possible out of consideration for the environment.

Print style sheets are useful and sometimes even necessary. Some readers might want to store your information locally as a well-formatted PDF to refer to the information later on, when they don’t have an Internet connection. However, print styles are often forgotten1 in the age of responsive Web design. The good news is that a print style sheet is actually very easy to craft: you can follow a couple of simple CSS techniques to create a good experience for readers and show them that you’ve gone the extra mile to deliver just a slightly better user experience. So, how do we start?

Getting Started

Let’s look at the process of setting up a print style sheet. The best method is to start from scratch and rely on the default style sheet of the browser, which takes care of the printed output pretty well by default. In this case, insert all declarations for printing at the end of your main style sheet, and enclose them with this distinct rule:

In rare cases, using screen styles for printing is the way to approach the design of the print style sheet. Although making the two outputs similar in appearance would be easier this way, the solution is not optimal because screen and print are different kettles of fish. Many elements will need to be reset or styled differently so that they look normal on a sheet of paper. But the biggest constraints are the limited page width and the need for an uncluttered, clear output. Building print styles separately from screen styles is better. This is what we will do throughout this article.

Of course, you could separate the declarations for screen and print into two CSS files. Just set the media type for the screen output to media="screen" and the media type for printing to media="print", omitting it for the first one if you want to build on the screen style sheet.

To illustrate, I have set up a simple website of the fictional Smashing Winery2.

Everything needed for a proper screen display is in place. But as soon as the environment changes from virtual pixels to real paper, the only thing that matters is the actual content.

The two pages of the unaltered print preview. The header is not yet optimal, and both the main navigation and footer are superfluous.

Therefore, as a first task, we will hide all the clutter: namely, the main navigation and footer.

header nav, footer {
display: none;
}

Depending on the type of website, you could also consider hiding images by default. If the images are big, this would be wise, to save your users some printing costs. But if the images mainly support the content, and removing them would compromise the meaning, just leave them in. Whatever you decide, limit the images to a certain width, so that they don’t bleed off the paper. I’ve found that 500 pixels is a good compromise.

img {
max-width: 500px;
}

Alternatively you could also rely on the tried and trusted max-width: 100%, which displays images at their maximum size but not bigger than the page width.

You might want to use a simple trick to get high-quality images when printing. Just provide a higher-resolution version of every image needed and resize it to the original size with CSS. Read more about this technique in the article “High-Resolution Image Printing4” on A List Apart.

Of course, we should hide video and other interactive elements, because they are useless on paper. These include <video>, <audio>, <object> and <embed> elements. You might want to consider replacing each video element with an image in the print style sheet, too.

With the main navigation, footer and images gone, the actual text is getting ever closer to center stage. But work remains to be done, especially with the header.

Adjusting To The Right Size

To define page margins, you can use @page rule to simply apply a margin all the way around the page. E.g.:

@page {
margin: 0.5cm;
}

will set the page margin on all sides to 0.5cm. You can also adjust the margins for every other page. The following code sets the left page (1, 3, 5, etc.) and right page (2, 4, 6, etc.) margins independently.

@page :left {
margin: 0.5cm;
}
@page :right {
margin: 0.8cm;
}

You can also use the :first page pseudo-class that describes the styling of the first page when printing a document:

@page :first {
margin: 1cm 2cm;
}

Unfortunately, @page is not supported in Firefox, but supported in Chrome 2.0+, IE 8.0+, Opera 6.0+ and Safari 5.0+. @page :first is supported only in IE8+ and Opera 9.2+. (thanks for the tip, Designshack5)

Now let’s tweak some general settings for the fonts. Most browsers set the default to Times New Roman, because serif fonts are considered to be easier on the eyes when read on paper. We can use Georgia at 12-point font size and a slightly higher line height for better legibility.

However, to retain some control, we should explicitly set the font sizes below. The chart on ReedDesign6 gives us a feel for this; but with all of the screen sizes and resolutions out there, these are only rough estimates.

Apart from special cases (like the <h2> heading, which would otherwise be too close to the preceding paragraph), we don’t need to touch the margins or appearance of any elements, because they are handled quite nicely by the default settings. If you don’t like that certain elements are indented, such as <blockquote>, <ul> and <figure>, you could always reset their margins:

blockquote, ul {
margin: 0;
}

Or you could override the default bullet style in unordered lists…

ul {list-style: none}

…and replace it with a custom one; for example, a double arrow (and a blank space to give it some room):

li {
content: "» ";
}

You could also make <blockquote> stand out a bit by enlarging it and italicizing the text.

The Header

Currently, the remaining things to be dealt with in the header are the <h1> title and the logo. The first is there just for accessibility7 purposes and is hidden for screen display using CSS. While we could use it as a sort of header in the print-out to indicate the source of the content, let’s try something more attractive. Wouldn’t it be nice to display the actual logo, instead of the boring text?

Unfortunately, the “Winery” part of the logo is white and therefore not ideal for printing on light-colored paper. That’s why two versions of the logo are in the source code, one for screen display, one for printing. The latter image has no alt text, otherwise screen readers would repeat reading out “Smashing Winery.”

First, we need to hide the screen logo and the <h1> heading. Depending on the relevance of the images, we might have already decided to hide them along with other unneeded elements:

header h1, header nav, footer, img {
display: none;
}

In this case, we have to bring back the print logo. Of course, you could use the adjacent sibling selector for the job (header img + img) to save the class name and live with it not working in Internet Explorer 6.

header .print {
display: block;
}

Otherwise, you could just use header .screen (or header :first-child) to hide the main logo. And then the second logo would remain. Keep in mind that in print layouts, only images embedded via the <img> tag are displayed. Background images are not.

Voilà! Now we have a nice header for our print-out that clearly shows the source of everything. Alternatively, you could still remove the second logo from the source code and use the header’s <h1> heading that we switched off earlier (in other words, remove it from the display: none line). Perhaps you’ll need to hide the remaining logo as we did before. Additionally, the font size could be enlarged so that it is clearly recognized as the title of the website.

header h1 {
font-size: 30pt;
}

As a little extra, the header in the print-out could show the URL of the website. This is done by applying the :after pseudo-element to the <header> tag, which unfortunately won’t work in IE prior to version 8; but because this is just a little bonus, we can live with IE’s shortcoming.

Another thing about IE 6 to 8 is that HTML5 tags can’t be printed. Because we’re using these tags on the example website, we’ll have to apply Remy Sharp’s HTML5shiv10 in the header. The shiv allows you not only to style HTML5 tags but to print them as well. If you’re already using Modernizr11, that’s perfect, because the shiv is included in it.

<script src="js/html5.js"></script>

Unfortunately, the behavior of the IEs is still a bit buggy even when this shiv is applied. HTML5 tags that were styled for the screen layout need to be reset, or else the styling will be adopted for the print-out.

Some developers add a short message as a supplement (or an alternative) to the displayed URL, reminding users where they were when they printed the page and to check back for fresh content. We can do this with the :before pseudo-element, so that it appears before the logo. Again, this won’t work in IE 6 or 7.

To distinguish it from the actual content, we’ve given it a gray border, a bit of padding and italics. Lastly, I’ve made it a block element, so that the border goes all around it, and given the logo a margin.

To make it more discreet, we could move this message to the bottom of the page and append it to main container of the page, which has the .content class. If so, we would use the :after element and a top margin to keep it distinct from the sidebar’s content. As far as I’m concerned, the URL is indication enough, so I would rely on that and omit the message.

Finally, we need to remove the border of the logo to prevent it from showing in legacy browsers, and move the <header> away from the content:

img {
border: 0;
}
header {
margin-bottom: 40px;
}

The header shown two different ways, one with a logo and simple URL, and the other with a message and the title in plain text.

The Missing Link

Obviously, on paper, links aren’t clickable and so are pretty useless. You could try to build a workaround, replacing links with QR codes on the fly, but the solution may not be feasible. To put the links to use, you could display the URL after each string of anchor text. But text littered with URLs can be distracting and can impair the reading experience; and sparing the reader excessive information where possible is advisable.

The best solution is the :after pseudo-element. It displays the URL after each anchor text, surrounded by brackets. And the font size is reduced to make it less intrusive.

p a:after {
content: " (" attr(href) ")";
font-size: 80%;
}

We’ve limited this technique to links within <p> elements as a precaution. To go a step further, we could choose to show only the URLs of external links. An attribute selector12 is perfect for this:

The possibilities for links in printed documents seem to be almost endless, so let’s try some more. To distinguish all internal links, let’s precede them with the website’s domain (omitting all the other properties, to keep things concise and clear):

But there is one thing to remember, especially with external links. Some are very long, such as the ones in the Safari Developer Library13. Such links can easily break a layout, like at the screen output. Luckily, a special property takes care of this:

p a {
word-wrap: break-word;
}

This breaks long URLs when they reach a certain limit or, as in our case, when they exceed the page’s width. Just add this property to the first of the above declarations. Although this property is basically supported in a wide range of browsers — even IE 6 — it works only in Chrome when printing. While Firefox automatically breaks long URLs, Internet Explorer has no capability for this.

Finally, we set the link color to black to improve the experience for readers.

a {
color: #000;
}

URLs, whether internal or external, now show up beside links with special treatment.

Aaron Gustafson went one step further and built the little script Footnote Links14. According to the description:

This script builds a list of URIs from any tags within a specified container and appends the list as footnotes to the document in a specified location. Any referenced elements are given a dynamically-assigned number which corresponds to the link in the footnote list.

While we’re at it, letting readers know where quotes come from, such as those wrapped in <blockquote> and <q> tags, would be thoughtful. Just append the cite attribute (which will be the URL) after quotation marks, like so:

q:after {
content: " (Source: " attr(cite) ")";
}

Side By Side

We haven’t yet dealt with the sidebar content. Even though it appears after the main content by default, let’s give it some special treatment. To keep it distinct, we’ll give the sidebar a gray top border and a safe buffer of 30 pixels. The last property, display: block, ensures that the border shows up properly.

This will move the contents of the sidebar to a new page when printed. If we do this, we can omit all of the other properties.

The sidebar on screen (left) and printed out (right). I’ve grayed out everything else to make it more obvious here.

We could do the same for comments. Comments don’t appear in the example, but they’re still worth touching on. Because they sometimes run long, omitting them in the print-out might be reasonable (just set display: none for the whole container). If you do want to show the comments, at least set page-break-before. You can also use page-break-after: always if there is content to print on a new page. The page-break-before and page-break-after properties are supported in all major browsers.

We can also use widows and orphans properties. The terms derive from traditional printing, and they take numbers as values. The widows property sets the minimum number of lines in a paragraph to leave at the top of a page before moving them entirely to a new page. The orphans property sets the number of lines for the bottom of the page. The orphans and widows properties are supported in IE 8+ and Opera 9.2+, but unfortunately not in Firefox, Safari or Chrome.

Now that we have taken care of the sidebar, the print style sheet is ready! You can download it here16. The file is fully documented and so can serve as a helpful reference or starting point.

The completed print style sheet.

Just For Fun

You might be asking, “Why can’t we just put the sidebar next to the main content, like on the website itself?” Well, the screen and print outputs are a bit different. Unlike the former, print-outs aren’t very wide and thus don’t have much space to fill. But depending on the font size, the line length could exceed the maximum of 75 characters and so be more difficult to read17.

In this case, we could, of course, limit the width of the main content (preferably not too much — we shouldn’t set the line length to fall below about 55 characters) and then absolutely position the sidebar just below it, just like in the screen display. But describing this method falls beyond the scope of this article, so please consult the screen style sheet18 of the example website (line numbers 112 and 141 and down).

In my humble opinion, avoid such experiments. While in principle, print layouts have endless possibilities, focusing on the content and removing everything else is better. The better way to ensure an optimal line length is just to shrink the page’s width or enlarge the font size.

Preview Made Easy

Print Preview19 by Tim Connell is a handy little jQuery plugin that replicates the built-in print-preview function, but with one difference. Instead of opening a separate page, it shows a sleek overlay, with “Close” and “Print” buttons at the top. It also has the convenient “P” shortcut. You might want to check out the demo page20, too.

A Missed Opportunity

Imagine that you were able to visit any page, hit “Print” and get an optimized version of the page to enjoy on paper. Unfortunately, we don’t live in this perfect world. Some websites still rely on JavaScript to generate print versions, and many other designers simply don’t care. But this is a missed opportunity. A carefully composed print style sheet could be used not only for printing but to optimize legibility for screen reading.

As the website owner, you can determine the images to display (if any), the optimal font and size, and the presentation of other elements. You could make the content more appealing than the versions produced by Instapaper and Readability by giving the print version the extra attention it deserves.

The Future

While using CSS3 for screen layouts is pretty common nowadays, it hasn’t quite established itself in the print environment yet. The W3C has an extensive description of “Paged Media21,” but unfortunately support is very limited at the moment, Opera and Chrome being the only browsers that enable a few of its related properties. With decent support, it would be possible to use the @page rule to set the dimensions of the page, switch to a landscape view, alter the margins, and do much more. Even media queries22 are were conceived to respond to different page sizes.

Websites Designed Well For Print

Let’s take a look at some examples of websites optimized for print.

A List Apart23
The slick multi-column design is simplified into a single column, full width, which intuitively mirrors the website’s sensible hierarchy. Article titles and authors are no longer active links. And beautiful clean typography is kept intact, thanks to the compatible fonts and simple colors; no font change is necessary, although the font-size value increases slightly. Advertising and affiliate styles are hidden, and the result is a simple, clean printed page that easily conforms well to any printer or page set-up in the document. A List Apart is exemplary, save for one important point: the logo does not appear anywhere in the print-out.

Lost World’s Fairs26
The smooth printed page helps to carry the visuals of the website for Lost World’s Fairs. The main title and its colorful background are swapped for a simplified version in the print-preview style. However, some images could be removed to save some expensive printer ink. (Updated).

The Morning News29
One would expect most news websites to employ the print-preview function, yet that isn’t the case. The Morning News has prepared its content for print without much concern, happily excluding background images and color, while still getting its message across.

James Li32
James Li has designed his personal website exceptionally well for this purpose, carefully preserving all spacing and key elements. The logo is a part of the printed product, whereas the navigation links are not: very clever, because navigation has no value on a printed page unless it is informative in and of itself. Non-Web fonts are converted to simple printable ones (see “Other Stuff…”). Brilliantly executed for print.

TechCrunch35
TechCrunch’s recent redesign tweaked not only the visual design of the site, but also the small details that have to be considered when the site is viewed on mobile or printed out. The print layout is very clean and minimalistic, without unnecessary details, yet also without links to the actual page that was printed out. The TechCrunch logo is omitted as well.

R/GA38
Although the logo isn’t present in the printed version of this website, attention is paid to the spacing of the content within. While the Web version has simple lines and a clean space, the printed page tightens up elements in order to best use the space. A strong grid and effective typography add to the effect. In this example, some images could be removed as well.

Studio Mister41
An excellent job of the print-preview function. The page has been meticulously designed to a grid and requires little in order to prepare it for print; some attention to the background color of text and not much else. Unfortunately, though, the logo is a background image and thus excluded.

Bottlerocket Creative44
Although this logo isn’t represented in the print-out either, the folks at Bottlerocket Creative have done very well to adapt their typographic style for offline viewing. Assuming the design was created mainly with images would be easy, but meticulous attention to type is evident upon closer inspection.

OmniTI47
OmniTI has optimized its content for print not by shrinking the main column, but by increasing the size of the text and not crowding the images together. The playful look adheres to good spacing. The only drawback? Many of the line breaks have been eliminated, causing some words and sentences to run into each other.

In Conclusion

There’s a lot to consider when preparing your website to be printed out by readers. The process forces you to scrutinize every element of your content like never before, all because someone will want a hard copy of your work. Yet most of all, it’s important to recognize the difference between printing and actually reading. Perhaps these techniques hold merit in helping you visualize content for mobile devices. What better way to kill two birds with one stone than to work out your layout for the mobile while considering printing view at the same time to make sure that your content prints flawlessly for offline archival? The time you invest could double in value.

For more information on preparing content for print, including by modifying CSS, check out the following articles:

Christian Krammer is web designer at one of Austria's biggest Newspaper called "Kleine Zeitung" where he worked for nearly ten years. He also is the proud owner of css3files.com, a comprehensive website about CSS3. A large range of properties is explained there for you to learn and look up. Besides that he is the proud father of a 4 years old boy and a passionate gamer.

Nicolas Gallagher

I’m not convinced that some of the examples are actually well designed for print. Multi-coloured print outs (Lost World’s Fair) or those with large images (OmniTI) are not very “print friendly/optimised”. I wouldn’t be too happy to have my expensive printer ink wasted on a giant rocket or nearly 20 video preview images (as happens with the R/GA example).

joramoudenaarde

To me, the biggest gripe I tend to have with Print Style Sheets, is that some (not all luckily) companies/designers/coders tend to leave out too much. Personally, although I’ve met plenty of people who feel the same way, I always appreciate the attention webdesigners have to save us some valuable ink… on a 100grams piece of paper we don’t need to see a full coloured background of the website itself. Besides the fact that the paper would get soggy, it just won’t add anything to the readability to the actual article/web page.

Having said that, I do believe that even with a Print Style Sheet, we need (a black-white if needed) to see the logo of the site we want to print, and some design elements if possible such as font-size, lines and such… maybe even some grayscale headers or bulletpoints like Bottlerocket Creative has :).
Even when I save PDF’s or prints of websites, I always like to make sure I can remember where I got it from. So a printed website that basically looks like a CSS-free HTML-page won’t help us much… I think Lost World’s Fairs and James Li (for example) have done very well with keeping the overall design and feel of the website intact in that aspect :)

… Plus, ink nowadays is so cheap, what viewer really cares to print out a few photos of a small coloured logo of a web page :) If you’re a company wanting to print a web page, you probably have a decent printer available, and ink is tax-deductible in that case. If you’re a consumer and want to print a page at home, those $80 printers have ink cartridges of ±$8 bucks a piece, so it’s not really a problem these days. Up till a bunch of years ago (I’m guessing ±8y if I’m correct) ink was a bit more expensive and printers were slower and less efficient. But now? I’d rather print in color to help me remember where I got that print from then print a page that looks like the 1990’s :)

0

6

Rob

I am currently building a new website for my folks business, which is a small family run collectibles store now with auctions every other Sunday. The Print style sheet I plan to make will be very specific. The site will be run via a hosted WordPress install, and the printout of the main page will actually be just name of the business, phone number, address, owners and a google map to the location, perhaps some additional information about the business and a TinyURL to the full Google Map as well. People don’t need the website header, footer, list of articles and sidebar.

The actual article pages will have no goggle map (though the TinyURL would remain), a condensed form of the address, phone number, etc, and then the article in question.

However, I do believe that web designers shouldn’t ignore print style sheets as a way of making a nice, clean external version of their website. When I redesign my own businesses website (a small 12 room motel), I plan to make the print-outs of my site be very information rich, easy to read, and have only the information that is required on a sheet of paper.

0

7

Sweetwater

Ego is a bad designer.
Start asking yourself why an user need to print a web page. Probably he need to re-use main contents and info in the “offline world”.
Try to identify those contents and serve them in the best, clear and cheap way, because users (nearly always) doesn’t need to attach to wall and admire your beautiful design.

mdhp

Customers print, unbeliveable but true. They want a nice high-end webpage and if they have it, they print the page… crazy !
I see this since many years, thats why i automaticly create a simple print.css which hide all things that are not needed.

0

11

Elliot

Your “but who prints anymore” statement is a sentiment that I held until recently.

I recently finished a website for a large superannuation / pension fund in Australia. I was asked to develop a print style sheet for an extremely complex site. My initial thoughts were “ummm why? Who the hell is gonna print the site?”.

It turns out that many of the documents (web pages) on the site have valuable information for their members (who would have thought right?) which they need to print for reference.

Crazy huh?

0

12

OrangeJuice

Yes, right. And sometimes, think for example in ecommerce pages. Customers are mostly used to print the confirmation section with the details, or in aeroplanes companies or hotel companies, they are very used to print the valuable information so they can have it with them.

0

13

Jimmy

Actually, I’m coming at this matter from the opposite angle – I want to try typesetting with HTML and CSS. I’ve some help material that I want to roll out both on the web and on paper (because a physical manual is one of the client’s expected deliverables). Does anyone have any further resources on more complex typesetting with CSS? Because we’ll be responsible for choosing the UA that creates the PDF output, CSS3 print attributes are a possibility.

0

14

Sarah Bird

This is a very useful read. So far, I have been simply ignoring Print CSS. I am planning to make a mini print CSS framework for my website surveyrobo.com. This article will help me with make it compatible for different browsers. Your article has tot me a great deal about CSS3 features. Thank you so much for sharing :)

Clifford Heath

In a multi-page table containing, for example, the items of an invoice, it’s often necessary to add a “continued…” or sub-total line (table header row) before breaking the page, and a “Carried forward” line at the top of the new page. How is it possible to cause these rows to be emitted in the correct place?

That leaves aside the problem of how to calculate and format the subtotal to that point – I assume you’d have to emit every possible subtotal in a cell that will only be displayed in case of a break at that point?

Sundar

Marc Haunschild

I would not print the sidebar. The sidebar should contain further information. If there are links given, the user should follow the links and print the linked articles to read them offline.
Necessary information in a sidebar is wrong!

0

27

Sal

This is a great resource. I’ve learnt a lot of from this article. A couple of points though that I’ve experienced making a print CSS myself;

1) p a[href^=”#”]:after {display: none;} hides meaningful bookmarks such as the ones on a FAQ page, for instance.
2) This article could also include a way to customize content for “mailto:” links. E.g. using p a[href^=”mailto:”]:after {} perhaps?

Vish

I really appreciate the @media print guide review, but the examples provided below, some of the sites did not stand up to the results when I tested the same in firefox print preview option. The header, images, etc.. were all chopped off in most of the sites. Can you please suggest some more links.

Thank you,
Vish

0

30

Nisha

Leon

Narendra

I’m using IE7 (and I cant change browser version or browser, I’ve to find solution on IE7 only) and want to print table with all borders (border also to it’s all rows ) and the table has many rows and the table covers two to three pages, but while printing that table, the row cuts into half at page break. I know that this problem can be solved using page-break-inside:avoid, but this doesn’t work in IE7, pls share if any other solution.

0

33

ANTARA

Shovan Sargunam

Most of the websites use logo as background image or css sprite. By default browser dont print any thing that is assigned to background image. In order to print bg, users need to change their printing preference to print background image. This is unfortunate when you want to print logos are any other images in css sprite.

Try printing google search page, Google logo and page number background images will be omitted in print. Would be great If any one know way around this little bug.

Marianne McDougall

Ty Cahill

I know this is an old post, but I just want to chime in and say that right now, in 2014, I print a lot of stuff. Often times I’ll print to PDF instead of paper, so having a print stylesheet is very helpful. Just because some of you don’t print that often doesn’t mean that having a print stylesheet is without benefit.

Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.

Meet Smashing Book #5, our new book on real-life responsive design. With front-end techniques and patterns from actual projects, it's a playbook to master all the tricky facets and hurdles of responsive design. Save 25% today.

Fixing RWD issues can be quite easy — once you understand exactly why they come up. The Mobile Web Handbook will help you understand technical issues on mobile and how to deal with them effectively.

Hungry for more content? Over 60 eBooks are waiting to be discovered in our lovely Smashing Library. And guess what? You can watch Smashing Conference talks there, too.

SmashingConf isn't the eighth wonder of the world, but we are pretty close. Join us at at the shores of Santa Monica for SmashingConf LA on April 27–30 or at SmashingConf NYC on June 15–18. You won't be disappointed.