-
-
Notifications
You must be signed in to change notification settings - Fork 454
Styling Printed Content
When printing web content, we can only go so far in reproducing content. At print time the user can choose paper size, orientation, scaling, grayscale, and other attributes that affect the printed output. Exact print sizes, page breaks and an exact 1:1 copy of styling may be difficult to obtain. If exact reproduction of content is needed, a library like jsPDF may be a better fit.
There are two methods for styling printed content with printThis.
- You can use the
loadCSSoption to include a special stylesheet for the printed content. This CSS file will only affect the rendered output of the print. - You can add the media query
@media print {}containing specific print styles to the current page CSS. This method has the added benefit of being able to set print styles for when users usectrl + Pinstead of triggering printThis.
While you can't force a user to select a page size, you can add styles for specific print widths or ranges using media queries. Just as you might set a screen size media query, you can set them for print sizes:
@media screen and (min-width: 1920px) { ... }
@media print and (min-width: 8.5in) { ... }Keep in mind there are many paper sizes and you may need to consider multiple page sizes depending on your audience.
There are several CSS attributes focused on positioning page breaks. There are some known limitations. There is also a [working draft] for paged media, but as a draft, it is subject to change and less support
Pagination and page break CSS values are directly affected by CSS float properties. Floated content areas are common, and this can cause clipper or missing content or unusual page breaks.
From How to Troubleshoot Print Style Sheets:
Any parent items that are floated won’t allow the page-break-* rules to work as desired. If you look again at the HTML, you’ll see the main and aside elements. There is a good chance that the main element is floated to the left and the asideto the right. Even though you are no longer displaying the aside in your print style sheet, the main element is still floated.
By default, browsers do not print backgrounds to save on ink/toner, but they do not adjust foreground colors. As a result, you may lose the ability to read light-colored text or content. Many print stylesheet guides
Chrome and Safari support a non-standard CSS property, -webkit-print-color-adjust which allows you to override user print settings and force the background to print.
Backgrounds in tables seem to be less consistent. You may be successful adding a <div> to the table cell and styling backgrounds on the div, instead/as well.
Most browsers will add a header and footer to printed pages with information such as the URL, page number, and perhaps date and time. There are no universal methods to hide these elements but using the @page directive to remove the margins currently works in Chrome and Firefox:
@media print {
@page {
margin: 0;
}
}You may need to add some margin or padding to the <body> tag so you do not print all the way to the edges.