09-04-2009, 06:19 AM | #1 |
The Grand Mouse 高貴的老鼠
Posts: 71,367
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
Auto-resizing title page
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. Last edited by pdurrant; 09-04-2009 at 10:08 AM. Reason: fixing case of preserveAspectRatio |
09-04-2009, 06:29 AM | #2 | |
book creator
Posts: 9,635
Karma: 3856660
Join Date: Oct 2008
Location: Luxembourg
Device: PB360°
|
Quote:
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? |
|
Advert | |
|
09-04-2009, 06:42 AM | #3 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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 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. |
09-04-2009, 10:04 AM | #4 | |
The Grand Mouse 高貴的老鼠
Posts: 71,367
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
Quote:
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. |
|
09-04-2009, 12:15 PM | #5 | |
Created Sigil, FlightCrew
Posts: 1,982
Karma: 350515
Join Date: Feb 2008
Device: Kobo Clara HD
|
Quote:
I haaaaate bugs in libs I depend on. I have enough of my own to worry about thank-you-very-much. |
|
Advert | |
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Problem with title page output | Skydog | Calibre | 0 | 03-21-2010 12:33 AM |
Auto-Page turning (PRS-505) | ijrobertson | Sony Reader Dev Corner | 8 | 11-14-2009 12:12 AM |
Title Page? | pdurrant | ePub | 8 | 08-07-2009 11:53 AM |
title page & background images | Nate the great | ePub | 13 | 07-28-2009 04:38 PM |
Book Designer - Removing Author/Title from each page | Stuart Young | Sony Reader | 1 | 02-21-2008 05:58 PM |