Title Page?

[pdurrant]

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.

[Jellby]

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).

[pdurrant]

Originally Posted by Jellby

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]

[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!

[Jellby]

Originally Posted by pdurrant

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:

<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.

[pdurrant]

Thank you! That looks like it will work very nicely.

Originally Posted by Jellby

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:

[ldolse]

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?

[pdurrant]

Originally Posted by ldolse

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.

[ldolse]

redundant post....