CODEWITHSUNDEEP
htmlcssprinting
waa1990
waa1990

Reputation: 2413

how to make printable version of a webpage?

I would like to make a printable version of my web page. I have already tried using CSS to make a separate stylesheet for the page but it is not working properly.(i.e. it will not get rid of margin at the top also the menu bar background will not go away.) the page consists of hundreds of tables and when i do a print preview they also get split between pages sometimes.

these tables are generated dynamically according to users choices in checkboxes is it possible to add a printable link which will take the content from the current page and put it into a page where it can be mad more printer friendly?

Upvotes: 14

Views: 29084

Answers (4)

entropid
entropid

Reputation: 6239

There is no need of two different pages. You should create a different CSS sheet. After you copy the existing one, just set everything in black/white (or a few colours if you really need them), remove any menus and elements you don't need by putting display: none; in their CSS declaration, and to get rid of the unwanted margins. You should just put a margin: 0 or margin-top: 0 declaration here and there. If you don't show your HTML and CSS code is difficult to be more specific.

Upvotes: 6

Dissident Rage
Dissident Rage

Reputation: 2716

The easiest way is to make another stylesheet for the print version and add the attribute media="print" to the <link/> for it.

Upvotes: 2

gilly3
gilly3

Reputation: 91467

Use CSS with @media rules. Define your styles for displaying on the screen with @media screen and @media print for print-view. Control page breaks with page-break-* attributes.

@media screen {
    body {
        background-image: url(/images/background.png);
    }
}
@media print {
    body {
        background-image: none;
    }
    tr {
        page-break-inside: avoid;
    }
}

Upvotes: 9

Zoltan Toth
Zoltan Toth

Reputation: 47657

You can make printer friendly version of your page with @media print 

@media print {
        your styles here
}

For example in Foundation they have the basic rules to which you can add anything of your own:

@media print {
    * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
    -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
    p a, p a:visited { color: #444 !important; text-decoration: underline; }
    p a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
    tr, img { page-break-inside: avoid; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3{ page-break-after: avoid; }
    .hide-on-print { display: none !important; }
    .print-only { display: block !important; }
}

Upvotes: 17

Related Questions