May 06, 20

How to Create Printer-Friendly Pages With CSS

       

Would you like your readers to have a wonderfully designed copy of your posts when they print them? You can allow your visitors to print your work under your rules with a Creative Commons license (which is not the case of this blog) but they may not get they are seeing. To fix that, we create printer-friendly pages with css.

In this post, I am going to show you how to create printer-friendly versions of your posts using as example the Twenty Twenty Theme. However, you can do this with any theme. You may need to find more selectors though.

An Example With the Twenty Twenty Theme

Working on a backup of my posts – saving them as PDF files – I noticed the result in the printed page was not the same as what’s shown in the screen. Further more, there were elements included – like images, social links and even the footer – that are not necessary in a hard copy or PDF file.

Take a look at the following screenshots of a sample post: the first two, are pages one and two; and the third screenshot shows how it’s going to look like after we fix the issues.

Notice in the first two screenshots, that all the active elements (the ones with links) print their URL’s; the image is cropped and aligned to the left; the previous and next posts are also being displayed, just like the menus at the bottom.

Note: In these screenshots, the edit link is showing only because I’m logged in.

Printer-Friendly Pages With CSS: The CSS Media Queries

To work on this, we need to get familiar with two things: the “CSS Media Queries” and our own selectors.

The CSS Media Queries

As I always say, go to the source! Check out this one page tutorial from W3 Schools, to get familiar with the CSS Media Queries; there you’ll see that @media can hold four values: all; print; screen and speech. We are going to use the print value.

Know Your Selectors

To find the elements you’d like to fix, the easiest way is to use the Developer Tools. As I mentioned before, I’ll share in my example the main selectors for the Twenty Twenty Theme

What’s the Code?

To modify how the output is going to look like, all you gotta do is use the selectors as if you were changing your stylesheet with one exception: everything has to be inside the brackets of this new rule we’ll be using, like this: @media print {/*your code here*/}.

A Printer-Friendly Design for the Twenty Twenty Theme

At the bottom of your style sheet (which is common practice) write the following:

/* -------------------------------------------------------------------------- */

/*	Media Print
/* -------------------------------------------------------------------------- */
@media print {
/*your snippets will go here*/
}

Now, let’s move on to customize it, using the example (the screenshots) I showed you at the beginning.

Hiding the URLs and Some Elements

	a[href]:after,
	.post-comment-link.meta-wrapper,
	.featured-media,
	.sharedaddy,
	.pagination-single,
	.footer-nav-widgets-wrapper,
	#site-footer {
  display:none;
}

To Remove the Underline (If you want)

This snippet is up to you; you may want to leave the underline so people can know they can click on the links (in PDFs documents, of course) But if you want to remove them, simply write down the following:

	a {
		text-decoration:none!important;
		border-bottom:none!important;
	}

To Add a Note

I believe is a good idea to leave a note regarding the license of your work. If you haven’t done it yet, you can go to Creative Commons to get a license (for free, in a few seconds) and put it on your website. Then, copy the text a paste it in this snippet.

	.post-inner:after {
		content:'All Rights Reserved © My Blog by ME is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.'; /* replace with your license */
		font-size:1.2rem;
		color:#888;
		display:block;
		margin:auto;
		margin-top:2rem;
		width:70%;
		
	}

That’s a wrap!

Wasn’t this helpful?

JOIN 2 COMMENTS

Join the conversation

  1. Another great post Laly. Thanks. I also hid the post categories and the post meta: using:

    .post-meta-wrapper,
    .post-meta-single,
    .post-meta-single-top,
    .entry-categories,

Any thoughts?