Why write a blog post about print stylesheets? Good question! This day and age it seems like most folks just save content to their tablet or mobile phone for later viewing. The question you, the site builder, need to ask is “What percentage of incoming traffic will print my content?” Think about it. Have you ever printed off a recipe from Pinterest or a post from your favorite blog? How about product specifications or a parts list? There is a real need for a print stylesheet for the right kind of content. If you’ve come to the conclusion that you could have a high percentage of users printing your content, read on!
Today, let’s look at a few ways you can create printable pages for your website.
The Basics
You have two routes when implementing print stylesheets. You can either add a media query to your existing stylesheet which might look like
@media print {
}
Or, create a separate CSS file dedicated to print styles. This is my preferred solution
*Note if you would like your entire site’s css ignored when printing, make sure your link media attributes are divided into printand screen.
The Page
Now that we’ve got the basics in place we can begin to customize the output of our page. From this point on any customizations will depend mainly on your site’s design.
Navigation Links
For starters, let’s hide any navigation links in the header and/or footer. These links aren’t needed for printed content. By doing this one tweak we can drastically reduce the size of the page. Your code might look like
nav{
display: none;
}
Page Text
For the page text, a serif font is usually preferred. Georgia or Times should do the trick. Let’s also make the text color black and the background white (just in case this is a dark theme).
body {
font-size: 12pt;
font-family: Georgia,Times, serif;
color: #000;
background: #fff;
}
Images
For images, we want to make sure they take up little page real estate. You can be the judge of this adjustment. The main goal here is to preserve the image without wasting precious ink.
img {
max-width: 400px;
}
With this adjustment we’ve set all images to have a maximum width of 400px. Any image which is larger will automatically be resized to 400px wide. Alternatively, you could also hide all images with
img {
display:none;
}
Other Print Considerations
Try adding this simple selector
a:link:after {
content: ” (” attr(href) “) “;
}
This will automatically include the source url next to any text link. This can be handy for including linked content into the printed page.
With these simple adjustments you can transform your website into beautiful printable content. Have any other tips? Let me know in the comments.