Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 09-04-2009, 06:19 AM   #1
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
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.
Attached Files
File Type: zip content001.xhtml.zip (8.6 KB, 324 views)

Last edited by pdurrant; 09-04-2009 at 10:08 AM. Reason: fixing case of preserveAspectRatio
pdurrant is offline   Reply With Quote
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,635
Karma: 3856660
Join Date: Oct 2008
Location: Luxembourg
Device: PB360°
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
Advert
Old 09-04-2009, 06:42 AM   #3
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
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.
Jellby is online now   Reply With Quote
Old 09-04-2009, 10:04 AM   #4
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 71,367
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
Quote:
Originally Posted by mtravellerh View Post
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.
pdurrant is offline   Reply With Quote
Old 09-04-2009, 12:15 PM   #5
Valloric
Created Sigil, FlightCrew
Valloric ought to be getting tired of karma fortunes by now.Valloric ought to be getting tired of karma fortunes by now.Valloric ought to be getting tired of karma fortunes by now.Valloric ought to be getting tired of karma fortunes by now.Valloric ought to be getting tired of karma fortunes by now.Valloric ought to be getting tired of karma fortunes by now.Valloric ought to be getting tired of karma fortunes by now.Valloric ought to be getting tired of karma fortunes by now.Valloric ought to be getting tired of karma fortunes by now.Valloric ought to be getting tired of karma fortunes by now.Valloric ought to be getting tired of karma fortunes by now.
 
Valloric's Avatar
 
Posts: 1,982
Karma: 350515
Join Date: Feb 2008
Device: Kobo Clara HD
Quote:
Originally Posted by pdurrant View Post
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. The problem is so ingrained it's going to take a while to root out. Goes double for Qt doing a piss-poor job 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.
Valloric is offline   Reply With Quote
Advert
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 04:36 AM.


MobileRead.com is a privately owned, operated and funded community.