top margin padding in Apple Books - Page 2

Turtle91 · 05-23-2020, 03:10 PM

What is the height of a 'containing block' when you're device uses auto-scroll and doesn't have pages/screens??

1% of a 5000 word chapter would be a mighty large top margin...

(and yes, I know there aren't many 5000 word chapters...that was a slight exaggeration for illustration purposes)

I agree with jhowell that the 'vh' size would be more correct, but jswolf's 'small em' would be a better second choice... IMHO

Jellby · 05-23-2020, 03:57 PM

Quote:

Originally Posted by JSWolf

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.

But that was only for @page. Top margin for, say, <h1> is still relative to the width of the containing block (usually <body>).

JSWolf · 05-23-2020, 04:09 PM

Quote:

Originally Posted by Jellby

But that was only for @page. Top margin for, say, <h1> is still relative to the width of the containing block (usually <body>).

I dump @page. I've never seen an @page that was actually useful.

[code]<h1 class="chapter">Chapter One</h1>{/code]

Code:

.chapter {
  font-size: x-large;
  text-align: center;
  margin-top: 90%;
}

So if that was my code, you are saying that I would not get 90% of the height because it would be 90% of the width? That makes no sense given it's a top margin and not a left or right margin.

pdurrant · 05-23-2020, 05:11 PM

Quote:

Originally Posted by JSWolf

So if that was my code, you are saying that I would not get 90% of the height because it would be 90% of the width? That makes no sense given it's a top margin and not a left or right margin.

It may make no sense, but that's how the standard says it should be rendered.

Jellby · 05-24-2020, 04:33 AM

It makes sense, because "margin: 1%" would give the same margin all around, whatever it is.

pdurrant · 05-24-2020, 04:52 AM

Quote:

Originally Posted by Jellby

It makes sense, because "margin: 1%" would give the same margin all around, whatever it is.

You mean so that

margin: x%

has the same effect as

margin-top: x%
margin-left: x%
margin-bottom: x%
margin right: x%

I can see that. And I suspect it makes rendering easier too.

But it still seems very odd that margin-top should be based on the width.

Tex2002ans · 05-24-2020, 03:20 PM

Quote:

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):

There's also a ton of different "hackish" ways devices can render ebooks.

For example, many use CSS columns in the background, then just shift the viewport to the next column when you go to the "next page".

For more details, see the ebookcraft 2019 talk, "Pagination in the Browser: Why, What, and How". At ~20 mins in, she discusses the "Box vs. Column" methods.

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

05-23-2020, 03:10 PM	#16
Turtle91 A Hairy Wizard Posts: 3,347 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	What is the height of a 'containing block' when you're device uses auto-scroll and doesn't have pages/screens?? 1% of a 5000 word chapter would be a mighty large top margin... (and yes, I know there aren't many 5000 word chapters...that was a slight exaggeration for illustration purposes) I agree with jhowell that the 'vh' size would be more correct, but jswolf's 'small em' would be a better second choice... IMHO

05-24-2020, 04:33 AM	#20
Jellby frumious Bandersnatch Posts: 7,548 Karma: 19500001 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	It makes sense, because "margin: 1%" would give the same margin all around, whatever it is.