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 08-03-2009, 08:22 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: 30,785
Karma: 85457880
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
Title Page?

Here's another layout problem I need help with.

I would like to reproduce a title page in my epub, as much as is possible. Obviously, I can put page breaks before and after the title page. But I'd like to do more.

The title page includes a large graphic in the middle of several lines of text. I'd like to arrange things so that this graphic resizes, within limits, to make the first line of text appear at the top of the page, and the last line of text appear at the bottom of the page.

So that, provided the text size isn't set too big, the title page will be just that - a single full page of text and graphic.

Any ideas anyone? I'm happy to play around with various suggestions, but I'm so new to CSS2 that I don't really have the first idea where to start trying to do this, if it's possible.
pdurrant is offline   Reply With Quote
Old 08-03-2009, 09:26 AM   #2
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: 5,971
Karma: 4346919
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
As a first approach, try setting "max-width: 50%" for the <img> (and change 50% to whatever fits your case better). It's not perfect, because the space taken by the text depends on font size and line wrapping, but it's probably better than nothing. However, I'm afraid ADE does not handle relative widths properly (I mean, in relation to screen size).
Jellby is offline   Reply With Quote
Old 08-03-2009, 10:29 AM   #3
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: 30,785
Karma: 85457880
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
Quote:
Originally Posted by Jellby View Post
As a first approach, try setting "max-width: 50%" for the <img> (and change 50% to whatever fits your case better). It's not perfect, because the space taken by the text depends on font size and line wrapping, but it's probably better than nothing. However, I'm afraid ADE does not handle relative widths properly (I mean, in relation to screen size).
Thanks - it'll probably end up something like that. I suspect that what I want just isn't available in ePUB, which isn't really a paged format.

Now, I think that a paged format for ebooks is bad - resizable, reflowable text is an essential part of what makes a good ebook IMO.

But sometimes it would be nice just to fill a page, like the cover does.

Hmm..... come to think of the cover, I suspect that I could do this with SVG. Make an SVG graphic that resizes to fill the page, and inside that have the text and graphics.

In fact, for what I want to do that sounds like my best bet. Of course, the text on the title page won't be in the flow of the text for text-to-speech, etc., but an alt tag should convey all that's necessary - there's isn't much text on a title page after all.

I guess I'll have to learn a bit more about SVG now. I wonder if Illustrator exports it...

Once Sigil stops removing my svg graphics, I'll give it a go. (Yes, the svg removal problem is on the bug list.)
pdurrant is offline   Reply With Quote
Old 08-03-2009, 10:32 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: 30,785
Karma: 85457880
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
ePub and Letter Spacing

[whoops - I meant to make a new thread. Oh well.]

It seems that the ePUB CSS sub-set doesn't include letter-spacing

Apart from adding (multiple) nbsp codes between letters, can anyone think of another way to get the same effect?

i.e. instead of

DESBAROLLDA

I'd like the text to display as

D E S B A R O L L D A

Adding spaces isn't something I'm keen on, as it will mess up any text-to-speech rather badly!

Last edited by pdurrant; 08-03-2009 at 10:33 AM. Reason: whoops - not a new thread
pdurrant is offline   Reply With Quote
Old 08-03-2009, 11:07 AM   #5
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: 5,971
Karma: 4346919
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by pdurrant View Post
I guess I'll have to learn a bit more about SVG now. I wonder if Illustrator exports it...
If you grab any of my ePUBs, in the Cover.xhtml file you'll find a simple SVG cover (commented out). You could use that as a starting point for "learning" (bu I'm no SVG expert, I just learned enough to do that )

Humm... No need to grab anything, here is a sample:

