Design

Create Your Own Print Stylesheets

By August 3, 2016 No Comments

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.

Executive's Guide to Web Development

80 pages of topics and tips to navigate your way to a better website.

Leave a Reply