EPUB for iBooks bckgrnd img problem

[Hitch]

Hi, gang:

We're making a kids' book for iBooks. We're yanking our hair out. It seems, according to something I read by, I think, Liz Castro, that Apple deliberately disabled absolute positioning in iBooks 1.1. The net result of this is that suddenly, a "page" or pages created by using text atop a background image is no longer doable.

We've tried everything--and everything we've tried works perfectly in EPUBReader, Sigil, Lucidor, you-name-it...but not iBooks. We can't get the text atop the image to save our lives. We've tried divs, blockquotes, nested divs, z-index....we are out of ideas. What we get is one page of background image, one page of text, one page of bckground img, one page of text...or, ONE background image, then the rest of the text, and so forth.

If anyone here has ANY workarounds, other than the obvious make it in photoshop as a jpeg solution, that would be great. We've made a lot of other kids' books with jpegs, and they're okay...but that really won't work for this particular book. TIA.

Thanks,

Hitch

P.S. - I'm going to x-post this, or a link to this, in the Apple Device forum, to try to cover my bases, just FYI.

[jharker]

This is an interesting question that I've been meaning to look at for a while.

Can you post an example of a book that works everywhere else but not on the iPad? Then we can take a look and see if we can find the right tweaks to make it work.

[Fabe]

It is my understanding that it is currently impossible to use backgrounds in the current implementation of iBooks. - Fabe

[Peter Sorotokin]

Originally Posted by Hitch

...snip...

We've tried divs, blockquotes, nested divs, z-index....we are out of ideas. What we get is one page of background image, one page of text, one page of bckground img, one page of text...or, ONE background image, then the rest of the text, and so forth.

...snip...

Did you try SVG?

[charleski]

SVG was my first thought as well, and I've used it for this before. But, as usual on this forum, we need more information to work out what the problem really is.

SVG will work if you have a well-defined block of text that you want to overlay on an image - that's quite easy. If you want text to reflow freely with an image in the background of part of the text then the problem is more complex, though it may still be possible if you're prepared to render all the text in SVG, which may sacrifice some quality.

[Hitch]

You can't render text in SVG, iBooks does not support SVG fonts.

I can tell you that if you have something simple--like a sidebar--you can do this, although we've spent a LOT, and I mean a LOT, of time on it. But a background image with reflowing text & other images over it? Well-nigh impossible. We got it to work, but at the end of the day, the customer was not happy with the result. (Long story short: there was still a tiny, and I mean TINY sliver of background image visible on the inside edge of the left-hand page (not the right-hand page) (I may have that backwards--it was 20 iterations ago, I kid thee not) behind full-size story images. The client didn't like that, and then realized that he didn't like the big honkin' white strip of iBook down the middle of the page (in LS), so we completely redid the book, flowing text over a plain background and inserting completely redone and resized images.

I think you could do this in an actual APP that isn't iBooks...but iBooks has a lot of bugs that make this a bloody nightmare, like re-rendering the page every time the book (device) gets re-oriented, so the graphics change size and sometimes alignment (and isn't THAT fun!). I don't think I'd willingly take on another kid's book with text over background until iBooks works some of the bugs out, BUT, on a cool note, it is an enhanced ebook, so it has a video, which has some fun for me and my team as book designers.

Hitch

[hapax legomenon]

I have nothing to add to this discussion, but the subject interests me.

1)I'm curious about what the need is here. You said background image, are you talking about a watermark-type background image or some permanent graphic which appears in the same part of the page.

2)are you really testing both the landscape and portrait view? (You mention left-handed and right-handed page) If so, I am amazed.

3)do any of these ipad optimizations render on other platforms without messing things up? Maybe in 6-12 months ipad will have a bigger piece of the pie than today, but I have a hard time imagining that there won't be competing devices or readers for which these optimizations won't really matter.

[jharker]

Originally Posted by Hitch

You can't render text in SVG, iBooks does not support SVG fonts.

Actually, iBooks DOES support SVG fonts. It's a bit hacky, but very workable in small amounts. I wouldn't typeset a whole book with it. See my blog post.

Is this book live? I would very much like to check it out.

[pholy]

Jharker - Interesting blog post, and I tried your epub on my readers, but couldn't find a usable profile to post my comment, so here it is:

