View Full Version : Why won't ADE display the entirety of some flows


ldolse
12-18-2010, 10:30 AM
Working on a book that I've been converting from markdown text. Because it's markdown it's using blockquotes around some content - in particular quotes before each chapter, and I've added divs to float the content where I want it - still some tweaking to do in that regard.

I've got it pretty close to where I want the final result, and it looks pretty good in non-ADE epub readers on my desktop. I wanted to check it on the small screen though, so I loaded it on my 650.

What I'm seeing on the 650 is that only the very first 'page' of the flow is displayed. Any content that flows off that first page is never displayed - when I page forward it goes to the next flow instead. ADE on the desktop behaves the same. In the below example the last line I see on the 650 is 'Juana Ines de la Cruz'

Any ideas what aspect I need to change? I figured someone here might know rather than trying to figure it out through trial and error. One example page is below:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="../Styles/stylesheet.css" rel="stylesheet" type="text/css" />

<title></title>
<style type="text/css">
/*<![CDATA[*/

@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }
/*]]>*/
</style>
</head>

<body class="calibre">
<div class="sectionblock">
<h2 class="calibre7" id="calibre_toc_3"><span class="chapterheader">CHAPTER</span> <span class="chapternum">2</span></h2>

<h3 class="calibre2" id="heading_id_2">Chapter Title</h3>

<blockquote class="calibre4">
<p class="calibre5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisicing.</p>

<blockquote class="calibre4">
<p class="calibre5">—J<span class="smcps">UANA</span> I<span class="smcps">NES</span> D<span class="smcps">E</span> L<span class="smcps">A</span> C<span class="smcps">RUZ</span></p>

<p class="calibre8"><em class="calibre9">Reply to the Bishop of Puebla</em> (1691), who had attacked her scholarly work as inappropriate for her sex</p>
</blockquote>
</blockquote>

<p class="calibre3"></p>

<div class="softbreak">
<p class="calibre3">&nbsp;</p>
</div>

<blockquote class="calibre4">
<p class="calibre5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit .</p>

<blockquote class="calibre4">
<p class="calibre5">—B<span class="smcps">ERTRAND</span> R<span class="smcps">USSELL</span></p>

<p class="calibre8"><em class="calibre9">Skeptical Essays,</em> I (1928)</p>
</blockquote>
</blockquote>
</div>

<p class="calibre3"></p>
</body>
</html>


And the related styles:
.calibre {
display: block;
font-family: serif;
margin-bottom: 0;
margin-left: 5pt;
margin-right: 5pt;
margin-top: 0;
padding-left: 0;
padding-right: 0;
page-break-before: always;
text-align: justify
}
.calibre2 {
display: block;
font-size: 1.17em;
font-weight: bold;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
margin-top: 1em
}
.calibre3 {
display: block;
margin-bottom: 0.3em;
margin-left: 0;
margin-right: 0;
margin-top: 0
}
.calibre4 {
display: block;
margin-bottom: 1em;
margin-left: 1em;
margin-right: 1em;
margin-top: 1em
}
.calibre5 {
display: block;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0
}
.calibre7 {
display: block;
font-size: 1.5em;
font-weight: bold;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
margin-top: 0.83em;
page-break-before: always
}
.calibre8 {
display: block;
margin-bottom: 0;
margin-left: 1em;
margin-right: 0;
margin-top: 0
}
.calibre9 {
font-style: italic
}
.chapterheader {
border: transparent;
border-top: 3px solid #000
}
.chapternum {
font-size: 4em
}
.sectionblock {
display: block;
float: right;
margin-right: 5%;
margin-top: 3em;
width: 60%
}
.smcps {
font-size: 80%;
white-space: pre
}
.softbreak {
display: block;
letter-spacing: 2em;
margin-bottom: 1.2em;
margin-top: 1.2em;
text-align: center
}

ldolse
12-20-2010, 11:08 PM
Discovered that the cause of this was using 'float' in the css for the div. Trying out different options to achieve the same effect now.

Would this be considered a bug in ADE, or am I doing something out of spec?

charleski
12-22-2010, 05:46 AM
An element that's floated exists outside the normal document flow (http://www.cssnewbie.com/css-float-property/). Clearly, when it comes to paging, ADE only considers the primary flow, and any elements outside that are restricted to the page on which they first appear.

So I suppose it's not really a bug as such, more a side-effect of css2's lack of any sort of decent page model. Other renderers (such as calibre's viewer) handle this in a more friendly fashion, however, so it's worthy of a note.