Log in / Register

Forum › Bugs

float: top-next + page: namedpage causes 2 bugs

Chris Thorman
I want to float a div to the top of the next page, and have that page be different (different headers, footers, size, etc.) (and incidentally, to contain only the floated element -- nothing more.) Just floating the div works great. But, when I add the "page:" property which is needed to specify different page properties, 2 bugs happen:

1) An unwanted (and unwarranted), blank, page is introduced before the page tat
2) The "flow" is interrupted. I.e. the text before the floated element stops and doesn't pick up until after the page(s) containing the floated element. What should have happened, is enough text to finish filling the first page should have been included, then the page containing the floated element, and then the text should continue on the next "regular" page.

Here is a snippet:

@page {
@top-center { content: "Most pages have a header."}
@bottom-center { content: "Most pages have a footer."}
}

@page photopage {
@top-center { content: normal;}
@bottom-center { content: normal;}
}

div.photopage {
float: top-next;
page: photopage; /* 2 bugs: this causes an extra page break *and* interrupts text flow. Commment this out to get normal floating behavior */
page-break-before: avoid; /* This is not a workaround -- has no effect */
}

In next posting in this topic I will include entire content of a full test page that demonstrates the problem.

I have been hunting hard for workarounds but have not found any yet.

This bug is impacting a current project, so I'm pretty eager to find a workaround or to get a fix in hand.

-c
Chris Thorman
<html>
<head>
<title>
Page Float Bug Test
</title>
<style>
* {
font-family: Times
}
@page {
@top-center { content: "Most pages have a header."}
@bottom-center { content: "Most pages have a footer."}
}

@page photopage {
@top-center { content: normal;}
@bottom-center { content: normal;}
}

div.photopage {
float: top-next;
page: photopage; /* 2 bugs: this causes an extra page break *and* interrupts text flow. Commment this out to get normal floating behavior */
page-break-before: avoid; /* This is not a workaround -- has no effect */
}
div.ImageBlock {
}
div.SimulatedImage {
height: 5in;
width: 4in;
border: 3pt solid black;
}
p.caption {
font-style: italic;
}
</style>
</head>
<body>
<p>This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space.</p>
<p>This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space.</p>
<p>PARAGRAPH BEFORE THE FLOAT</p>
<div class="photopage">
<div class="ImageBlock">
<div class="SimulatedImage">
</div>
<p class="caption">This is the caption of the image.</p>
</div>
</div>
<p>PARAGRAPH AFTER THE FLOAT</p>
<p>This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space.</p>
<p>This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space. This is a very long paragraph whose only purpose is to take up lots of space.</p>
</body>
</html>
mikeday
Thanks Chris, I've added this issue to the roadmap.
yet
This issue is still open in PrinceXML 8. I encounter the same problem with a landscape table where PrinceXML is generating an empty
page before the table the text appearing after the table instead of appearing before and after the table. This is a truly annoying behavior.