How to get a printer friendly version of a web page
SEE VIDEO BY TOPIC: Create a Print-friendly Stylesheet for Printable Web PagesContent:
How to create a printer-friendly website using print stylesheets
In this article, we review the art of creating printer-friendly web pages with CSS. Relatively few pages will ever be reproduced on paper. But consider:. Converting responsive, continuous media to paged paper of any size and orientation can be challenging. However, CSS print control has been possible for many years, and a basic style sheet can be completed within hours. The following sections describe well-supported and practical options for making your pages printer-friendly.
Personally, I use screen styles as a print base most of the time. However, I have used separate style sheets for applications with radically different outputs — such as a conference session booking system which displayed a timetable grid on-screen but a chronological schedule on paper.
The print. Alternatively, print styles can be included within an existing CSS file using media rules. For example:. Any number of media print rules can be added, so this may be practical for keeping associated styles together. Screen and print rules can also be separated if necessary:.
The following options replicate print styles on-screen. The most reliable option is the print preview option in your browser. This shows how page breaks will be handled using your default paper size. In Chrome, open the Developer Tools and select More Tools , then Rendering from the three-dot icon menu at the top right. Before doing anything else, remove and collapse redundant content with display: none;.
Typical unnecessary sections on paper could include navigation menus, hero images, headers, footers, forms, sidebars, social media widgets, and advertising blocks usually anything in an iframe :. It may be necessary to use display: none! It pains me to say this, but Flexbox and Grid rarely play nicely with printer layouts in any browser. If you encounter issues, consider using display: block; or similar on layout boxes and adjust dimensions as necessary.
Further suggestions include …. Standard A4 and US Letter paper can result in longer and less readable lines of text. Consider using CSS columns in print layouts. Users will not want to print decorative and non-essential images and backgrounds. You could consider a default where all images are hidden unless they have a print class:.
Ideally, printed images should use dark colors on a light background. A CSS filter can be used to invert and adjust colors in the print style sheet. Printed media often requires additional information which would not be necessary on-screen.
The CSS content property can be employed to append text to ::before and ::after pseudo-elements. For more complex situations, consider using a class such as print on elements which should only be visible when printed,. The CSS3 properties break-before and break-after allow you control how page, column, or region breaks behave before and after an element. Support is excellent , but older browsers may use the similar page-break-before and page-break-after properties. Note: be wary of over-using page breaks.
Ideally, printer output should use as few pages as possible. The break-inside and older page-break-inside property specifies whether a page break is permitted inside an element. The commonly supported values:. This can be preferable to specifying page breaks, since you can use as little paper as possible while avoiding page breaks within grouped data such as tables or images:. The widows property specifies the minimum number of lines in a block that must be shown at the top of a page.
Imagine a block with five lines of text. The browser wants to make a page break after line four so the last line appears at the top of the next page. Setting widows: 3; breaks on or before line two so at least three lines carry over to the next page.
The orphans property is similar to widows except it controls the minimum number of lines to show at the bottom of a page. The box-decoration-break property controls element borders across pages. When an element with a border has an inner page break:. Finally, CSS Paged Media page has limited browser support but provides a way to target specific pages so alternative margins or breaks can be defined:. The CSS page break properties can be placed within your screen or print styles because they only affect printing, but I recommend using them in print CSS for clarity.
Be aware that page break control is little more than a suggestion to the browser. Control over printing web media will always be limited, and results can vary across browsers. That said:. Adding a few page breaks and removing unnecessary sections will delight users and raise your site above competitors. Add it to your to-do list!
How to Print a Web Page
We now have access to digital media practically everywhere — on our computers, tablets, phones and so on. We can download and save these pages on any of our various devices as soft copies. Yet we do need to take the occasional printout; because sometimes you just need the hard copy in your hands.
You never know how people will choose to consume your website's content. They may choose to visit your site on a traditional desktop or laptop computer, or they may be one of the many visitors who is visiting on a mobile device of some kind. To accommodate this wide range of visitors, today's web professionals create sites that look great and work well across this wide range of devices and screen sizes, but one possible consumption method that many fail to consider is print. What happens when someone prints out your web pages? Many Web designers feel that if a web page is created for the web, that's where it should be read, but that is somewhat narrow-minded thinking.
How to Create Printer-friendly Pages with CSS
If you are wondering why you can't just click the print command and get the web page or other internet page you're looking at to print out properly, you're not alone. Too often pages get cut off at the margin so the ends of lines are missing or pictures are cut off, or blanks appear where words or images should be. This is pretty frustrating because you can see the words right there on the screen; they're there, but when you print them out they're gone. Never fear-- we a have a few how to tips and tricks for you to get those internet pages to print out nice, neat and complete. Before you print out a page, go to your browser menu usually the file menu and click on print preview. This will bring up images of the web pages as they will appear on a print out. If they look good, all you should have to do is click the print command, usually also found in the browser menu file window, and they will print out as shown.
Subscribe to RSS
If your website offers a lot of text information — such as user guides or tip sheets — then you'll want to give your visitors a tool for printing out that information. Instead of creating a separate document or PDF file, you can simply modify your website's stylesheet to be printer-friendly. It's fairly simple to modify your website with minimal effort and without changing your existing layout. While the print medium is more constrained than the screen, stylistically you can still experiment with what works.
Kayleigh is a web developer at TBH Creative, specializing in front-end development and responsive design. She likes to blog about a variety of web design topics, including design tips, the latest trends in the industry, and how to make your website more successful. There are still a variety of reasons users might decide making a hard-copy of a webpage is necessary.
3 Online Services to Optimize Printing a WebPage or Saving to PDF
Windows 10 will have the latest version of internet explorer installed onto your computer. Web pages are often bigger than one A4 page — you never quite know in advance how many pages will print out. You may end up with three pages of print when you only actually want one. We recommend pinning this to your taskbar for easy access. To pin: right-click and pin to Start.
How to Make Printer Friendly Web Pages
Printing a web page works like printing any document in any application: Choose Print from the File menu, work the Print dialog box, and then print. Assuming the printer is connected, the web page should print. But that is a big assumption. The first mistake is assuming that the Print command is on the File menu. Internet Explorer has no File menu, but it has a Print button on its toolbar. Clicking the button prints the web page, or you can display a menu that shows more printing options. The second mistake is to assume that you can fit all the content of a single web page on a single sheet of paper.
If your web site delivers value to your audience, chances are they are going to want to print pages out. Making sure desktop printers handle your web site well is another aspect of building a great user-experience. If the web page is just a little too wide to fit on one printed page, you get a wasted sheet with a little stripe of color on it. And, when you print the page, you get all the banner ads, logos, and navigation on your print-out. All you really wanted was the text and pictures on the page, which now happens to be a two-inch wide column down the center of the paper.
How to Make Any Web Page Printer-Friendly
Podcast: Play in new window Download. Ever try to print a web page? The reason for this is that website content is designed to be displayed on your computer screen, not sent to the printer to be put on paper.
Perhaps you need to print off instructions for fixing a computer problem, not everyone has a smartphone or tablet to access the internet while the computer is offline. However, a problem with a straight print off from most websites is they contain text, advertisements, images and design layouts. Here are 3 useful services to optimize webpages making them better for printing and also optionally save the page as a PDF.