Hello, my name is: Amy

How do you optimize your webpages for print?

My formal education is in the printing industry, and I worked in that industry for 9 years. I know printing well. Once, while working at a commercial printing company, I got involved with redesigning their website. One of the requirements of the site was that it be able to be 'printed'. Admittedly, I laughed upon first hearing this. But in reality, it kind of made sense. Sure, probably no one was going to print it. But when you go to print a site and the page is filled with a bunch of garbage, you take note. It's one of those little details that often gets overlooked.

Turns out, it's one of those little details that's also pretty straightforward to set up.

Media Queries

When you're designing your web page, all of the styles that go into the sheet at the base layer are used everywhere. Media queries are what allow you to have different styles for different 'things', be it device type, orientation, width, height, even resolution.

The principle of responsive design is based around this as you're basically saying, @ this media of (min-width: 480px) do {/* these things */}. To use media queries for print, the syntax is simply:

@media print {
  /*
  * Things only for when page is printed
  */
}

The CSS Cascade will look within media queries first, but only to keep the ones that apply to the situation at hand. Meaning, in the code below, the p text will still be blue, because of the order. So, probably don't put your @media print {} styles at the top of your css document.

@media (min-width: 200px) {
  p {
    color: deeppink;
  }
}
p {
  color: blue;
}

So, what should I print?

Figuring out what should be excluded or specially styled on a printed page is specific to your site, and even each page. Here's some started things that you might consider doing:

How to preview without hitting ctlr/cmd + 'p' all the time

It got pretty aggravating to have to print the site when I wanted to see what I was changing. In Chrome, just like you can force a hover state, you can force a print media. The process is a little different, but the idea is the same.

Emulate rendering of 'print styles' in Chrome dev tools

  1. Click the three vertical dots in the upper right
  2. Click 'more tools'
  3. Click 'rendering'
  4. In the 'rendering' tab in your 'console drawer', click 'Emulate CSS media' and make sure 'print' is selected.

Even if it looks good in the broswer, and it looks good in the print preview, I would hightly recommend actually printing out a physical copy to make sure it feels right.

Putting it all together.

I took some time to implement this on this site. Here's how the document looked printing an article in the beginning.

I first started with hiding the navigation, comments, and making the header much smaller. Hiding all that unnecessary content looks like this:

@media print {
  .header__nav,
  span.header__hello,
  .header__more,
  .header__top-line,
  .comments {
    display: none;
  }
}

A link on a piece of paper is totally useless. I decided to keep the link formatting, but actually spell out the URL behind it. Super cool trick, when you use pseudo elements you can use attributes in the content of ::before and ::after by using attr(__). So, I don't necessarily want to target the link in my header, so I'm just going to target links inside a paragraph:

p a::after {
  content: ' (' attr(href) ') ';
}

Include a QR Code

I did this mostly because I have a running low level of psychosis. I got the idea to put a QR code on a printed page from this site. This setup is using the google charts API to do all the conversion of a URL that you provide, into the QR code. Genius!

Because this is a static site, compiled with Assemble, the process isn't as clean as what you see in the link above. I'm not totally thrilled with it, take it for what you will. I couldn't just neatly insert a URL with a server side language into the styles, and to the best of my knowledge you can't just add a property to a CSS pseudo element with javascript, so I'm throwing it in the head with javascript. It doesn't feel great.

<script>
  var head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style'),
    url = window.location,
    css = '@media print { body:after{ content:url(http://chart.googleapis.com/chart?cht=qr&chs=200x200&choe=UTF-8&chld=H&chl=' + url + ');}}';

  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }

  head.appendChild(style);
</script>

After all was said and done, here's what the article page looks like after I finished.

Comments