Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Good rules for setting up print css? [closed]

Tags:

I'm looking for any suggestion/rules/guides on making a decent print css for when a webpage is printed. Do you have any to offer?

like image 340
Bryan Denny Avatar asked Dec 30 '08 21:12

Bryan Denny


People also ask

What is print friendly CSS?

Printer Stylingensure you use dark text on a white background. consider using a serif font, which may be easier to read. adjust the text size to 12pt or higher. modify paddings and margins where necessary. Standard cm , mm , or in units may be more practical.

Which rule can be used to add printer specific styles?

You have seen @media rule in previous chapters. This rule allows you to specify different style for different media. So, you can define different rules for screen and a printer.

How do I stop an element from printing on two pages?

You can use page-break-inside="avoid" on <div> "B". This is probably closer to what you want. If "B" does not fit on the page with "A", "B" will all be moved to the next page.


1 Answers

Here are some general print styles to use to get better print outs:

/* Print styles */ @media print  {     tr, td, th {page-break-inside:avoid}     thead {display:table-header-group}     .NoPrint {visibility:hidden; display:none}     a {color:#000000} } 

The top one prevents page breaks inside of a table row

The thead style makes any rows in the thead tag repeat for each page that the table spans across.

NoPrint is a class I use to show something on the screen, but not in print.

And, I like to turn off link colors.

like image 125
slolife Avatar answered Sep 19 '22 03:09

slolife