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 05-21-2020, 11:39 PM   #1
kaiaua
Junior Member
kaiaua began at the beginning.
 
Posts: 6
Karma: 10
Join Date: May 2020
Location: Waikato, NZ
Device: kobo
top margin padding in Apple Books

I am new to making ebooks, but I have to do a lot, about 60, which is a backlist for a small press publisher.

This must be an old question, but the epub file I've made is formatted with large top margins - it's the style of the book, which is very short stories that begin part way down each page.

Its format looks great on a kobo, or on kindle previewer, or calibre ereader, etc. With margin-top set to 180px; in the style sheet.

However, when it goes into Apple Books on an ipad the top margins are gone. And there are blank pages between the short chapters where the top margins should be. Is this a familiar problem with a well-known solution? How to have top-margin padding show up on the Apple Books app?

thanks.
kaiaua is offline   Reply With Quote
Old 05-22-2020, 04:06 AM   #2
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 62,373
Karma: 257470363
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
Don't use px as measurements in ePubs, as its size is undefined, even though commonly 1/72nd or 1/96th of an inch.

I suspect what you're seeing in Apple Books is the top margin forcing the text onto the next page, because it's being rendered too big.

A percentage might be what you need here.

I suggest posting a snippet of your HTML and CSS.
pdurrant is online now   Reply With Quote
Advert
Old 05-22-2020, 04:19 AM   #3
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: 57,145
Karma: 52070132
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, PRS-650, PRS-T1, nook STR, iPad 4, iPhone SE 2020, PW3
Quote:
Originally Posted by kaiaua View Post
I am new to making ebooks, but I have to do a lot, about 60, which is a backlist for a small press publisher.

This must be an old question, but the epub file I've made is formatted with large top margins - it's the style of the book, which is very short stories that begin part way down each page.

Its format looks great on a kobo, or on kindle previewer, or calibre ereader, etc. With margin-top set to 180px; in the style sheet.

However, when it goes into Apple Books on an ipad the top margins are gone. And there are blank pages between the short chapters where the top margins should be. Is this a familiar problem with a well-known solution? How to have top-margin padding show up on the Apple Books app?

thanks.
For one, this is an eBook and what may work for a print book (pBook) does not always work for an eBook. You also have to remember that with an eBook, you could be reading on many different size screens. For example, reading on an iPhone SE is a very different screen size then reading on a Kobo Libra H2O or a Kobo Clara HD. On an iPhone Se, the top margin space that you've set won't work well at all. it will be way too much space at the top. A pBook is formatted for the size the pages are. your 180px (It is not a good idea to use a fixed size measurement which px is) is about 11em. That's a huge amount of wasted screen space and will look awful. The smaller the screen, the worse it will be. Don't duplicate the pBook formatting if that's not going to work as an eBook. I've seen pBook formatting duplicated too many times when it doesn't work for an eBook.. Use formatting that works for an eBook.

As for why it's not working in books (formerly iBooks), it might be that books doesn't like px in the margin. Try em and see what happens. If it still doesn't work, post the CS and the relevant HTML code so we can see how this is being coded.

Last edited by JSWolf; 05-22-2020 at 04:30 AM.
JSWolf is offline   Reply With Quote
Old 05-22-2020, 06:02 AM   #4
kaiaua
Junior Member
kaiaua began at the beginning.
 
Posts: 6
Karma: 10
Join Date: May 2020
Location: Waikato, NZ
Device: kobo
thanks for the replies.

I managed to find a solution, which is that the pages work correctly with a 'padding-top' but not a 'margin-top' setting.

So I reset the margin-top to 0, put in the padding-top and they appear as I planned.

It looks pretty good on an ereader (kobo), reasonably good on Apple Books, but yes, probably wouldn't work on a phone, I'll do some more testing with it.

thanks again.
kaiaua is offline   Reply With Quote
Old 05-22-2020, 08:41 AM   #5
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: 57,145
Karma: 52070132
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, PRS-650, PRS-T1, nook STR, iPad 4, iPhone SE 2020, PW3
Quote:
Originally Posted by kaiaua View Post
thanks for the replies.

I managed to find a solution, which is that the pages work correctly with a 'padding-top' but not a 'margin-top' setting.

So I reset the margin-top to 0, put in the padding-top and they appear as I planned.

It looks pretty good on an ereader (kobo), reasonably good on Apple Books, but yes, probably wouldn't work on a phone, I'll do some more testing with it.

