Re: Preventing vertical margin collapsing across page breaks

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>&nbsp</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">&nbsp;</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.
_______________________________________________
gutvol-d mailing list
gutvol-d-4LCm/o+qPMZ96Xl/[email protected]
http://lists.pglaf.org/mailman/listinfo/gutvol-d