top margin padding in Apple Books

[kaiaua]

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.

[pdurrant]

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.

[JSWolf]

Originally Posted by kaiaua

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.

[kaiaua]

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.

[JSWolf]

Originally Posted by kaiaua

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.

[kaiaua]

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.

[pdurrant]

Originally Posted by kaiaua

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.

[Jellby]

... 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!

[JSWolf]

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]

Originally Posted by Jellby

... 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.

[Jellby]

Originally Posted by JSWolf

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

[pdurrant]

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.

[jhowell]

The "vh" unit (percent of viewport height) would be good to use for this case. Too bad it is not universally supported.

[Jellby]

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.

[JSWolf]

Originally Posted by Jellby

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.