Indeed, it renders very well, except for the ligatures, on my Kobo v1.4, and on my BeBook. On my Sony PRS505, it renders well, except that the font does not resize properly, if at all.

I didn't try it on any browser-based readers - a project for the interested student...

[JSWolf]

Originally Posted by pholy

Jharker - Interesting blog post, and I tried your epub on my readers, but couldn't find a usable profile to post my comment, so here it is:

Indeed, it renders very well, except for the ligatures, on my Kobo v1.4, and on my BeBook. On my Sony PRS505, it renders well, except that the font does not resize properly, if at all.

I didn't try it on any browser-based readers - a project for the interested student...

The font does not resize using ADE for Windows. So it's not a problem with the 505. If the text does resize on a reader using ADE, then there is a bug with ADE on that reader.

[pholy]

Jon - That's interesting... The 505 is actually the oldest of my ADE reader implementations, so I expected the newer ones to work better. It may be, of course, that the Kobo and BeBook are ignoring the svg font entirely, and using their default font. (I don't always notice subtle font changes.) Both will, however, render embedded ttf fonts properly. This is the first time I've run across a usage of svg fonts, so I'm not quite sure where the problem lies.

Edit: The problem with extra white space after italics does show up, on all three readers, so maybe it is using the svg font.

[jharker]

Originally Posted by pholy

Indeed, it renders very well, except for the ligatures, on my Kobo v1.4, and on my BeBook. On my Sony PRS505, it renders well, except that the font does not resize properly, if at all.

Thanks for the comments and the trial! I had only really tested it on the iPad, so I'm curious to know how it worked on other readers.

Re-reading my blog post, I realize I could have been clearer with the ligature statement. What I meant was this: in the html file, there are no "ligature" characters. Only normal characters. So I was pleasantly surprised to find that whenever iBooks encountered, say, the letters "ffi" in the text, it replaced them automatically with the correct ligature glyph if one was available.

That's a subtle piece of typesetting and surprising to find, given iBooks's complete lack of more obvious typographical features.

Originally Posted by JSWolf

The font does not resize using ADE for Windows. So it's not a problem with the 505. If the text does resize on a reader using ADE, then there is a bug with ADE on that reader.

I'm confused: the proper behavior should be that the text SHOULD resize, right? So if ADE doesn't do it, isn't this a bug with ADE for Windows?

I also embedded OTF font versions in the file, so it's possible that a viewer might choose those instead, if it supports them.

Also, looking at the file in ADE now, I see again that odd spacing around the italic "the" in the first line. I had thought that the odd spacing was due to iBooks, but I guess not. May be it's something weird in the font description...?

[pholy]

The "odd spacing" shows up after all italics, in the first chapter, at least. And it's always the same size - about 2 em. Perhaps I/we should rebuild the epub with various combinations of fonts embedded. As Holmes said, it is unwise to hypothesize with insufficient data.

What do we need to do to get some epub reader conformance tests?

[Hitch]

Originally Posted by hapax legomenon

I have nothing to add to this discussion, but the subject interests me.

1)I'm curious about what the need is here. You said background image, are you talking about a watermark-type background image or some permanent graphic which appears in the same part of the page.

2)are you really testing both the landscape and portrait view? (You mention left-handed and right-handed page) If so, I am amazed.

3)do any of these ipad optimizations render on other platforms without messing things up? Maybe in 6-12 months ipad will have a bigger piece of the pie than today, but I have a hard time imagining that there won't be competing devices or readers for which these optimizations won't really matter.

Hi:

Very quickly (not to be rude, but a publisher had an "emergency" this weekend and I'm pushing out a buncha books with footnotes, references, you-name-it):

1. A background image full of swirly-magic-things that covers the whole page, not a watermark;
2. You betcha. I test it both ways in every iteration. (Why are you amazed?--seriously?)
3. Nope, enhancements like video only work in iBooks right now. But, you know what the digital world is like, monkey-see, monkey-do.

@jharker: I know we can hack SVG fonts; I've spent some time yammering with Liz Castro about it, but, as you said, wouldn't want to typeset a whole book with it. If your question about the book being live was directed to me, the answer is: not yet, it's being uploaded via an Aggregator, so--two weeks-ish?

Best,

Hitch