If you’ve ever attempted printing out a webpage, you already know that sometimes it doesn’t work and sometimes it works like a breeze. Basically, if a website’s content is specifically designed for display on a computer screen, it won’t be able to send that data to your printer. The end result is a terrible looking webpage on paper, even though it looked just fine on your screen. So if you have a website and you want your pages to be printer-friendly so your visitors won’t encounter these problems, continue reading to learn how to go about doing so using CSS.
Define Print Stylesheet
The first thing you need to do involves defining a print stylesheet, and there are two ways that you can go about doing so. For example, you can make a separate stylesheet that contains only the rules required to print the page, with the media=”print” attribute. So, you would write:
<link rel=”stylesheet” media=”print” src=”my_print_stylesheet.css” />
Your other option would be specifying the print rules right in your stylesheet by utilising the @media print group and writing:
@media print {Â Â /* Print CSS rules go here */Â Â /* Note: You need a separate @media screen group for other rules */}
Improve the Printed View of the Pages
To improve the webpages’ printed view, you can do a few things.
Start by getting rid of any elements that really don’t need to be there, such as navigation menus, sharing buttons, and ads. You don’t need these to show up on printed versions of your site, and they will only end up getting in the way if they do. So utilize the display:none declaration in CSS in order to hide these elements. Otherwise, you can move them so that you can include them while still making the printed version easy to read.
If your webpage has sidebars, infographics, and excerpts, they may be removed or cut off when the page is printed. But because these are good features, you want to include them.
Another step you can take is removing the color from the printed versions of your site, as people often don’t want to waste expensive color printer ink.
Finally, you can also change your font to make the document easy to read from a bit of a distance. For example, use larger fonts for recipes that people may need to read while they cook. Stick with serif fonts, such as Times New Roman, rather than sans-serif options like Helvetica.
Boost Your Skills in CSS
If you want to ensure every webpage will look great online and on paper, stay on top of the latest CSS rules by taking courses or doing your research online. In this way, you can maintain your website yourself.
With these tips in mind, you can create a website that has pages that can easily be printed. Test it out on your own printer, making sure you have the right HP printer parts to keep your printer working like new, in order to be sure the rules that you set will always work.
