Wednesday, February 9, 2011

Fixed Layout EPUBs for iPad and iPhone

In December, Apple released version 1.2 of iBooks, their ereader app for iPad, iPhone, and iPod Touch. There were a number of interesting features added, including support for hyphenation and page breaks, but the feature that caught most eyes was the ability to create “fixed layout” books in which text and images could be precisely positioned in horizontal two-page spreads in order to approximate a children's book or other image-heavy non-fiction book.

I'm not completely convinced by the idea of fixed layout books. I find them complicated to lay out and not much more useful than a PDF for reading the content. They lack EPUBs most important feature: the ability to reflow when the size and font of the text are changed.

On the other hand, they do let you make really beautiful pages in an EPUB-format file!

Two Page Spread in Fixed Layout EPUB in iBooks on iPad

And since people have repeatedly asked me to explain how to create these fixed-layout books, I took advantage of the opportunity to do something I've been wanting to try for a while: publish a miniguide companion to my EPUB Straight to the Point book. This miniguide explains everything you need to know in order to created fixed layout EPUB files with spreads, images, and embedded fonts.

If you already own a copy of my EPUB Straight to the Point book, I'll email you the miniguide free of charge. In fact, it may already be in your inbox. If you don't receive it automatically, just drop me a line, with your name, email, and proof of purchase, and I'll get you a copy.

