EPUB validates, and breaks in iBooks - Page 2

_savage · 01-25-2013, 10:24 PM

There's only one stylesheet in my book, and it contains these settings:

Code:

body {
 /* widows: 0; */
 /* orphans: 0; */
  margin: 0;
  padding: 0;
  border: 0;
}

I used to have a "width:100%;" and "height:100%;" in it as well, but I removed that as per above discussion.

If I understand you correctly then I should add a "height:100%;" to the single pseudo-fixed-layout page (the one with the dedication, for exampe). This would ensure a correct vertical centering of that page's content:

Code:

<body style="height:100%;">
  ...
</body>

dgatwood · 01-25-2013, 10:32 PM

Quote:

Originally Posted by _savage

There's only one stylesheet in my book, and it contains these settings:

Code:

body {
 /* widows: 0; */
 /* orphans: 0; */
  margin: 0;
  padding: 0;
  border: 0;
}

I used to have a "width:100%;" and "height:100%;" in it as well, but I removed that as per above discussion.

If I understand you correctly then I should add a "height:100%;" to the single pseudo-fixed-layout page (the one with the dedication, for exampe). This would ensure a correct vertical centering of that page's content.

Ensure is too strong a term. As far as I can tell, iBooks seems to sometimes ignore this (because of an underlying WebKit bug; I filed a bug about it yesterday). However, I would say that it increases the probability of the reader getting it right.

Also, you should not be setting the margins to zero on normal, flowing pages. I've seen some readers (Kobo on iOS) break when I do that. YMMV. As a rule, you should avoid styling the HTML and BODY tags (beyond possibly setting fonts) unless you're doing something very unusual, such as the aforementioned special single-page layouts.

_savage · 01-25-2013, 10:37 PM

Quite the opposite of what JSWolf seems so say :-) I've never had a chance to try the books on Kobo, unfortunately.

JSWolf · 01-25-2013, 10:40 PM

Quote:

Originally Posted by _savage

I noticed the "widows" and "orphans" here, and added them to my styling. I assume it's these two that affect the spacing/stretching between paragraphs to fill a page, and to avoid paragraph breaks that would create widows and orphans.

Frankly, I am torn about this. Do I mind looking at widows/orphans if it gets me consistent spacing? Or do I accept large(er) gaps between paragraphs to avoid them?

Hmmm...

Widows and orphans have nothing to do with paragraph spacing.

Quote:

Widow
A paragraph-ending line that falls at the beginning of the following page/column, thus separated from the rest of the*text.

Orphan
A paragraph-opening line that appears by itself at the bottom of a*page/column.
A word, part of a word, or very short line that appears by itself at the end of a paragraph. Orphans result in too much white space between paragraphs or at the bottom of a*page.

You do end up with a ragged end of page. I prefer to have the end of most pages end at the same place regardless of how a paragraph is split. ADE defaults to a widow and orphan values of two.

JSWolf · 01-25-2013, 10:43 PM

Quote:

Originally Posted by DiapDealer

The widows and orphans bit is just Jon pushing his own agenda. Don't use them if you don't want to.

But he's not using them for an incorrect understanding of how they work. Instead of getting things all wrong, it would have been better to help by explaining what widows and orphans actually are.

_savage · 01-26-2013, 04:38 PM

Quote:

Originally Posted by JSWolf

But he's not using them for an incorrect understanding of how they work. Instead of getting things all wrong, it would have been better to help by explaining what widows and orphans actually are.

I know what windows and orphans are

Back in the days when I used LaTeX quite extensively, I ventured into the type setting field which was quite interesting.

Quote:

Originally Posted by JSWolf

Widows and orphans have nothing to do with paragraph spacing.

You do end up with a ragged end of page. I prefer to have the end of most pages end at the same place regardless of how a paragraph is split. ADE defaults to a widow and orphan values of two.

I disagree, and so does LaTeX for example. Both, Nook and LaTeX seem to aim at preventing ragged page ends by (subtly) increasing the spacing between paragraphs or other objects on your page in order to avoid widows and orphans. But that, sometimes, was too aggressive and I ended up with gaps in the text flow that I thought disrupting.

