Forgotten CSS: Printing Your Website

How does your websites look when it’s printed? This article aims to get you thinking about basic changes you can implement to make your site display well for print media.

Before we jump in, clearly not all websites benefit from having print specific styles. If a website is primarily text and image content, say, a blog full of tasty cookie recipes, then that’s a fantastic candidate for a well thought out set of print styles. Running a website that showcases nothing but videos? It’s going to be wasted effort creating print styles without tackling the content first.

Quick Examples

You’ll need to print preview or similar on these pages for the comments to make sense.

Here is an example of how not to do it:

  • What use is the search bar on a printed page? Same goes for the login/sign up and social network links.
  • There is a lot of wasted space that creates awkward gaps in the layout.
  • The cookie picture size is excessively large, a smaller picture would accommodate a one page recipe.
  • Lots of unnecessary ‘try these next’ links and images after the main content.

Here is a better example. The print styles get rid of all the useless information and leave us just with the core recipe. Ideal.

What controls a website’s printed presentation?

CSS handles this, as per styling for a screen. CSS actually allows us to target specific media, usually screen, print or speech. By default, our styles will apply to the`all` media type. This might make you ask the question, why does my page look different when printed? Aside from the target media having its own constraints, e.g. print media has a page size, style rules may also be modified by the browser or your CSS framework just for print media. Taking the Bootstrap framework as an example, this has various rules that only apply for print. We’ll look at an example of this in just a moment.

Do I need to keep printing copies of my website to check changes?

Thankfully you do not. Chrome provides the ability to view and edit print styles in the same way a developer can view and edit screen styles, using the developer tools.

Remember this isn’t a complete representation. The viewport size doesn’t match a page size. There is also no concept of page breaks when viewing a website’s print layout using this method. Those caveats aside, it’s really useful.

Common Tips

Less is more

Some elements make no sense for print media. The most obvious being navigation and other interactive elements. A user won’t be able to interact with the printed result, so such elements can likely be hidden. I find it’s often useful to have a couple of utility classes, print-only and screen-only for these situations. An element that wraps our navigation could have no-print applied, where as a header copyright reminder specifically for print could use screen-only.

@media print {
    .screen-only {
        display: none;
    }
}

@media screen {
    .print-only {
        display: none;
    }
}

Working with page breaks

Depending on the content, it might be problematic to let the browser decide where to place page breaks. A diagram with the legend on one page and the diagram image on another is awkward to read. Fortunately, CSS provides techniques to describe where page breaks should and should not go using page-break-before, page-break-after and page-break-inside. Here is a good run down of how to use the page-break properties if you need them.

Top tip: Floats and page-break properties do not play nice, so worth setting float:none; on appropriate elements for print media as part of any page break troubleshooting you might find yourself doing.

All about content

The bootstrap framework has a print rule that automatically shows the href value for all links. This actually makes a lot of sense when you think about it, as a paragraph of text with occasional words linked to external pages will lose the meta data with the destination address unless it’s converted to visible text. Bootstrap does this with an ::after element next to all links showing the href value in brackets. You probably want to turn this off in some cases, such as next to your logo.

Summary

Whilst it’s easier to get interested reading up about the latest and greatest web development techniques, let’s not forget about the core features that have been around for years already. Writing style rules that target print media is one such feature, with plenty of potential to improve the real world usability of your next web project.

CSS Dev
Back to posts