Does the "page-break-whatever:avoid" property work? 1

[OsakaWebbie]

I'm starting a new thread with an issue that surfaced on another thread (thread215-1218630) because it seems to have taken on a life of its own.

The CSS properties "page-break-before", "page-break-within", and "page-break-after" are well documented on various authoritative web sites as being an established part of CSS2, with possible values of "auto", "always", "avoid", "left", and "right", and auto being the default. But have any of you had any success in either Firefox or IE with the value "avoid"? I can force a page break with "always", but I can't seem to avoid one, even though I give the browser ample opportunities to put the page breaks in appropriate places. In my case, every line is a <p> element, but there are various classes (some I don't mind breaks, others I try to keep together as a set). I can share code, but first, can anyone say that the properties actually work for them?

 

[BillyRayPreachersSon]

This might explain why I couldn't get "page-break-inside: avoid" working in either IE or Firefox:

http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21691820.html

Are you using Opera? That's the only browser that currently supports "page-break-inside".

Sure enough - it works fine in the latest version of Opera, but not the latest version of IE or Firefox (for me, regardless of whether it should or not).

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[OsakaWebbie]

I actually don't care much about page-break-inside (which is why I mistakingly used referred to it wrong in my first post - I noticed later, but decided not to bother posting again just to correct it), because almost never will one of my "paragraphs" (a line of a song) wrap. But I want to keep logical sets of lines together, and I want to prevent a break right after a song title - both would require either page-break-before or page-break-after.

Do page-break-before and page-break-after work in Opera? I don't have Opera installed, and it seems silly to install it just to find this out. I'm just curious, because I've been wondering if I'm just using the properties incorrectly.

 

[BillyRayPreachersSon]

WIthout using page-break-inside, Opera doesn't appear to play ball, either.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[OsakaWebbie]

WIthout using page-break-inside, Opera doesn't appear to play ball, either.

Are you saying that even if you have only single line elements, like:

<p class=nobreak>Something short</p>
<p class=nobreak>Something short</p>
<p class=nobreak>Something short</p>
<p class=break_ok>Something short</p>
<p class=nobreak>Something short</p>
<p class=nobreak>Something short</p>
<p class=nobreak>Something short</p>
<p class=break_ok>Something short</p>
...etc...

you still need to set all three properties to "avoid" for the class "nobreak" in order for anything to happen?

 

[BillyRayPreachersSon]

No... more that if I don't use page-break-inside at all, but simply set page-break-before and page-break-after to "avoid" on all elements, and then give the title and smallbreak elements a page-break-before of auto, it still doesn't work as you want.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[OsakaWebbie]

Hmph! This is pretty disappointing - I have been redesigning my code to put my eggs in the browser basket after having difficulty getting Word to cooperate (in supporting CSS, especially the "position" property). And after discovering that no browser ever implemented CSS3's true "column-count" property, I have been really putting my eggs in the Firefox basket, because it has a "-moz-column-count" property that does work.

If anyone has any thoughts as to how to tame my printing, let me know. Otherwise I'll just have to edit every printout to add hard page breaks by hand (my code does have a rudimentary Javascript-based edit feature to which I could ad code to add page breaks), but it will be a pain - I do several a week, and to put in the breaks I'll need to do Print Preview, close, edit, apply the change, then go back to Print Preview to look at the results, over and over for every break. And I don't even know if there is a hard column break to go in my "-moz-column-count:2" layout - if not, I'll be adding blank lines in the edit mode and then repeatedly checking the Print Preview to see if I got the right number. I'm not looking forward to it.

Thanks for checking Opera for me. I would hesitate to install a third browser on all the machines I would use for these printouts, but I suppose that's an option too...

 

[BillyRayPreachersSon]

Opera isn't so bad - the latest version is fairly standards compliant, and it's now free.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[OsakaWebbie]

Okay, I installed Opera, but I not only don't see it obeying the page-break commands, but it has other crazy problems. Here are some relevent snippets straight from source view on the results of my dynamic code:

.smallspace { font-size: 6pt; margin-bottom: 0; margin-top: 0; font-family: Arial, Helvetica; }
.chordlyrics { font-weight: bold; font-size: 12pt; margin-bottom: 0; margin-top: 0; margin-left: 10mm; text-indent: -10mm; font-family: "Arial Narrow", Arial, Helvetica; page-break-before: avoid; page-break-inside: avoid; page-break-after: avoid; 
  position:relative;
  margin-top:2.4pt;
  margin-bottom:12pt;
  top: 12pt; }
.chord { font-weight: bold; font-size: 12pt; margin-bottom: 0; margin-top: 0; margin-left: 10mm; text-indent: -10mm; font-family: "Arial Narrow", Arial, Helvetica; page-break-before: avoid; page-break-inside: avoid; page-break-after: avoid; 
  position:absolute;
  top: -12pt;
  font-weight:bold; }
