A List Apart

Menu
Issue № 182

Print It Your Way

by Published in Browsers, CSS, Graphic Design, Accessibility44 Comments

Web developers have various methods for creating print friendly versions of their websites. By using a server side routine or print stylesheets, the print version may strip out images and navigation that lose their meaning on the printed page, and perhaps display the page in a single column using a different font with a different size.

But what happens when there is no printable version, or the printable version includes ads or other settings that don’t suit you, the user? That’s where user stylesheets come in. Armed with a little CSS knowledge and some web development tools, you can easily create your own print versions formatted exactly the way you want them. Once you get the hang of it, you’ll be doing it everywhere, and you won’t look back.

Currently, you’ll need a few specific tools to make these techniques work, although we may eventually be able to do this with other user agents:

  1. Get yourself a copy of Mozilla Firefox if you don’t have one already.
  2. Install Chris Pederick’s Web Developer’s Toolbar if you haven’t already.

How does this work?

These techniques rely on a few things, not the least of which is the assumption that any site that has substantial content employs some type of predictable templating system that uses the same display techniques for all articles across the site (or site section). Once you find out where the content is located in the markup, you can isolate it and format it to look exactly the way you want.

These techniques are really quite simple in principle:

  1. Expose the grid of the website.
  2. Isolate the element (usually a div or table cell) that contains the   content you are after.
  3. Use CSS to format the page with appropriate font sizes, widths, and   margins.
  4. Use CSS to selectively show and hide the other parts of the page   as you see fit.
  5. Save the CSS for later to create an instant custom printable view.

The most difficult part is figuring out which CSS selectors you’ll need to isolate the content that you want — and that is only difficult if the site uses a template structure that is convoluted. In this case, we’ll start with a nice simple example: Boxes and Arrows.

Take an x-ray of the site

The web developer’s toolbar allows you to easily take an X-Ray of the site, exposing its skeleton structure. Outline the site’s grid with “Outline Block Level Elements” or “Outline Table Cells.” Once you’ve done that, you’ll want to use “View ID and Class Details” from the Miscellaneous menu. Now your web page will look something like this.

Isolating your target

Now that we can see where our target is, we need to isolate it with CSS. With Boxes and Arrows, we are lucky — all the main content appears in the appropriately titled “contentBox.” With other sites, you may not be so lucky.

Once you have identified the target, give it a different background colour or change its border properties so that it is easily recognizable from everything else on the page. Set the container and all its descendants to be visible, then move to the top of the editing area and hide everything else:

  * {
    visibility: hidden;
  }
  
  #contentBox * {
    visibility: visible;
  }

Format to your taste

At this point, you have a good shell. For printing purposes, it is a good idea to include a width on your main container. (I use 6.5” as a default, but you can choose something appropriate for your printer and margins.)

You can now format the text, changing fonts, colors, and sizes as you wish. For Boxes and Arrows, the simple addition of width and some font restyling was enough:

  #contentBox * {
    visibility: visible;
    width: 6.25in;
  }
  
  p {
    font-family: "Bitstream Vera Serif";
    font-size: 10pt;
    line-height: 14pt;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: "Bitstream Vera Sans";
  }

Weed as necessary

Now you can hide other components on the screen that you don’t want to print. For Boxes and Arrows, we added the following rules to hide a few other elements to save space.

  .figright, #readMore, #metainfo,  #recent,
  .twocol, .clear, .row, .hr {
    display: none;
  }
  
  * img {
    height: 0;
    width: 0;
    position: absolute;
  }

Setting a height and width of “0” for images and absolutely positioning them removes them from the document flow. If we had simply hide the images, large gaps might appear within the page because they still take up space within the flow of the document. Obviously we don’t want to do this on every B & A article since some images are critical to understanding the articles themselves.

Save for later

Once you are happy with the way things look, save your user stylesheet. Make sure that you save your CSS often — when you return from Print Preview the editing area is gone, and you’ll need to reload to continue with modifications. Use “Load” to import your CSS file into the editing area.

Now that you have saved your CSS, you can pull it up anytime you want for that site. Here is our saved stylesheet for Boxes and Arrows:

  * {
    visibility: hidden;
  }
  
  #contentBox * {
    visibility: visible;
    width: 6.25in;
  }
  
  #contentBox {
   margin-bottom: -9in;
  }
  
  p {
    font-family: "Bitstream Vera Serif";
    font-size: 10pt;
    line-height: 14pt;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: "Bitstream Vera Sans";
  }
  
  .figright, #readMore, #metainfo,  #recent,
    .twocol, .clear, .row, .hr {
    display: none;
  }
  
  * img {
    height: 0;
    width: 0;
    position: absolute;
  }

Other tips and tricks

Create some Space: it may be difficult to distinguish between one div or table and another. Create a rule in the editing area to place margins around the various containers, dependent on the site’s layout technique:

  table {
    margin: 10px;
  }

or

div {
  margin: 10px;
}

Targeting elements: If you have trouble identifying any target on the page, you may want to use yet another great feature of the Web Developer’s Toolbar: the “View Style Information” from the Information menu. When you select this option, your cursor turns into a crosshair. Hover over the elements in your page and the status bar tells you where in the DOM tree the element is located. This is especially useful for elements nested deeply within the page.

Difficult targets: Table cells without labels are sometimes tough to isolate. Here is one of the more complicated sets of rules we’ve had to create so far. This displays the second table cell in the first row of the third table on the page by showing the second and third table cells, and then hiding the third with the next rule. It’s complicated, but it works:

  html body table+table+table tr td+td {
    visibility: visible;
    width: 6.5in;
  }  html body table+table+table tr td+td+td {
    visibility: hidden;
  }

Compatibility: The editing CSS feature of Chris’s great tool doesn’t work in Mozilla at this point because its sidebar implementation is different than Firefox. If you prefer to use Mozilla, you could use Firefox to edit and save the CSS and then use “Add User Style Sheet” from the Miscellaneous menu to apply the styles you saved.

44 Reader Comments

Load Comments