It doesn't really matter to me on an eReader device, to be honest. This should be a user setting, not an eBook setting. It does matter for printed books though, but that's not what I'm doing here anyway

JSWolf · 01-26-2013, 07:38 PM

Quote:

Originally Posted by _savage

I know what windows and orphans are

Back in the days when I used LaTeX quite extensively, I ventured into the type setting field which was quite interesting.

I disagree, and so does LaTeX for example. Both, Nook and LaTeX seem to aim at preventing ragged page ends by (subtly) increasing the spacing between paragraphs or other objects on your page in order to avoid widows and orphans. But that, sometimes, was too aggressive and I ended up with gaps in the text flow that I thought disrupting.

It doesn't really matter to me on an eReader device, to be honest. This should be a user setting, not an eBook setting. It does matter for printed books though, but that's not what I'm doing here anyway

With widows and orphans both set to zero, ADE does not monkey with line spacing between paragraphs. That is what you said widows and orphans (set to zero) would do and they won't do that.

_savage · 01-29-2013, 07:01 AM

Just when I thought things started to work on an iPad...

I noticed that text flows into an image:

Code:

  ...
  </p>
  <div style="width:45%; float:left;"><img ... /></div>
  <p>
  ...

This seems to work ok when the paragraph does not break across pages. When it does, however, the image starts at the top of the new page and is scaled correctly. However, the first line of the paragraph on the new page crosses the full width of the page (like on the page before where the image didn't fit) before subsequent lines are rendered next to the image.

I thought this could be solved by avoiding widows and orphans, but that didn't change a thing. There was some talk about wrapping the <img> into a <span> but that didn't work either (it's already wrapped in a <div> anyway).

Is this a page height issue? Or how do I go about this?

Jellby · 01-29-2013, 03:40 PM

What happens if you apply the style to the <img> rather than the <div>?

_savage · 01-30-2013, 06:33 AM

Quote:

Originally Posted by Jellby

What happens if you apply the style to the <img> rather than the <div>?

That's actually where I come from: it didn't work. I then read that, in order to scale images for some readers, one ought to wrap the image in a scaled <div> element. So I did that which took care of the proper scaling, yet that one line of text is being rendered over the image...

dgatwood · 01-30-2013, 06:53 PM

Top margin difference between the paragraph and the div, maybe?

_savage · 01-31-2013, 04:06 AM

Quote:

Originally Posted by dgatwood

Top margin difference between the paragraph and the div, maybe?

Hmm... thanks for the hint! I tried to add some padding to the <div>

Code:

  ...
  </p>
  <div style="width:45%; float:left; padding:1em 1em 1em 0;"><img ... /></div>
  <p>
  ...

which moves the image down so that the one line of text doesn't render across the image. (There's some overlap still, but that can be fixed with 1.5em or so.)

However, because the <div> floats left I hoped that the top of the image and the top of the paragraph would line up. As it is now the image is 1em further down.

Also, should I used padding or margin here?

Thanks

Turtle91 · 01-31-2013, 08:15 AM

Quote:

Originally Posted by _savage

Just when I thought things started to work on an iPad...

I noticed that text flows into an image:

Code:

  ...
  </p>
  <div style="width:45%; float:left;"><img ... /></div>
  <p>
  ...

According to the article you linked there is a second part to the solution. The first part is to wrap the image in a scaled <div> as you have done. The second part is to add a 'width="100%" ' to the <img>. I didn't see that in your code ...

Hey, I wonder, if everyone STOPPED accommodating the buggies in iBooks with all these workarounds, do you think Apple would get off their A$$le and FIX it?? Sort of like a union strike?? "ePubbers United"!!!

_savage · 02-01-2013, 03:39 AM

Quote:

Originally Posted by Turtle91

According to the article you linked there is a second part to the solution. The first part is to wrap the image in a scaled <div> as you have done. The second part is to add a 'width="100%" ' to the <img>. I didn't see that in your code ...

It's not in the code I posted, but it's in my book. That didn't change a thing.

Quote:

Originally Posted by Turtle91

Hey, I wonder, if everyone STOPPED accommodating the buggies in iBooks with all these workarounds, do you think Apple would get off their A$$le and FIX it?? Sort of like a union strike?? "ePubbers United"!!!

I'm very tempted to not bother bending over backwards just to please the iBooks audience. I'd rather have an eBook which conforms closer to the standards... So yes, I am with you on the strike

dgatwood · 02-02-2013, 04:03 PM

Quote:

Originally Posted by Turtle91

According to the article you linked there is a second part to the solution. The first part is to wrap the image in a scaled <div> as you have done. The second part is to add a 'width="100%" ' to the <img>. I didn't see that in your code ...

Hey, I wonder, if everyone STOPPED accommodating the buggies in iBooks with all these workarounds, do you think Apple would get off their A$$le and FIX it?? Sort of like a union strike?? "ePubbers United"!!!

There may have been a lot of bugs in the past, but I haven't experienced very many actual bugs in current versions of iBooks. Out of the huge list of CSS quirks that I've been putting together on the EPUB page on the MobileRead wiki, only two or three of them are quirks in iBooks. The other 19 bugs are are in one version of ADE or another.

01-25-2013, 10:24 PM	#16
_savage Connoisseur Posts: 53 Karma: 10 Join Date: Jul 2012 Location: Seattle, USA Device: Nook	There's only one stylesheet in my book, and it contains these settings: Code: body { /* widows: 0; / / orphans: 0; / margin: 0; padding: 0; border: 0; } I used to have a "width:100%;" and "height:100%;" in it as well, but I removed that as per above discussion. If I understand you correctly then I should add a "height:100%;" to the single pseudo-fixed-layout page (the one with the dedication, for exampe). This would ensure a correct vertical centering of that page's content: Code: <body style="height:100%;"> ... </body> Last edited by _savage; 01-25-2013 at 10:29 PM.*

01-29-2013, 07:01 AM	#23
_savage Connoisseur Posts: 53 Karma: 10 Join Date: Jul 2012 Location: Seattle, USA Device: Nook	Just when I thought things started to work on an iPad... I noticed that text flows into an image: Code: ... </p> <div style="width:45%; float:left;"><img ... /></div> <p> ... This seems to work ok when the paragraph does not break across pages. When it does, however, the image starts at the top of the new page and is scaled correctly. However, the first line of the paragraph on the new page crosses the full width of the page (like on the page before where the image didn't fit) before subsequent lines are rendered next to the image. I thought this could be solved by avoiding widows and orphans, but that didn't change a thing. There was some talk about wrapping the <img> into a <span> but that didn't work either (it's already wrapped in a <div> anyway). Is this a page height issue? Or how do I go about this?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
EPub validates in Sigil but not in Apple Store & B&N	ralphiedee	Sigil	8	08-08-2012 05:06 PM
iBooks: Avoid page breaks within table rows/cells	ckirchho	ePub	7	06-12-2012 03:11 PM
ePUB validates ok but still warns error!!!???	panda6855	ePub	5	01-12-2011 06:14 PM
iPhone iBooks page breaks not working	BartCubbins	Apple Devices	2	09-08-2010 10:25 PM

01-25-2013, 10:37 PM	#18
_savage Connoisseur Posts: 53 Karma: 10 Join Date: Jul 2012 Location: Seattle, USA Device: Nook	Quite the opposite of what JSWolf seems so say :-) I've never had a chance to try the books on Kobo, unfortunately.

01-29-2013, 03:40 PM	#24
Jellby frumious Bandersnatch Posts: 7,570 Karma: 20150435 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	What happens if you apply the style to the <img> rather than the <div>?

01-30-2013, 06:53 PM	#26
dgatwood Curmudgeon Posts: 629 Karma: 1623086 Join Date: Jan 2012 Device: iPad, iPhone, Nook Simple Touch	Top margin difference between the paragraph and the div, maybe?