...
<p class=smallspace>&nbsp;</p>
<p class=chordlyrics><span class=chord>D</span>We will <span class=chord>C</span>dance on the <span class=chord>G</span>streets that are <span class=chord>D</span>golden </p>
<p class=chordlyrics>The <span class=chord>D</span>glorious <span class=chord>C</span>bride and the <span class=chord>G</span>great Son of <span class=chord>D</span>man </p>
<p class=chordlyrics><span class=chord>D</span>Every <span class=chord>C</span>tongue and <span class=chord>G</span>tribe and <span class=chord>D</span>nation </p>
<p class=chordlyrics>Will <span class=chord>C G</span>join in the song of the <span class=chord>D Dsus D D2</span>Lamb</p>

For example, whenever there is supposed to be a chord at the beginning of a line (lines 1 and 3 in my example), Opera writes the first chord indented quite a bit, for some unknown reason (in the third line, it overlaps the second chord). Then, everywhere that a chord occurs on exactly at the beginning of the second word (lines 2, 3, and 4 in my example), the space right before that word disappears. Also, some ugly vertical overlapping and half-writing appears near page breaks, but I suppose if I get my page-break commands to work, that might be avoided. Finally, two-column output appears to not be supported - apparently Firefox is the only browser doing that yet.

If you copy this code, and repeat the lyrics part (including the "smallspace" line) over and over, you should be able to simulate what I have when I have several songs that span multiple pages. Does it work for you in Opera?

 

[OsakaWebbie]

I must be clouding the issue, as I'm not hearing from Dan (aka BRPS) or anyone else. Okay, simple question to Dan: can you post some code that you used that worked in Opera? If so, I can see what I am doing differently.

 

[BillyRayPreachersSon]

For Opera, I used "page-break-inside: never" (or is it "none"?) on DIV containers around each set of elements that I did not want broken.

I deleted the test page a while ago, but if the above information doesn't help, let me know, and I'll knock one up again.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[OsakaWebbie]

It's "page-break-inside:avoid", but I hadn't thought to try it with a DIV (and even if I had, I would have dreaded the additional coding for dynamically processing songs - processing per line is much easier than keeping track of blocks of lines). But I just now tried it with a static test page, and yes, that method definitely works in Opera. So even though it's a bit of work and a third browser to install on several computers and remember to use, I'll try coding that into my interface and using Opera for my single-column output layouts. Thanks - you get a star for that little snippet of insight.

Now all I need is for someone to develop a "Fire-pera" or "Oper-fox" browser! For some layouts I want two columns, which only works in Firefox, and for all layouts I want page break control, which only works in Opera. If anyone has any brilliant ideas about how I can have my cake and eat it too (two column layout with break control), I'm all ears.

 

[OsakaWebbie]

Time has passed, but this is still annoying me. It would be really nice to have a solution that works in all common browsers, but at the moment it doesn't even work in any one browser! Not only is two-column layout not yet supported in Opera, but it doesn't handle my chords feature very well either (which uses CSS position:relative and position:absolute to raise chords above lyrics). So I currently still use Firefox, and manually insert page breaks and/or blank lines to get it to come out right. Yuck!

So, I've been thinking... This is beyond my CSS experience, but would it be possible to use the "@page" features, defining a page box with a fixed size (I could insist on use of certain paper sizes, so that's not a problem), defining block elements (div?) to hold the text (two of them when doing two-column output), using only mm for the units of all my text-related size properties, and then keeping track of how many vertical mm I have used so far and changing to the next column/page when I need to?

I can sort of imagine it working out okay (of course that is just my imagination), except for one thing: I don't know how I would detect a line wrapping, to compensate in my running total. The initial content is generates using PHP, and at that point in the process there is no way to tell if something will wrap (font widths are completely unpredictable), but perhaps I could just spit out the basic content and then have a Javascript routine come along afterwards and put the finishing touches on it. Or is it impossible for even Javascript to detect something like the actual height of a div after it has been rendered, or a line wrapping, or something that would give me the clue I need? I know the question is in the grey area between HTML/CSS and Javascript, but before I go to the Javascript forum I would need to know more about how feasible just the CSS part of the idea is. Besides the line-wrapping issue, there may be other things that are purely HTML/CSS that are hard to implement - I have never used @page, and have barely gotten started with positioned div's, so I could be getting myself in deep water. What do you gurus think of this idea?

 

[OsakaWebbie]

Was my question crazy? Or is this thread just getting too long and scaring everyone away? ("Resistance is futile; you will be programmed.")