View Full Version : Auto-resizing title page


pdurrant
09-04-2009, 07:19 AM
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.

mtravellerh
09-04-2009, 07:29 AM
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?

Jellby
09-04-2009, 07:42 AM
If I remember correctly, by defining the viewBox, you set the coordinates for your page, that is, you can then put something in the middle by specifying (300,400) as the coordinates.

As for the ratio and preferences, see the preserveaspectratio (http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute) property. With "XMidYMid meet" you set it to take the most space possible while preserving the aspect ratio of the page (it's desirable for images, it may not be needed for a title page like this), and, if the actual screen is larger in some dimension, the page is centered.

pdurrant
09-04-2009, 11:04 AM
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?

What Jellby said.

A corrections to my original post. preserveaspectratio should be preserveAspectRatio. There's something weird going on with the HTML Tidy part of Sigil that's killing the case of attributes in SVGs. It's logged in the list of issues and Valloric knows about it.

Valloric
09-04-2009, 01:15 PM
A corrections to my original post. preserveaspectratio should be preserveAspectRatio. There's something weird going on with the HTML Tidy part of Sigil that's killing the case of attributes in SVGs. It's logged in the list of issues and Valloric knows about it.

... and is really, really pissed off at Tidy for screwing it all up (http://code.google.com/p/sigil/issues/detail?id=120). The problem is so ingrained it's going to take a while to root out. Goes double for Qt doing a piss-poor job (http://code.google.com/p/sigil/issues/detail?id=91) of integrating WebKit SVG support.

I haaaaate bugs in libs I depend on. I have enough of my own to worry about thank-you-very-much.