O'Reilly

Optimizing Your Website Structure For Print Using CSS

By on  

As much as I read articles online, I still print a fair amount of them out. Sometimes I print them to pass on to others, other times to read again when I have more time. Unfortunately a great deal of websites put no effort into providing their content in a printer-friendly fashion. The result of them overlooking the print audience is a great article not being read. If only these writers knew how easy it can be to optimize their site for print and how it can greatly enhance the value of their website.

The secret to creating printable pages is being able to identify and control the "content area(s)" of your website. Most websites are composed of a header, footer, sidebars/subnavigation, and one main content area. Control the content area and most of your work is done. The following are my tips to conquering the print media without changing the integrity of your website.

Create A Stylesheet For Print

Of course you have at least one stylesheet to control the layout of the page and formatting of the content, but do you have a stylesheet to control how your page will look like in print? Add the print style sheet, with the media attribute set to "print", at the end of the list of stylesheets in the header. This will allow you to create custom CSS classes applied only at the time of print. Make sure your structure CSS file is given a media attribute of "all."

<!-- Main stylesheet on top -->
<link rel="stylesheet" type="text/css" href="/global.css" mce_href="/global.css" href="/global.css" mce_href="/global.css" media="all" />
<!-- Print only, on bottom -->
<link rel="stylesheet" type="text/css" href="/print.css" mce_href="/print.css" href="/print.css" mce_href="/print.css" media="print" />

Avoid Unnecessary HTML Tables

As much as I try to steer clear of using tables, there's no way to avoid the occasional <tr><td> experience. Forms are much easier to code when using tables. Tables are also great for...get this...data tables. Other than these two situations, a programmer should try to avoid using table, especially when considering print. Controlling the content area of your website can be extremely challenging when the page structure is trapped in a table.

Know Which Portions Of The Page Don't Have Any Print Value

You know that awesome banner you have at the top of your site? Ditch it. And those ads on the right and left sides of the page? Goodbye. Web visitors print your page because of the content on it, not to see the supporting images on your website. Create a class called no-print and add that class declaration to DIVS, images, and other elements that have no print value:

.no-print		{ display:none; }
<!-- Example -->
<div id="navigation" class="no-print">
	.... <!-- who needs navigation when you're looking at a printed piece? -->
</div>

Use Page Breaks

Page breaks in the browser aren't as reliable as they are in Microsoft Word, especially considering the variable content lengths on dynamically created pages, but when utilized well make all the different in printing your website. The CSS specs don't provide a lot of print flexibility but the page-break-before / page-break-after properties prove to be useful. Page breaks are much more reliable when used with DIV elements instead of table cells.

.page-break	{ page-break-before: always; } /* put this class into your main.css file with "display:none;" */
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eu felis. Curabitur sit amet magna. Nullam aliquet. Aliquam ut diam...
<div class="page-break"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit....

Size Your Page For Print

Obviously your computer monitor can provide a large amount of width to view a page, but I recommend setting the content area width to 600px (an inch equivalent may be better, but I try to deal with one unit specifically, which is pixels). This ensures that words wont bleed outside the print area. Use this width measurement with the page break DIVs you've created in your stylesheet. After you know the width of your printed content area, adjust the dimensions of content blocks inside the main content area if necessary.

Test!

Like any type of programming, testing is important. Note that if you have a website that serves dynamic data, you wont be able to win all the time but you may be able to figure a scheme to format content well most of the time. Be sure to test in multiple browsers (when creating customer websites, I try to check all "Grade A" browsers).

Modifying your page structure for better print results is probably easier than you think -- at least improving your existing template will be. Check back soon for part two, where we analyze optimizing a website's content for print.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Regular Expressions for the Rest of Us

    Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

Incredible Demos

  • CSS Fixed Positioning

    When you want to keep an element in the same spot in the viewport no matter where on the page the user is, CSS's fixed-positioning functionality is what you need. The CSS Above we set our element 2% from both the top and right hand side of the...

  • PHP Woot Checker &#8211; Tech, Wine, and Shirt Woot

    If you haven't heard of Woot.com, you've been living under a rock. For those who have been under the proverbial rock, here's the plot: Every day, Woot sells one product. Once the item is sold out, no more items are available for purchase. You don't know how many...

Discussion

  1. Found this on digg. Very timely and useful as I am currently working on a project where one of the requirements is a “print only” layout. Thank you!

  2. Maha

    Hi
    I am currently working on printing report. In which html page is used to show my content which is from datatable, the report is like row-columnwise structure. If I select to print the report the page simply breaks as per content in table. Instead to that I add those column headers in second, third, fourth…..page too.
    Pls help me out to solve this..

    Thanks in advance

  3. I am sure, this will help lot of beginners….. thanks for share….

    Cheers,
    Vivek
    [http://www.developersnippets.com]

  4. Sen

    how must i do to hide something using CSS and apply this into IE7

  5. bizkid64

    I’m trying to reproduce a government form in a printer-friendly format. I’m using repeated data from a database, but I need to be able to recreate a header and page numbering at the top of each successive page. Any thoughts on how to do this? Also, is there an easy way to figure out the dimensions (in pixels) of the printable area of a page given paper size and various margins?

    I’ve been searching for an answer on this for days, and your site is the closest I’ve come to finding an answer. Thanks.

  6. Just read three of your articles, after a Google search for using CSS to print name tags. Keep it up, this is good stuff.

    fav’d

  7. Fred

    Does page-break-before: always; not work in Chrome? Can’t seem to get it.

  8. I vowed never to buy any printed material a few months ago and here I am, making effectively a print-only web page. Can’t wait for the future, but in the meantime, thanks for the help.

  9. Daniel R

    Thanks for this great article. I’ve noticed that the print-version of your pages don’t show those annoying page-info headers/footers (that give you the url, the page count, etc). How on earth did you manage to get rid of them?

    • Daniel R

      Reading through your style.css, I could answer my own question. The code snippet below squeezes the headers out of printing scope, and if I apply some sensible padding on the elements on the page itself, I can get a well-formatted print layout without the annoying page info headers/footers. Neat!


      @media print {
      @page { margin: 0.5cm; }
      }

  10. universalGlove

    I didn’t read all the comments, so hopefully I’m not duplicating observations.

    I was successfully hiding content for print, until I added two new elements to a page.
    They wouldn’t hide, even though the “no-print” class was applied. No reason I could see for it to not work. Tried in both IE 8 and Firefox 11.0.
    However, both new elements were links – anchor tags made to display as block.
    Once I encased them in a div and applied no-print to the div, they stopped printing.

    Didn’t hide for print (IE8 and FF11):

    TEXT
    

    Successfully hid when printed (IE8 and FF11):

    
    	TEXT
    
    

    So, perhaps there are also issues when trying to hide for print any elements that are inherently inline type elements? or just links for some reason?

    I’ll have to look further and experiment sometime.

    • Stuart

      universalGlove,

      The reason your anchor tags are printing could be that the “display: block” in the screen style is overriding the “display: none” in the print styles.

      Try using a more specific selector in the print styles than you’re using in the screen styles, or if that’s not possible use “display: none !important” in the print styles.

      Stuart

  11. Tomi

    And yet, trying to print this page will show the ads and the comments section with inverted colours… at least make a proper example of your site if you preach about this.

  12. Jelle

    Nice article, though ironically, the comment box isn’t turned off when viewing the printing example for this page.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Access Mac Camera by Command Line

    With all of my recent command line tutorials, I've really gotten excited about the shell's simplicity and realized the true power of using the underlying technology of pretty UIs.  Since I work from home, I spend a lot of time on video calls, so when...

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...