News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

print media in CSS -- how to?

Started by MrPhil, December 19, 2012, 11:00:50 AM

Previous topic - Next topic

MrPhil

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!

Advertisement: