Thread: Auto-resizing title page
View Single Post
Old 09-04-2009, 06:29 AM   #2
mtravellerh
book creator
mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.
 
mtravellerh's Avatar
 
Posts: 9,657
Karma: 3856660
Join Date: Oct 2008
Location: Luxembourg
Device: Kindle Scribe
Quote:
Originally Posted by pdurrant View Post
With the generous help of this forum, I now have my resizable title page working nicely. This is done by coding the entire page as an SVG including text and image(s).

I attach the xhtml file from my epub that gives the code necessary - the SVG itself would be a lot neater if ADE supported letter-spacing and text-anchor. I have just reported both these lacks to Adobe as "feature requests". Let's hope...

Anyway, I hope this sample page helps others with the same task - how to produce a good-looking title page on any size of screen that just takes up the one page.

The important bits are that it has the following at the start of the file:

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>

<html xmlns="http://www.w3.org/1999/xhtml">


and that the SVG starts with

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 800" width="100%" height= "100%" preserveaspectratio="xMidYMid meet">

the viewBox attribute defines the coordinates used in the SVG that follows. It doesn't have to be 0 0 600 800 at all, and it doesn't limit the image to a 600x800 screen size. The vital bits are the width and height being 100% (of the available display area) and the preserveaspectratio being set to xMidyMidmeet which ensures that the image is centred and proportionally scaled.
Thanks a lot. K for this going your way.

One question: The viewBox coords being quite obsolete, why did you at all define them?

If you have a viewer screen with a different ratio, what dimension takes precedence; is it the width or the heigth, or is it simply the first reaching 100% while the other adapts to preserve ratio?
mtravellerh is offline   Reply With Quote