Code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet">
  <rect width="100%" height="100%" fill="rgb(86%,87%,44%)" />
  <rect width="100%" height="200" fill="rgb(0,0,0)" />
  <rect x="100%" y="200" width="200" height="100%" transform="translate(-200,0)" fill="rgb(0,0,0)" />
  <rect x="100%" y="0" width="200" height="200" transform="translate(-200,0)" fill="rgb(86%,87%,44%)" />
  <g fill="rgb(100%,100%,100%)" transform="translate(-230,0)">
    <text x="100%" y="70" text-anchor="end" font-size="30" font-weight="bold" font-style="italic">Lewis Carroll</text>
    <text x="100%" y="150" text-anchor="end" font-size="36" font-weight="bold">Sylvie and Bruno</text>
    <text x="100%" y="270" text-anchor="middle" transform="translate(130,0)" font-size="20">
      <tspan x="100%" dy="0">1889</tspan>
      <tspan x="100%" dy="30">1893</tspan>
    </text>
  </g>
  <g fill="rgb(0%,0%,0%)" transform="translate(-230,230)">
    <text x="100%" y="0" text-anchor="end" font-size="20" font-weight="bold">
      <tspan x="100%" dy="0">Illustrated by Harry Furniss</tspan>
    </text>
  </g>
  <image x="50" y="220" height="500" width="300" xlink:href="images/Cover.jpg" />
  <image x="100%" y="0%" height="180" width="180" transform="translate(-190,10)" xlink:href="images/LewisCarroll.jpg" />
  <image x="0%" y="100%" height="100" width="100" transform="translate(10,-100)" xlink:href="images/epub.png" />
</svg>
The code for your title page would probably be much simpler.
Jellby is offline   Reply With Quote
Old 08-03-2009, 12:12 PM   #6
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: 30,785
Karma: 85457880
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
Thank you! That looks like it will work very nicely.

Quote:
Originally Posted by Jellby View Post
If you grab any of my ePUBs, in the Cover.xhtml file you'll find a simple SVG cover (commented out). You could use that as a starting point for "learning" (bu I'm no SVG expert, I just learned enough to do that )

Humm... No need to grab anything, here is a sample:
pdurrant is offline   Reply With Quote
Old 08-07-2009, 01:03 AM   #7
ldolse
Wizard
ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.
 
Posts: 1,337
Karma: 123455
Join Date: Apr 2009
Location: Malaysia
Device: PRS-650, iPhone
Was just digging into this same problem myself. Seems like the problem with CSS is that it's all about text size, and not page size. There are a lot of scenarios I can think of with books where page size is more important - cover pages like this example, Children's books, other illustrated material, etc. Is SVG the only way to create content where everything scales relative to the page size?

I just tried out that svg cover. Looks great in Firefox, but Adobe DE mangles it in both the desktop app and my prs-505. Will SVG work with simpler layouts?
ldolse is offline   Reply With Quote
Old 08-07-2009, 03:54 AM   #8
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: 30,785
Karma: 85457880
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
Quote:
Originally Posted by ldolse View Post
Was just digging into this same problem myself. Seems like the problem with CSS is that it's all about text size, and not page size. There are a lot of scenarios I can think of with books where page size is more important - cover pages like this example, Children's books, other illustrated material, etc. Is SVG the only way to create content where everything scales relative to the page size?
ePub's XHTML and CSS2 subset don't seem to have anything to handle page level layout. (Well, there's some mention of windows and orphans, but that's all I spotted.)

Until ePub is extended some more, I think SVG is our best bet, as it's possible to specify that an SVG image should be scaled to fit the page size.

I haven't had time to play with this properly yet.
pdurrant is offline   Reply With Quote
Old 08-07-2009, 11:53 AM   #9
ldolse
Wizard
ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.
 
Posts: 1,337
Karma: 123455
Join Date: Apr 2009
Location: Malaysia
Device: PRS-650, iPhone
redundant post....
ldolse 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-resizing title page pdurrant ePub 4 09-04-2009 12:15 PM
title page & background images Nate the great ePub 13 07-28-2009 04:38 PM
Changing from Title-Author to Author - Title Amalthia Calibre 15 09-22-2008 08:41 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 09:01 AM.


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