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: 31,872
Karma: 88206086
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
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, 121 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,613
Karma: 1620342
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
 
Enthusiast
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: 6,166
Karma: 4792399
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 offline   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: 31,872
Karma: 88206086
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
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,978
Karma: 350515
Join Date: Feb 2008
Device: Sony Reader PRS 505
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
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 10:36 PM.


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