What are the most useful media = "print" specfic, cross-browser css properties?

Question

What are the most useful media="print" -specific, cross-browser CSS properties?

I think we have these 5 printable properties. A.

• run-in page before
• run-in page after
• break-in page inside
• widows
• orphans

Pls explain when and where to use them? Which are compatible with cross browser? and what other common CSS properties can be useful in print besides display:none ?

Answer 1

I use a famous article like A ( CSS Design: Going to Print ) and this article when I need to make a print version of a page. There are some common tags, but a lot depends on the css model (as well as the filling and container fields):

 body { background: white; font-size: 12pt; } #menu { display: none; } #wrapper, #content { width: auto; margin: 0 5%; padding: 0; border: 0; float: none !important; color: black; background: transparent none; } div#content { margin-left: 10%; padding-top: 1em; border-top: 1px solid #930; } div#mast { margin-bottom: -8px; } div#mast img { vertical-align: bottom; } a:link, a:visited { color: #520; background: transparent; font-weight: bold; text-decoration: underline; } #content a:link:after, #content a:visited:after { content: " (" attr(href) ") "; font-size: 90%; } #content a[href^="/"]:after { content: " (http://www.alistapart.com" attr(href) ") "; } 

Answer 2

I am using the following:

  /* Browser will TRY to avoid spanning content within across a page */ tr, td, th {page-break-inside:avoid} /* Repeat table headers when table spans a page */ thead {display:table-header-group} /* Apply to anything you don't want to print */ .NoPrint {visibility:hidden; display:none} 

Answer 3

Chris Coyer at css-tricks.com wrote a great article on this subject: http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/

Answer 4

In the spirit of sharing, here are a few rules that I regularly use. They fit well in SemanticUI, but may be useful elsewhere.

 [class*="printed only"] { display: none; } @media print { .printed { display: initial !important; opacity: 1 !important; } [class*="non printed"] { display: none !important; opacity: 0 !important; } } 

Screen display and printing

Use class="printed" . This is useful if you have tabs in the user interface, so you can make them print even if they are not currently displayed.

Display on screen but not print

Use class="non printed" . This is useful for navigation items and other materials that you do not want to print.

Do not display on screen, but print

Use class="printed only" . It’s convenient for me to include some metadata about the web page in the print version, which may not be relevant for the web version — for example, the date / time the page was created, the username of the person who printed the document, the link (if it is removed from the headers), and so on.