CSS has done it again, with a single file of CSS a complicated page layout turns to a simple, clear, and friendly for printing purposes, but sadly the properties are not fully supported by recent browsers. Some days ago, I created a print version page for a client, and I would share the experiences in this post.
Include the Print Version
You can make a css file for the print-version style, such print.css
and call it to your page with a single line:
href="print.css" media="print" />
If you are lazy enough to create a new file, you can write directly into the same css file as the layout managed. @media
make you able to do this:
@media print {
/*Your CSS for Print Goes Here*/
body {
margin: 1cm; /*Set the margin*/
background: none;
}
#banner {
display: none;
}
/*End of CSS for Print*/
}
If you don’t have authorize to the HTML files, but still wants a separated css file for the print, you can use @import
rule in to existing css file:
@import url(print.css) print;
@media
and @import
supported in most recent browsers.
Get Rid the Unwanted and Clearer Contents
Let‘s say, you don’t want all banners, graphics, menus, and header appears on the printed version:
.banners, #graphics, #menus, #header {
display: none;
}
Don’t display all background images in all HTML tags:
* {
background: none;
}
Make the content fill all the paper:
#container, #content {
width: 100%;
}
The Pagebreaks
CSS provides properties to arrange breaks on documents to make it as separate pages in print mode. You can clearly recognize the function by properties’ name.
page-break-before:
Value: auto | always | avoid | left | right | inherit
Initial: auto
Applies to: block-level elements
Inherited: no
Media: visual, paged
page-break-before
page-break-after:
Value: auto | always | avoid | left | right | inherit
Initial: auto
Applies to: block-level elements
Inherited: no
Media: visual, paged
page-break-after
page-break-inside:
Value: avoid | auto | inherit
Initial: auto
Applies to: block-level elements
Inherited: yes
Media: visual, paged
page-break-inside
Those values means:
Auto: Neither force nor forbid a page break before/after/inside the element.
Always: Always break before/after/inside the element.
Avoid: Avoid a page break before the element.
Left: (For rendering to left and right pages.) Force one or two page breaks before the element so that the next page is formatted as a left page.
Right: (For rendering to left and right pages.) Force one or two page breaks before the element so that the next page is formatted as a right page.
By default, auto
will be used if no value specified.