Menu
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?
340
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.
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.
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.
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.
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
