Optimize your website for print in 5 minutes

Is it really useful? I think so! People who print pages on the Internet are probably more numerous than one might think. And it takes 5 minutes, so just do it!

Let’s take a screenplay (almost) like in Hollywood movies:

Mister Nextdoor will not have access either to Internet or to his computer this weekend and did not have enough time to read a long article, but very important for what’s happening next. So he decides to print it to read it later on the plane (yes, Mr. Nextdoor is lucky, he is going on vacation). Once the printing is done, he realizes a little jaded (because yes it’s not the first time) that absolutely all the internet page came out. He ends up with 7 printed pages of an article that needed maybe 3… The menu, related articles, social media sharing links… Everything is there! Anyway, Mr. Nextdoor is relieved, he will be able to read his article “How to conquer your fear of flying?”.

You have to declare a dedicated CSS file for printing. In the header of your pages, you have to add a link to this file by specifying “print” for the “media” attribute, unlike others which usually specify the media “all” (screen, printer, etc.). Check out this page to know more about the media types.

Note: I use the “!important” keyword to redefine a style already present. The value specified with the “!important” will always overwrite the others.

@media print { [my CSS code here] } is useful to make a CSS code interpretable only in case of printing. If you use this annotation around a piece of CSS code, then you can integrate it into a CSS file used for all media (media="all"). I used both the annotation and the “print” media, just to be sure, but this is not mandatory.

Another (often complementary) solution is to add a dedicated CSS class to hide particular elements when printing. This is useful when the item has no specific attributes (no identifier or a too generic CSS class that we don’t want to hide on the whole page…).

For instance, I have this “noprint” class:

.noprint {
display:none !important;
}

Now, any element of my site that uses the “noprint” class will be hidden when printed. It cannot be easier!

To see the result in action, you can print this article (consider the planet by doing a print preview or printing as a PDF…).