thanks again.
Personally, I would find an 11em gap to be a poor choice in formatting the eBook. Even on a Kobo (H2O with 6.8" screen) I would find it ugly.
JSWolf is offline   Reply With Quote
Advert
Old 05-22-2020, 05:40 PM   #6
kaiaua
Junior Member
kaiaua began at the beginning.
 
Posts: 6
Karma: 10
Join Date: May 2020
Location: Waikato, NZ
Device: kobo
I tried all the top-margin-padding settings with 4em, it does look better.

The title pages actually start further down the page than when set at 180px! As the font is large, but the other pages start up nearer the top, together they work well.
kaiaua is offline   Reply With Quote
Old 05-23-2020, 01:24 AM   #7
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 62,373
Karma: 257470363
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
Quote:
Originally Posted by kaiaua View Post
I tried all the top-margin-padding settings with 4em, it does look better.

The title pages actually start further down the page than when set at 180px! As the font is large, but the other pages start up nearer the top, together they work well.
It is not usually a good idea to use em for the top margin. Unless you really want the space at the top to be proportional to the font size the reader chooses.
pdurrant is online now   Reply With Quote
Old 05-23-2020, 06:21 AM   #8
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,185
Karma: 10999743
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
... and an absolute unit is not good, because you don't know the screen size it will be read in.

... and a % is not good, because a % in top/bottom margin is actually relative to the element's (usually the screen's) width, not height, so the margin will be larger in landscape than in portrait orientation!
Jellby is offline   Reply With Quote
Old 05-23-2020, 06:25 AM   #9
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: 57,145
Karma: 52070132
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, PRS-650, PRS-T1, nook STR, iPad 4, iPhone SE 2020, PW3
I use a small em for the top margin of the chapter header. I find it works better. Also, if the text size was needed to be increase, the top margin would not be too large.

I use 0.8em as my small top margin though 1em works as well.
JSWolf is offline   Reply With Quote
Old 05-23-2020, 06:27 AM   #10
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: 57,145
Karma: 52070132
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, PRS-650, PRS-T1, nook STR, iPad 4, iPhone SE 2020, PW3
Quote:
Originally Posted by Jellby View Post
... and an absolute unit is not good, because you don't know the screen size it will be read in.

... and a % is not good, because a % in top/bottom margin is actually relative to the element's (usually the screen's) width, not height, so the margin will be larger in landscape than in portrait orientation!
When did % become related to width? I think that's not correct. It's related to height. And done right, it will be related to the height of the screen or window.
JSWolf is offline   Reply With Quote
Old 05-23-2020, 08:10 AM   #11
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,185
Karma: 10999743
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by JSWolf View Post
When did % become related to width? I think that's not correct. It's related to height. And done right, it will be related to the height of the screen or window.
Since CSS 2.1 at least (https://www.w3.org/TR/CSS2/box.html#margin-properties):

'margin-top', 'margin-bottom'
[...]
Percentages: refer to width of containing block
Jellby is offline   Reply With Quote
Old 05-23-2020, 10:41 AM   #12
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 62,373
Karma: 257470363
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
Goodness me. I never knew that. But it seems that you can set the top margin to a percentage in a page context, and it'll be on the page height, not width. That might be an option, but I don't know how to do it for a single page.
pdurrant is online now   Reply With Quote
Old 05-23-2020, 10:47 AM   #13
jhowell
Wizard
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 3,619
Karma: 34402287
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Oasis 2, Fire, iPad Air 2, Nexus 7
The "vh" unit (percent of viewport height) would be good to use for this case. Too bad it is not universally supported.
jhowell is offline   Reply With Quote
Old 05-23-2020, 11:54 AM   #14
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,185
Karma: 10999743
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
There seems to be an exception for @page, but that's CSS3, and ePub 2 is CSS 2.1, as far as I remember (https://www.w3.org/TR/css-page-3/#page-properties):

The normal rules for CSS properties apply with the following exceptions:
[...]
Percentage values on the margin and padding properties are relative to the dimensions of the containing block. For right and left values, percentages are relative to the width of the containing block; for top and bottom values, percentages are relative to the height of the containing block.
Jellby is offline   Reply With Quote
Old 05-23-2020, 03:04 PM   #15
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: 57,145
Karma: 52070132
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, PRS-650, PRS-T1, nook STR, iPad 4, iPhone SE 2020, PW3
Quote:
Originally Posted by Jellby View Post
There seems to be an exception for @page, but that's CSS3, and ePub 2 is CSS 2.1, as far as I remember (https://www.w3.org/TR/css-page-3/#page-properties):

The normal rules for CSS properties apply with the following exceptions:
[...]
Percentage values on the margin and padding properties are relative to the dimensions of the containing block. For right and left values, percentages are relative to the width of the containing block; for top and bottom values, percentages are relative to the height of the containing block.
Exactly. That's what I was saying. You originally said percent was based on width.Since we are talking top margin, width would have made no sense.
JSWolf 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
Troubleshooting Odd text appearing on top margin of Kindle books (both on iPad and Voyage) solitarywolf Amazon Kindle 7 07-14-2016 01:54 PM
CSS: Margin vs. Padding ButWhy Workshop 6 07-31-2015 12:55 PM
Top-margin (bottom-margin?) for Kobo? Notjohn Sigil 14 02-28-2015 06:43 AM
CSS margin instead of margin-top, etc. icallaci Conversion 24 10-19-2013 09:52 AM
calibre ignore margin-top and margin-bottom bender Calibre 2 12-11-2009 06:58 AM


All times are GMT -4. The time now is 07:47 AM.


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