Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 01-25-2013, 10:24 PM   #16
_savage
Connoisseur
_savage began at the beginning.
 
_savage's Avatar
 
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.
_savage is offline   Reply With Quote
Old 01-25-2013, 10:32 PM   #17
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
dgatwood's Avatar
 
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by _savage View Post
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.
dgatwood is offline   Reply With Quote
Old 01-25-2013, 10:37 PM   #18
_savage
Connoisseur
_savage began at the beginning.
 
_savage's Avatar
 
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.
_savage is offline   Reply With Quote
Old 01-25-2013, 10:40 PM   #19
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 73,645
Karma: 127837858
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by _savage View Post
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 is offline   Reply With Quote
Old 01-25-2013, 10:43 PM   #20
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 73,645
Karma: 127837858
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by DiapDealer View Post
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.
JSWolf is offline   Reply With Quote
Old 01-26-2013, 04:38 PM   #21
_savage
Connoisseur
_savage began at the beginning.
 
_savage's Avatar
 
Posts: 53
Karma: 10
Join Date: Jul 2012
Location: Seattle, USA
Device: Nook
Quote:
Originally Posted by JSWolf View Post
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 View Post
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
_savage is offline   Reply With Quote
Old 01-26-2013, 07:38 PM   #22
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 73,645
Karma: 127837858
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by _savage View Post
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.
JSWolf is offline   Reply With Quote
Old 01-29-2013, 07:01 AM   #23
_savage
Connoisseur
_savage began at the beginning.
 
_savage's Avatar
 
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?
_savage is offline   Reply With Quote
Old 01-29-2013, 03:40 PM   #24
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
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>?
Jellby is offline   Reply With Quote
Old 01-30-2013, 06:33 AM   #25
_savage
Connoisseur
_savage began at the beginning.
 
_savage's Avatar
 
Posts: 53
Karma: 10
Join Date: Jul 2012
Location: Seattle, USA
Device: Nook
Quote:
Originally Posted by Jellby View Post
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...
_savage is offline   Reply With Quote
Old 01-30-2013, 06:53 PM   #26
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
dgatwood's Avatar
 
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Top margin difference between the paragraph and the div, maybe?
dgatwood is offline   Reply With Quote
Old 01-31-2013, 04:06 AM   #27
_savage
Connoisseur
_savage began at the beginning.
 
_savage's Avatar
 
Posts: 53
Karma: 10
Join Date: Jul 2012
Location: Seattle, USA
Device: Nook
Quote:
Originally Posted by dgatwood View Post
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
_savage is offline   Reply With Quote
Old 01-31-2013, 08:15 AM   #28
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,067
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Quote:
Originally Posted by _savage View Post
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"!!!
Turtle91 is offline   Reply With Quote
Old 02-01-2013, 03:39 AM   #29
_savage
Connoisseur
_savage began at the beginning.
 
_savage's Avatar
 
Posts: 53
Karma: 10
Join Date: Jul 2012
Location: Seattle, USA
Device: Nook
Quote:
Originally Posted by Turtle91 View Post
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 View Post
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
_savage is offline   Reply With Quote
Old 02-02-2013, 04:03 PM   #30
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
dgatwood's Avatar
 
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by Turtle91 View Post
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.
dgatwood is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 04:41 AM.


MobileRead.com is a privately owned, operated and funded community.