On 11/2/2012 12:29 PM, Robert Gibbins wrote:
Some time ago I realised that although one can (at least in an epub reader) force a "page break" by dividing an html page into multiple divisions, each of which has the style {page-break-before: always}, the (vertical) margin-bottom of the last element in a previous page and the margin-top in the succeeding page collapse into each other using the usual HTML rules on vertical margin collapsing.
The practical effect of this is that unless the last element of the previous page is exactly at the bottom of that page, the margin-top of first element of the succeeding page effectively does not appear in the succeeding page.
Currently I get round this problem by starting each division which forces a page-break with: <div class="margin-top-anchor> </div> Where the css contains: div.margin-top-anchor {line-height: 100%; margin-top: 0em; margin-bottom: -1em} i.e. so that each division starts (I hope) with a zero height line which 'anchors' the margin-top of the next element onto its own page.
I had to think of this myself, once I realised what the problem was, and it does feel a bit like an ugly kludge (for example the zero height line still has a non-breaking space at its start). I wonder if any one knows a better way to achieve the same end.
I don't know that I have an answer to your question, but I can offer some tangentially related anecdotal experience. It has long been my practice to place <br style="page-break-before:always"/> wherever I wanted a page break to occur (for chapters are included in <div>s I would place a <br style="page-break-before:always" /> tag between the </div> of one chapter and the <div class="chapter"> of the following chapter). This practice arose from the fact that a few earlier user agents, most notably Microsoft Reader, recognized /only/ this element as the means of forcing a page break. This practice also worked well in the case of those user agents which did not respect the "page-break-before" style because even then it added yet a little more whitespace between chapters to make the chapter break just a little more apparent. Interestingly, this construct does not work in Adobe Digital Editions, at least in version 1.7.2.1131 which I have installed. In collapsing vertical space, Adobe has apparently decided that <br> elements should be included in the calculation. Thus, <p>One or more complete sentences relating to a single theme or idea.</p> <br /> <p>One or more complete sentences relating to a single theme or idea.</p> gets collapsed so that there is no vertical spacing between the two paragraphs. It also appears that the decision to ignore the <br /> element occurs before the application of styles, so not only does my <br style="page-break-before:always"/> element fail to add vertical space, it also fails to create a page break! A little more experimentation revealed that if 2 <br /> elements were place between paragraphs, one of them would be rendered--but neither of them would case a page break even when correctly style. Indeed, I can't seem to ever get ADE to respect the page-break style on a <br> element. If the page break style is added to a <h?> element, ADE /will/ generate the page break, but, as you noted, getting some vertical space before the header is problematic. I tried <h4 style="page-break-before:always><br />Chapter One</h4> and ADE correctly started the chapter on a new page but the <br /> element was collapsed away. <div> <br /> <h4>Chapter One</h4> does seem to give the vertical space you are seeking. ADE also collapses the page-break style correctly, while ignore the <br/> element, so my extreme case of: <div class="chapter" style="page-break-before:always"> <br style="page-break-before:always" /> <h4 style="page-break-before:always"> <br /> Chapter One</h4> gives results identical to the simple case just above it. Using <div style="page-break-before:always"> </div> gives me just the effect I am looking for, so perhaps it ought to be my new default markup. I don't know what ePub user agent you are using for your tests; that would be helpful information. In the Firefox ePub plugin, and in the Android CoolReader app (my current favorite) the page-break style is ignored, and all the <br/> elements are rendered as would be expected. I have not yet viewed the file in the Nook app for Android, or the Aldiko reader; that will be a task for another day. If the problems you are seeing are restricted to one particular user agent, maybe the thing to do is to just keep doing what you're doing, and wait for the user agent to get it right. A note on attributes: You have used "class='margin-top-anchor'" to indicate styling whereas I have added styling directly to the affected elements. I will no doubt elicit a storm of controversy, but my general rule is that classes used for no purpose /other/ than styling should be avoided; they make no sense. So, <div class="chapter"> with a corresponding CSS of div.css { page-break-before:always; } makes sense to me, as the <div> is classified by what it /is/ (a chapter) rather than how it should be displayed. On the other hand, <div class="center"> with a corresponding CSS of div.center{ text-align:center; } doesn't make sense to me. The <div> isn't a "center", and there is no reason you would want to alter its presentation. If it's supposed to be centered, and there is no real presentational alternative, just put the styling right on the element to be styled.