If you haven't bought my book, you can buy the Fixed Layouts miniguide separately for $4. As a bonus, you will receive a $4 coupon toward the purchase of my EPUB Straight to the Point book. The only catch is I can currently only offer you the $4 coupon if you buy the EPUB version of the book from my site. The coupon won't be valid anywhere else (but I'm working on it).

Got any questions? Let me know. As always, I'd love to hear what you think.

49 comments:

  1. Hi Liz,
    Thanks for doing the hard yards for the rest of us...

    I'm guessing this only works for iPad no other ePub reader? as ADE didn't like your sample epub...

    ReplyDelete
  2. Yep, I'm afraid it's iOS only, though I haven't tested it on say, a Nook color. It would be interesting to see. ADE and Nook hated the big images (though you could make them a more reasonable size).

    ReplyDelete
  3. Bloody Apple...Grrrr... why should I have to make two different versions of the one ePub...Grrrr /rant

    BTW. Is the new version of iBooks accepting sans-serif outside the "samp" tag yet, like the work around you provided (thanks BTW)

    Thanks Liz...

    ReplyDelete
  4. You know, I was really annoyed at these fixed layout books at the beginning, because I didn't get the point. But now that I can make them, I've started thinking about all the possibilities... but that doesn't mean that every book should have two versions. Only use fixed layout for heavily illustrated books. (Frankly, I think a lot of the designs out there are practically illegible. Be careful with font size!)

    And no, it's no easier getting regular EPUBs to accept custom fonts. Sigh.

    ReplyDelete
  5. Thanks for sharing that with us. I am a little confused as the Fixed Layout Mini Guide epub doesn’t seem to have fixed layouts, For example I can change the text size and screw up the page flow as before. I have updated the iBooks App.

    Also it seems dependent on tweaking the CSS/XHTML which is a no-no for most publishers. Has Pages been updated to take advantage of iBooks 1.2, InDesign hasn’t?

    ReplyDelete
  6. Hi Graham: The Miniguide itself does not use fixed layouts. There's an example EPUB file that shows images and text distributed on the page, a full-page bleed, and a two-page spread with overlaid text (that lovely dragon!).

    It's definitely dependent on tweaking the CSS/XHTML. Not sure about Pages or InDesign, though I'm pretty sure neither supports it.

    ReplyDelete
  7. Ah! sorry Liz, I was too quick off the mark. The dragon epub is great.

    ReplyDelete
  8. Hi Liz, thanks very much for the fixed layout info. I can guarantee you that I and my fellow picture book author/illustrators are very interested in this iBooks option for OP titles as well as new projects. Not sure how easy creating one of these will be for the first time, but there's only one way to find out. One question, can you preview these on an iPad simulator?

    ReplyDelete
  9. iBooks is becoming a strange thing between Powerpoint and PDF… Fixed-layout IS NOT ePub, I’ll never use it.

    BTW, Liz, I heard you will be in Paris soon. So, welcome in France ! :)

    ReplyDelete
  10. @Loreen... Hmm, I don't know about the simulator. I couldn't ever get iBooks to run on the simulator (but it was pre-iPad-release) and so couldn't load books into it either. I'd love to hear if it works.

    ReplyDelete
  11. @NicolasR: I want to do some more testing to see if there's a way to make a Fixed Layout EPUB work decently in a non-iOS device. Will let you know.

    And, merci! We're really looking forward to it.

    ReplyDelete
  12. I bought the book, received the miniguide and tried to create my own example. I succeeded thanks to the example included. See the screenshots in this post in Dutch. But...it is way too much work, you only know if it really worked after you re-uploaded your work back to iBooks. And all that work for a single App on a single device.

    Since iBooks now has better PDF support, I think creating these kind of eBooks in PDF is the best approach still.

    ReplyDelete
  13. Thank you Liz, I am so grateful that I will have options. My spouse told me he is saving up for me to actually get an iPad. I'm planning on self-publishing a children's book I've been working on for awhile now, and I would love to be able to publish it as an epub and test everything out on my own device. I guess I don't mind the limitation of it working only in iBooks on iPad, but it would be interesting to see it on the Nook color. The question is, with regards to children's books, what device do you think these kid's households will own? Seems like a great way for the kids to have lots of books with them for a trip without the weight.

    By the way, I was finally able to borrow a Kindle from the library and my test magazine epub works wonderfully—I knew it was going to look different than the Kindle software for Mac and it does. It actually looks better on the device, and using your methods, the images work well, even though it ignores text wrap.

    Can't wait to dive into the miniguide.

    ReplyDelete
  14. Hi Liz, am working my way through the mini-guide and have a question. My ebook will have a horizontal orientation with images that fill the screen. In the mini-guide, Page 4 says that Apple recommends a max image size of approx. 1600 X 1200, but on page 9 it says to use a 2400 X 1700 pixel image to span 2 pages.

    Is the 1600 X 1200 for one "page," meaning half the screen? Thanx for clarification.

    ReplyDelete
  15. @Loreen. Apple recommends max size of 2 Million pixels, which might be 1600 x 1200, but could also be, say 1000 x 2000, 1300 x 1500, 1400 x 1400, etc. (To figure out if your images/proportions work, multiple height by width. Max value recommended is 2 million, though it doesn't have to be exact.)

    Yes, in that example 1600w x 1200h is for one page, and the 2400w x 1700h image was for a two page spread (where each page/viewport measured 1200w x 1700h).

    ReplyDelete
  16. Thanks, Liz. So a 2400 X 1700 image is over 4 million pixels... how does that square with Apple's recommendation of 2 million? Sorry to be dense. : )

    ReplyDelete
  17. Hi Liz,

    Just a quick comment to say thanks for the fixed layout info. I found it very useful.

    ReplyDelete
  18. Liz,
    I followed your instructions and I was able to successfully create a nice fixed layout epub. My wife and I write and illustrate children's e-books and this new format will help us make large beautiful children’s picture books fro the iPad. I plan to test this epub out on a Nook Color soon. I'll let you know how it goes.

    Muchisimas gracias,
    -Von
    'Who Says moo?' @ bn.com

    ReplyDelete
  19. Hello Liz,
    1. 
    Can text be a part of images? Or text need to be HTML? What is the disadvantage of not controlling text by HTML & CSS in a fixed layout? For instance the text is already part of images in children's illustrated books. 
    2.
    If I set the initial display controlled with horizontal orientation and two-page spread only, can we add a Table of Contents? I noticed there is no Table of Contents in your fixed layout sample, rather, there are list of pages, like pdfs.

    Thank you,
    -Yuriko

    ReplyDelete
  20. Hello Liz,
    1.
    Can text be a part of images? Or text need to be HTML? What is the disadvantage of not controlling text by HTML & CSS in a fixed layout? For instance the text is already part of images in children's illustrated books.
    2.
    If I set the initial display controlled with horizontal orientation and two-page spread only, can we add a Table of Contents? I noticed there is no Table of Contents in your fixed layout sample, rather, there are list of pages, like pdfs.
    Thank you,
    -Yuriko

    ReplyDelete
  21. Have you had a chance to explore the new inDesign CS5.5 release? From what I understand from the hype, it allows us to create flexible layout eBooks in ePub format for iPad and other tablets. This would mean the multimedia children's book we're creating would resize and reorient as the tablet is turned. Here's a link to Terry White tutorial.

    The problem I'm having with inDesign is that Adobe has blurred the lines between EPub and Digital Magazines.

    ReplyDelete
  22. I am having the weirdest problem uploading my books to ibookstore. I don't know if apple has changed the requirements for children's books or not. I have uploaded over 30 books to ibookstore but now I can't get to upload any.
    Their website and support mention that aggregators can fix epubs for as little as $ 5 an epub, but I can't find anyone to do that.
    Maybe you know someone who can make my children's book in fixed layout form?

    BTW, my epubs have been validated and I don't see anything wrong with the meta-data. I wish there was a software out there that could import pdfs or word documents and make them into epubs that support apple's fixed layout templates. I even purchased pages software and went through their step by step procedure on creating epubs, but pages do not appear to allow "floating" images. That software also does not seem to have any support for doing the fixed layout.

    As you can see, I am at a total loss here. I am hoping someone out there can recommend an easier approach to creating fixed page layout-epubs that would be acceptable to ibookstore.

    Or do you know of any conversion houses that will guarantee acceptance by ibookstore? Apple aggtregators do not guarantee that their epubs will be accepted by ibookstore (or maybe they said that there is no guarantee that your books will be sold by ibookstore).

    I any event, I am open to suggestion. I have Liz's fixed layout mini-guide too but I just don't know how or where to start.

    Thanks

    ReplyDelete
  23. Hello Liz,

    Is there any way to make the front and back covers be on the actual front and back cover of the book. Is there any way of sorting this problem.

    Avinash

    ReplyDelete
  24. Dear Liz,

    Your book was of great help, I work for the United Nations where we publish in the 6 official languages including Arabic. While publishing epub in Arabic is possible, we could not find a solution for switching the TOC to a RTL layout. In addition flipping the book should be in reverse for Arabic, that is right page should be first, then followed by left page. Can that be done?

    Thanks,
    Rami

    ReplyDelete
  25. Dear Liz,
    I am also interested in Rami's question. Do you have any answers or solutions?
    Do you think the fixed layout will solve that problem?

    Thanks,
    Joe

    ReplyDelete
  26. Hi Liz

    Is it possible to make a fixed layout epub from a PDF file or can it only be made from the application files?

    Thanks
    Andy

    ReplyDelete
  27. Andy:
    No, I don't think there are tools that facilitate going from PDF to Fixed Layout. Until there are, I recommend writing the code in a text editor.

    I don't know what you mean by "application files".

    ReplyDelete
  28. Hi Liz

    Thanks for the quick response!

    By application file I mean 'InDesign' etc. I have a PDF file but no fonts or images, can they be extracted from the PDF?

    I fairly new to the wonders of ePUBS so please excuse my ignorance.

    ReplyDelete
  29. InDesign doesn't help much with Fixed Layout EPUBs. Indeed, I don't know of any tools that help much. I just write them from scratch in BBEdit (of course other text editors would also work).

    You can copy text and images out of a PDF, but if you have them in individual files, you'll probably save time (and maintain quality, which is sometimes lost when creating a PDF).

    Hope that helps.

    ReplyDelete
  30. That's great, many thanks.

    ReplyDelete
  31. hello
    I produce ebook with many svg with embeded jpg inside, but IBOKK doesn't shows them. I use bluefire as a reader, and It works well
    do you work with bluefire?

    ReplyDelete
  32. Liz,
    I bought your book mini guide and am still lost. I'm wondering if you could help. If you would be willing to create just the css and one page so I could follow that and duplicate it for the additional pages. I have no text, just full bleed images. 1700 w x 1200 h. Happy to pay you for it, if this is possible.

    ReplyDelete
  33. Suzzanne: Sorry you're lost. You don't have to pay me, if you bought the Fixed Layout miniguide, you have an example file already. Unzip it and play with it! And let me know if it doesn't make sense, I'm happy to help.

    ReplyDelete
  34. Hi thank you. The download only has the epub file not examples of the xhtml files the stylesheet etc. that I need to create. Is there some application I'm supposed to use to extrapolate those files from the epub file? Sorry....told you I was a bit lost....

    ReplyDelete
  35. Suzzanne, yes, you can unzip the EPUB to get at the XHTML and CSS within. (Those basic EPUB bits are all explained in EPUB Straight to the Point.)

    ReplyDelete
  36. Regarding "Fixed Layout" and trigger a pdf-file from a text link - When trying to insert "a href="media/example.pdf"" into a text in the XHTML file, it almost works, i.e the "zoom up effect" starts to try to show the embedded pdf-file, but then it disappears and the page flips backwards. I works beautifully in normal - non fixed layout epub-files. Could it simply be a z-level issue? Also tried to modify the Barcelona .epub and one of its javascripts, but the same thing occurred there.

    ReplyDelete
  37. Hi Liz. Thank you for sharing in this wonderful blog of yours. I find your posts very helpful. One thing I could not find neither in your mini-guide nor in Apple's documentation regarding fixed layout is how to easily figure out the right coordinates for locating the text (those used in the css) when your original is a PDF and/or an InDesign document. Approximating, trying and correcting is long and tedious. Any smarter method would be very much appreciated.
    Thanks,
    Y.

    ReplyDelete
  38. Can anyone else confirm, that although suggested for inspiration in the Fixed Layout miniguide, samples downloaded from the iBookstore are encrypted? You can see the mime, container and such, but the CSS and xhtml pages are not viewable.

    Bit of a bummer as I guess this is a new thing and that would have been a nice learning resource.

    ReplyDelete
  39. I bought the Fixed Layout mini guide through cart at the site in your blog. And I wonder if it is EBOOK or hard copy-i should ask it before bought it. Is it E Book? I prefer E book since i live out of USA.

    ReplyDelete
  40. Hi Liz,
    Fixed layout mini guide is really good. Thanks. I have a question similar to a previous reader. My wife wrote a Yoga book that would look good only as fixed layout. It was created in Frame maker because of complex layout requirements.I have PDF of it. Is there a way to take PDF and convert to Fixed layout format for iPAD? I am trying to avoid going to Frame Maker which is hard to manage. Thanks

    ReplyDelete
  41. @Anonymous: No, there's currently no way to go from PDF to Fixed Layout EPUB automatically. Alas. I do all my fixed layout by hand. There is a new tool, Book Creator for the iPad, which lets you create fixed layout EPUBs on the iPad, but from scratch, not from existing files.

    ReplyDelete
  42. Liz, thank you for all the knowledge you contribute the the community. You are smart, exceedingly generous and have the patience of a stone.
    Thank you many times over.

    ReplyDelete
  43. Is it possible to turn on the Note taking and Highlighting feature in fixed layout epubs and in synchronized epubs?

    ReplyDelete
  44. Has anyone here published a purely pictoral book on ipad? I can do kindle formatting etc but not purely pictoral. I have a photographic essay of hundreds of pics I wish to publish initially on ipad and then on Kindle as they are now being sold in colour format.
    Any help and experience would be apprectiated.
    Aishah

    ReplyDelete
  45. Dear Liz,
    My thanks to add to all the others'.

    I urgently need to finish production of 2 photo-books for the Charles Dickens bicentenary, 2012. Book 1 has 200+ photos, currently set for the Ipad at 264dpi X 1024*768, though the new IPad3 is likely to have 264X 2048*1024, which would be over 2MPx file size - each. (That makes one huge document!)

    Problems: 1) I have Apple's Pages, but can't afford (yet another) upgrade to InDesign. 2) I think I'll never understand programming and CSS, and certainly not before the books are overdue! I'm quite out of my depth even with the info in your screen shots, but hope to learn first from 2 of the smaller books of yours. 3) I'm on a Mac, not PC.

    Solutions I'm considering: can you help please... yet again?
    1) Lift my beautifully formatted text (with leading, Bold/Italic/ letter spacing/ coloured text, from Pages and paste as is into Photoshop. Add photos, complete with borders to fill each IPad page, arrange in layers, compress down, and produce each page as a separate jpeg. Or 2) do the same with my simple Freeway 5.5 website creator.

    Question? Is there any simple way then to produce a fixed-layer Epub document, without paying 20% to an Aggregator?

    Help, please!
    My thanks again,
    Graham Salter

    ReplyDelete
  46. @Graham: Apple says they won't accept EPUBs that contain images with text in them. That is, the text must be text. What if you had a template for your book and could just feed in the images and text and thus, didn't have to deal with the programming so much? Email me (lcastro at cookwood.com) if you want to talk further.

    ReplyDelete
  47. Hello, Liz. Thank you for you very helpful books. I downloaded "ePub straight to the point" and the Miniguide.

    I am making a comic book and would like to define the panels on my jpegs. The iPad default seems to divide the page in 4 and zoom in from left to right when you double tap. For more asymetrical layout, I've noticed Marvel custom defines the panels to make the experience more in tune with the drawing.

    Everything for my comic is hand drawn, so I am not using any text. I would just like to define the panels when you double tap and have the navigation go to the next zoomed panel until the page is done. I am not looking to make part of the image zoom and pop up on top of the original.

    Do you know how to do that? Would you know where can I find a tutorial explaining how to customize navigation? Even the Amazon Kindle Publishing Guidelines lack this information.

    Emilie.

    ReplyDelete
  48. hello, liz how to set background image to epub boks

    ReplyDelete

More of my books