Page breaks

Page breaks (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

Starhugger -> Page breaks (12/6/2006 17:14:43)
I'm trying to create a printing style sheet for a HTML page. I want it to keep certain lines together. I'm using tables to structure blocks of content. The first row uses THEAD so that it repeats at the top of the page if there's a page break within the table. This does work. The second row uses TBODY and is divided into two columns, with a list of links in the left and a paragraph of text in the right. I want to ensure that I don't wind up with only one line of the TBODY content before a page break. At the moment, that's happening on one of the pages. Here's a sample of the printing CSS I'm using, but most of it doesn't seem to be working: @media print { thead td { font-size: 12pt; } tfoot td { text-align: center; font-size: 9pt; } thead { display: table-header-group; } table.indextbl { orphans: 1; } tfoot { display: table-footer-group; } thead td, thead td { position: static; } table.chapter thead { page-break-before: always; } td.padded p { color: red; orphans: 3; widows: 3; } } td.padded is the right-hand column (padding on the left side), where the paragraph of text is. Even with widows/orphans set to 3, it still insists on breaking after one line of text. I finally put the color-change in the last line just to see if ANYTHING was getting through. It does indeed change the paragraph text color, but it still leaves the one line on the previous page. I don't think any of the other instructions are working either, which I put in there a while back. (For instance, the footer is not centering.) I thought I needed the other instructions to get the THEAD sections to repeat, but they seem to be doing it anyway by virtue of using THEAD and TBODY. I've tried page-break-before and page-break-after at various places in the table, at various element levels (table, td, p, etc.). I've tried putting the print CSS in a separate file (with media="print" in the style link), as well as putting it in the same CSS that it uses for the screen. Nothing changes where the page breaks. The colour of the text will change, but nothing else seems to have any effect. It's thumbing its nose at me, I swear! I'm testing it on IE7 using the print preview feature. The client's computers use IE6. Has anyone EVER got this to work?? What am I doing wrong? Starhugger ...who's getting a headache [sm=BangHead.gif]

jaybee -> RE: Page breaks (12/6/2006 20:33:00)
Basically my dear you are up a creek without a paddle. Fact is you can't tell which printer it's printing on, how they have their margins set, what size paper they're using, what the available font sizes are and so on and so forth. You will never get a page to break at the end of a page as a "page" is not definable. Have a read of this.

Starhugger -> RE: Page breaks (12/6/2006 22:01:54)
quote: ORIGINAL: jaybee Basically my dear you are up a creek without a paddle. Fact is you can't tell which printer it's printing on, how they have their margins set, what size paper they're using, what the available font sizes are and so on and so forth. You will never get a page to break at the end of a page as a "page" is not definable. Have a read of this. Thanks for replying, jaybee. I had skimmed that site before but didn't find it helpful. Guess I should have done more than skim. [;)] But the more I read, the more confoozled I get. So let me get this straight. There IS CSS code that lets you control page breaks, except that most browsers don't support it so they don't work? Yet I find dozens of websites that talk about this code that doesn't work in almost all browsers? I must be missing something. [>:] It shouldn't matter what printer it's on, what size page, etc. All I really want to do is the same kind of thing in a word processor where you say "keep these lines together" or "keep with next." There's no way to do that with CSS? SH

Starhugger -> RE: Page breaks (12/6/2006 22:14:35)
Also: when I use "page-break-after/before: always" it works! It does weird things with the chunk of text left on the page, but it does break where I put that code. So why can't I get "page-break-after/before: auto" to work? It's supposed to work the same way, if a page break happens within the element, right? SH

rubyaim -> RE: Page breaks (12/7/2006 0:19:44)
You can get print styles 'good enough' for tableless pages but as Jaybee said you can't control printers, margins, paper or printer settings. Print styles for data tables can be quite difficult but I've found if I keep tweaking they get to 'good enough' eventually. Other times I've just gone 'never mind' [&:] Would you be able to post more code? A dummy page with your table and sample content and your styles? There may be a few things left to do.

jaybee -> RE: Page breaks (12/7/2006 8:27:41)
quote: ORIGINAL: Starhugger Also: when I use "page-break-after/before: always" it works! It does weird things with the chunk of text left on the page, but it does break where I put that code. So why can't I get "page-break-after/before: auto" to work? It's supposed to work the same way, if a page break happens within the element, right? SH Because page-break is poorly supported in all browsers and it's unlikely to change due to the impossibility of defining a page.

Starhugger -> RE: Page breaks (12/7/2006 15:01:40)
Not to ignore jaybee's sage (if depressing) advice [;)] but I'm going to follow Sally's suggestion and post a dummy file. I've uploaded it to a test directory on my site: http://www.evolvingdoor.ca/testonly/testpage.htm Here's the print CSS for it. The sections that cross pages are the only ones where the paragraph is in a <p> code, so they show up as red (due to the test code below). Again: I'm testing it on IE7 (the client uses IE6) and testing the printed page using IE7's print preview. /* ----- PRINT STYLES ----- */ @media print { thead td { font-size: 12pt; } tfoot td { text-align: center; font-size: 9pt; } thead { display: table-header-group; } table.indextbl { orphans: 1; } tfoot { display: table-footer-group; } thead td, thead td { position: static; } table.chapter { page-break-before: auto; page-break-inside: avoid } td.padded p { color: red; orphans: 3; widows: 3; page-break-inside: avoid; } } Thanks! SH

jaybee -> RE: Page breaks (12/7/2006 15:49:06)

You need to test in both. IE7 is not IE6. Things that work in one don't work in the other.

You're using an external stylesheet. You shouldn't have the rules inside an @media

thead td { font-size: 12pt; }
tfoot td { text-align: center; font-size: 9pt; }
thead { display: table-header-group; }
table.indextbl { orphans: 1; }
tfoot { display: table-footer-group;	}
thead td, thead td { position: static; }
table.chapter { page-break-before: auto; page-break-inside: avoid }
td.padded p { color: red; orphans: 3; widows: 3; page-break-inside: avoid; }

goes in your stylesheet. You only use @media in inline styles.
http://www.yourhtmlsource.com/stylesheets/cssmediatypes.html

rubyaim -> RE: Page breaks (12/7/2006 17:50:04)
It's not so bad in IE6 really except the right table cells are cutting off (based on my settings and printer and using A4 size paper) - you can try this in your print style to work around that: table#container { table-layout:fixed; width: 99%; } There is a fair bit of white space on print so this could be tweaked a bit. It may be an idea not to print the images - will not help the problem but will save on ink and they are probably not required for a printed document. img {display:none;} You could play around with your td widths for print if the topics are not overly long (eg, make the cell that holds the topics 30%). If it is important that the cells do not break you could perhaps have a PDF alternative (though I'm guessing that defeats the entire purpose?). Edit: AFAIK Opera is the only Browser that supports orphans, widows, page-break-inside and page-break-avoid.

Page: [1]

0.0625