Maltpress

Web Development


Built by maltpress

The old fashioned world of print

I printed out a web page today. Sometimes I like to do this. It means I can get my colouring pens out and highlight things, doodle immature stuff in the margins, make notes and generally read long articles without staring at a screen for hours. Print is not dead: not by any means. But people seem to keep forgetting to add print style sheets: probably the simplest of style sheets to create.

I have to say, however, that this is one of those “do as I say, don’t do as I do” posts…

How to do a print style sheet

There are lots of methods for creating a print-only stylesheet. The “old” way – which still works, and works well – is to load your print stylesheet in the head of your document, specifying that it’s for the “print” media type:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

Nice and easy, right? You can also set a media type on inline styles:

<style media="print">h1 {color: red;}
p {color: blue;}
</style>

These are great, but… neither is particularly WordPress friendly, because the styles aren’t enqueued properly. They won’t be minimized by plugins, aren’t as easy to override with child themes, they’ll not deal well with moving from production to live, and just generally aren’t the right way to use styles in WordPress. However, they’re the basis for how the right methods work.

Enqueue properly

To add a print style sheet properly, you can use wp_register_style and wp_enqueue_style. The register function looks like this:

wp_register_style( $handle, $src, $deps, $ver, $media );

Where $handle is the title of the stylesheet, $src is the path to the file, $deps is an array of the stylesheets this one is dependent on, $ver is the version number (good for cachebusting – it’s added as a query string to the end of the call to the stylesheet) and, finally, $media is the media type to use the stylesheet for. That’s the bit we’re interested in. How does this look in use?

function my_load_style() {
wp_register_style( 'mystyle', get_template_directory_uri() . '/styles/print.css', array( 'mainstyle' ), 1.0, 'print' );
wp_enqueue_style(  'mystyle' );
}

add_action( 'wp_enqueue_scripts', 'my_load_style' );

This would output the following to the page:

<link rel='stylesheet' id='mystyle-css' href='http://address/path-to-assets/print.css' type='text/css' media='print' />

Media queries and SASS

There is an alternative, although it’s far from ideal: you can use media queries in either your CSS or SASS (SASS being nicer because we can build the print style right there where we add the screen style). While this is probably quicker to build, you’re loading a lot of styles you won’t need into your stylesheet. You could argue that if you’re using SASS to minify everything the extra resource isn’t that much, but it does get much simpler if you keep different media types (if not sizes) separate.

For example, you can do this:

@media print {
h1 {font-size: 22px}
}

What goes in your print style?

The most basic print stylesheet would probably look like this:

body, html {color: black}

nav, footer, img {
display: none;
}

a {
text-decoration: none; color: black;
}

What we’re doing here is hiding the navigation (because we don’t need it on a bit of paper, natch) and the footer. We’re also assuming in this case that the user is interested in the text, not the images, so we’re hiding those too – we want to save the user as much ink as possible and certainly don’t want to waste it on what will probably turn out to be washed out, pixelated images. For a similar reason, we’re making sure all the text is black, including the links, because coloured ink is a precious resource.

Taking things further, we’d probably want to make sure we’re matching the print fonts match the site’s fonts (assuming your main styles are set for media=”screen”, not media=”all”), knocking header font sizes down a bit, and hiding all the buttons and forms – you’ll probably want to hide pretty much everything except the main body content. Sidebars and widgets can almost certainly go; comments should probably be removed as well, although it very much depends on the purpose of the site and how your users would want it working. If in doubt, take it out: the main thing people will want is the content.

The biggest difference is going to be on your contact pages: make sure that in hiding your images you’re not hiding any maps.

Finally, how do you test? Rather than printing out pages – or even pressing ctrl + p just to look at the print preview – you can use Chrome’s inspector. Click the menu button (three downward dots), select more tools -> rendering, and click “emulate print media”. You can use the inspector as normal.

Back to blog



Leave a comment


By using this site you consent to our use of cookies. To find out more, see our privacy policy. Continue