Entity view (Content)

How to avoid your web printing page being cut off

By lchen
Feb. 17, 2011

If you are wondering why you can't get the web page to print out properly, you are not alone. Sometimes the portions of the printed pages are printing blank, large gaps in printed material where there shouldn’t be, and/or the entirety of the page is never fully printed. Wondering how to print out a web page without cut offs and blankouts? There are just too many factors involved. Today I just want to indicate three factors that you may need to be aware of.

First, look at your style.css file, if any of the containers you're trying to print are floated, they'll get cut off like you're seeing. Make sure you turn off all the floating that you can without destroying your layout in your print.css.

The Website Redesign Project
Thinking about a website redesign? Don't miss this!

 

Second, an important issue to keep in consideration for the print CSS is that the absolute positioning can “cut” some parts of the page, rendering them non-printable. To prevent this from happening, restore the positioning of those elements.

Third, if overflow element is set to 'hidden' in your style.css, it may cause your text to get cut off as well. In print.css, set “overflow: visible” instead of “overflow: auto” or “overflow: hidden” on div. The definition of overflow auto is: “If overflow is clipped, a scroll-bar should be added to see the rest of the content” —but scroll bars don't exist on printed pages.

To cut a long story short, you should steer clear of using floats, fixed positioning and overflow. Here is my example to set up the predefined behavior for all elements of the page as shown below:

body, h1, h2, h3, ol, ul, div {     width: auto;     border: 0;     margin: 0 5%;     padding: 0;     float: none;     position: static;     overflow: visible; }

Another factor you may want to consider is using page break syntax. It specifies where page breaks should and shouldn’t occur. CSS provides three useful properties for specifying page break behaviour—“page-break-before”, “page-break-after”, and “page-break-inside”. You can play around with these properties, but they are not fully supported by some browsers. However, it is still a good idea to make use of them.

Hope these css tips will help you to solve the above common problem and get your web page looking good on the paper.

Post Tags: