Creating Print Stylesheets for Other Sites

2014-10-14

Creating a print stylesheet for your website is a nice optimization that your visitors will appreciate, especially if your site features articles that are longer or are technical in nature. Print stylesheets don’t take too much effort to create and maintain over time along with your site CSS.

But what if you’d like to have print stylesheets on someone else’s website?

Here’s an approach I’ve used to hack together simple print stylesheets that I’ve sent to other site owners as a contribution. This works very well for personal blogs and open source projects, both of whom are usually open to contributions.

Make a Local Copy

The first step is to make a local copy of a representative page from the site. For example, if the site is a blog, pick a good sample post (not the home page or an index page).

These steps require wget which already exists on most Mac/Linux systems, or can be installed for Windows.

  1. Download the sample page with wget: wget -p --convert-links URL
  2. If the downloaded file doesn’t have extension .html, rename it (e.g. if the download was index.php, rename it to index.html)
  3. Open the .html file in a local browser and make sure everything looks okay; some dynamic content such as ads may not appear correctly, but that’s okay
  4. Edit the .html file and after all the other CSS includes, add reference to a new local file: <link rel="stylesheet" href="print.css" media="all" />
  5. Create the print.css file and start with something that will be obvious like: p {color:red;}
  6. Refresh the .html file in the browser and make sure the local print.css is being picked up

Create Print Stylesheet

Now we’ll go through and build up print.css to hide and adjust content sections as needed to create a good looking printout. For this step I usually use Chrome or Firefox with their built-in Inspect Element features. You can make iterative changes to the print.css and refresh in the browser.

Hide Sections

Find all sections/divs that are not the content. This will typically be the header, footer, sidebar, ads, comments, and so on. You’ll need to adjust your CSS selectors depending on the content, starting with the most general and working down as needed.

For each section identified, set it to display:none. For example:

header, footer, div#leftnav {
    display: none;
}

Adjust Widths

Most site designs will have a hierarchy of <div> elements which result in the main content being narrower than the full page. We want to adjust that out to 100% to be more appropriate for a printout. A good starting point is the following:

div#content, #main {
    width: auto;
    max-width: 100%;
    float: none !important;
}

Adjust Fonts

You might need to adjust the font settings, particularly the size. There is also the question of serif vs sans-serif and which works better for print. (You choose.) You may also need to reduce font size and margins for heading elements <h1>, <h2>, etc. if they are being printed too big.

For example:

div#content, #main {
    font: 11pt Georgia, "Times New Roman", Times, serif;
    line-height: 1.3;
}

Optional

Depending on the site content, here are some other things to consider:

  • Hide any embedded video objects like YouTube
  • Hide comments/discussion
  • Set color to black on white background
  • Add URLs after <a> links

Contribute Back to Site Owner

Once you have your print.css file ready to go, I suggest adding comments to clarify the different changes you made. That way, the recipient can better understand what you’ve done, and make selective changes if they want.

Send the file to the site owner as a .txt file, or via a service like pastebin. They can use your contribution either as a standalone print stylesheet (<link rel="stylesheet" href="print.css" media="print" />) or directly inside an existing stylesheet at the end (@media print { ... }).

Good luck. If you use this technique and are successful in creating a print stylesheet for someone else’s site, let me know!

Posted in: Web