I have an HTML document that I would like to be cleanly printable. After much googling, I can get bits and pieces of pagination to work, but I'm still missing something. My understanding is that there is a predefined counter 'page', automatically incremented on each new page, but it's not incrementing. I've tried on both FF 17.0.1 and IE 9 (FF works a little better). Here is the section of code in the .css file:
@media print {
/* counters 'page' and 'pages' are supposed to be pre-defined and
* incremented on each new page */
@page { /* does not seem to be working */
margin: 0.5in;
size: 8.5in 11in;
}
body { counter-reset: page 1; } /* works */
/* TOC */
a.pageref { text-decoration: none; } /* works */
a.pageref:after {
/* content: " . . . . . " target-counter(attr(href), page); */ /* not working */
content: " . . . . . " counter(page); /* works */
}
@bottom { content: "Confidential, property of my employer, Inc."; } /* not working */
.nav_links { visibility: collapse; } /* works */
h2, h3 { page-break-before: always; } /* works */
tr, td { page-break-inside: avoid; } /* not working */
}
... other CSS not shown works fine in both screen and print ...
The @page section appears to be ignored when I go to print the document. I can change the
size all I want, but still get letter-size layout. The 'page' reset works -- I can set any starting page. The link changes work (remove underlining, append leader and page number). The
target-counter bit was suggested in one article on building a Table of Contents (to pick up the actual page that link goes to), but doesn't work (perhaps it's CSS3?). The
@bottom seems to do nothing. The visibility property works.
Am I trying to use CSS3 on browsers that don't support it yet? I thought FF would be pretty up to date. Am I misusing "media = print"? I'm using the same .css file for both on-screen display (works fine) and printing from the browser (partially works). Do I need to give
media="print" in the <link> tag? When I do that, the on-screen presentation is messed up (no CSS at all) and there's no difference in the printed version.
I'm trying to do several things in the print version:
- Set page size and margins
- Table of Contents replace active links with leaders (. . . .) and actual page numbers (prints number, but page number is not updated). Once that works, I'll look at aligning the page numbers.
- Suppress on-screen navigation links (to TOC, etc.) (works)
- Put a copyright notice at the bottom of the page (does not show up)
- (TBD) put actual page number in lower right corner (@bottom-right?)
- Set explicit page breaks at sections (works) and suppress page breaks in the middle of table rows (fails)
Any suggestions? I have tried adding media="print" in the link, I have tried moving the @media section to the end of the .css file, and a lot of other things. There are lots of articles on using counters, but they are vague on 'page' usage. Finally, worst case I can add Javascript to switch between .css files for normal and "printer friendly", but I'd like to avoid that if possible. Thanks!