View Single Post
Old 12-20-2012, 10:25 PM   #16
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.
 
Posts: 248
Karma: 556004
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by Jellby View Post
Again, that 100% means 100% of the container's height, and the container (probably <body>) has no fixed height, but rather is as high as needed to fit its contents. As humans, we assume it means "100% of the screen height", but that's not what the spec says, and that's not what all renderers interpret (though it might be what some do).

Set it to "height: 10cm", or similar, instead, and it should work as expected (but not as wanted).

This, of course, unless I'm mistaken due to ignorance or misunderstanding of the specs
You're right. What I said wasn't quite complete. You'll also need to set sizes for the body and html tags and clear out their margins/padding.

It might also be worth using min-height instead of height just in case A. your content ends up on a device that doesn't support SVG, B. your fallback content is used, and C. it is taller than a screenful.


In other words:

Code:
<html style="min-height: 100%; width: 100%; padding: 0; margin: 0; border-width: 0;">
<body style="min-height: 100%; width: 100%; padding: 0; margin: 0;border-width: 0;">
<div style="min-height: 100%; width: 100%; padding: 0; margin: 0; border-width: 0;">
<object data="..." preserveAspectRatio="..." viewBox="0 0 100% 100%">
Optional non-SVG fallback HTML or image here
</object>
</div>
</body>
</html>
Because the outer html tag has no containing element, per section 10.1 of the CSS 2.1 spec (#1 in the numbered list), a width or min-height value of 100% causes it to fill the viewport (if it isn't already larger than the viewport) or the page, depending on whether you're talking about the web or paged media. In the case of an EPUB reader, I'd expect that distinction to be moot.

In an ideal world, we would all just use the new CSS3 viewport-relative lengths (vw and vh), but I suspect it will be many years before you can count on that unit being supported broadly enough to be useful.
dgatwood is offline   Reply With Quote