Creating Fixed-Layout EPUBs


Published on

From my workshop at PePcon 2014, a how to on creating fixed-layout ebooks both from scratch, and using Adobe InDesign's brand-new FXL export option.

Published in: Design, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Print replica = absolute representation of the print page in an accessible digital format.
    Fixed-layout epub (FXL) is a print-replica format with live text. This is commonly achieved using xhtml with an image in the background and absolutely positioned text layered on top.
    It is possible to make image-only FXL but the lack of live text hinders accessibility and prohibits added functionality like media overlays.
  • If you are choosing FXL because you want the page to look exactly like print, you might not be ready for digital, might not be serving your content.
  • If I haven’t talked you out of this format yet, then I guess we can start to talk about how to build these kinds of ebooks.
  • Comment about the book material that is on the editing room floor.
  • Portrait, full-screen, using all the real estate it can, lots of type.
  • Header Viewport Image with text laid on top
    One HTML file per page
  • In Adobe’s FXL export, for example, 1inch = 72 pixels.
    Explain quick and dirty way of using Photoshop on a spread to calculate it.
  • The top image is from the HTML, the bottom from the CSS.
  • In the OPF
    Rendition:layout values can be reflowable or pre-paginated. If not specified, rendering engine assumes reflowable epub
    Rendition: spread values = auto, both, none
    Rendition: orientation = landscape, portrait, none
    Be sure that your choices here serve the content + platform.
  • This skeuomorphism is unique to iBooks.
  • Header in the OPF is, of course, different.
  • When working on content where reflow is absolutely not okay, I put in soft line returns if they aren’t there already
  • Delete that “break here” header from the HTML post-export.
  • Some conversion houses prefer to work from Word files.
    TextWrangler is freeware from BareBones software.
    Putting each word on it’s own line = searching for a Word space and replacing it with a hard return.
    RegEx is your FXL best friend.
  • Mind spaces/hyphens/odd characters in your naming conventions.
    Talk about the advantages of having one background image in behind the text.
  • Talk about using a templated OPF and NCX and doing a simple find/replace for ISBN in XHTML file same.
    Don’t make typos in the metadata!
  • Explain the percentages, how it is not in the iBooks Asset Guide but that it works everywhere.
  • Font stack is cut off in screenshot from the CSS
  • SVG doesn’t highlight in Kobo.
    Text on a straight line should not be SVG, should be rotated using code in the CSS.
  • To create SVG: export ID to EPS, export EPS to SVG in Illustrator, open SVG in Dreamweaver, grab code from between <g> tags, insert into ebook.
  • The rest is fiddling with the pixels.
  • Google, iBooks iOS, iBooks Mavericks, Kobo iOS, Kobo Android, Readium
  • Mind you don’t have any gaps in the audio; iBooks is forgiving but Kobo is not.
    **This is where I start to scare you.**
  • In addition to listing the audio in the <manifest>.
  • Customize colour, background, shadow
  • Ambient controls go just inside the <body> tag, before the first <div>.
  • New option to have “none” as the TOC style so, for example, iBooks will default to thumbnail navigation only.
    No way to opt out of CSS, only option is to add extra CSS.
  • Threading is ignored b/c you can’t flow text from one HTML page to the next
    The width of each word is calculated; the next word starts after the word space. If the rendered word takes up less/more space, there will be overlaps or gaps.
    No horizontal/vertical scaling, beware of ligatures, no outline or other ID typography enhancements. Tracking will export. You will get a message on export telling you that those things won’t export.
  • Vertical scaling was applied – because this doesn’t export, extremely funny spacing was the result.
  • Swap out Postscript fonts before export or your layout will be a mess.
  • Re-did the drawn lines to paragraph above and below rules to fix the problem.
    In the first sample, there is an outline on the box around the type, and drawn rules above and below “chapter”. Changing those to paragraph rules above and below solved that problem.
  • Explain what’s going on in the code – inline styling, positioning.
  • Talk about getting a hodge podge of file types – including from publishers with really poor layout habits – an how a multitide of sins can be forgiven in this FXL output. But a clean <nav> will only be created from a reasonably clearly structured document. And that it will make all the difference at the other end in your FXL epub.
  • Hyperlinks out to a URL on an object is the only thing supported at this time.
  • The z-index property specifies the stack order of an element.
    An element with greater stack order is always in front of an element with a lower stack order.
    Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
  • Creating Fixed-Layout EPUBs

    1. 1. Creating Fixed-Layout EPUBs (Starting slowly)
    2. 2. Goals • Clear understanding of the format • A good sense of where, when, why • How to bake your own • Ideas for how to enhance with grace • A little about the various tools • How to best use the new ID FXL export
    3. 3. How FXL ebooks are made
    4. 4. What is Fixed Layout? • Print-replica format • Absolutely positioned text overlays on image backgrounds • Text size cannot be changed • Layout holds its shape, with very little device fragmentation
    5. 5. Structure • Very similar to reflowable epub – same basic ingredients • One HTML per page/spread • CSS contains positioning
    6. 6. Where • iBooks: iPads and on Desktop • Kobo iOS and Android • Google Play • Kindle KF8*
    7. 7. When • Children’s picture books • Manga/Digital comics/Graphic novels • Heavily illustrated non-fiction
    8. 8. Cautions • Be sure to serve your content • Check your digital comfort level when opting for this format • Refer back to “Where” • Smaller distribution channels
    9. 9. More Cautions • Opposite of responsive • Text-heavy pages are going to give you device fragmentation headaches • Confusing consumer experience • Expensive to produce
    10. 10.
    11. 11. Diversity of the spec • Apple/Kobo/Google FXL epub • Kindle KF8-MOBI • Barnes & Noble ePib • And, until recently, Sony epub3 format
    12. 12. Some Non-fiction Samples • Just Another Day • Draw Out the Story
    13. 13. Three main parts of FXL • One HTML file per page • Viewport • Metadata
    14. 14. Structure of the HTML
    15. 15. The CSS behind it
    16. 16. Viewport • Defines the size and aspect ratio of the page • An artifact of the print trim size • Defined in the header, the CSS and must match background image size
    17. 17. Metadata • Key difference, forces the device to render the epub differently • Make sure the orientation serves the content
    18. 18. Spine <meta property=“ibooks:binding”> false</meta>
    19. 19. Metadata in EPUB2 • Viewport definitions are the same
    20. 20. Images • 3.2 million pixels limit in iBooks • Double pixel depth of viewport for pinch-and- zoom • Scaled via the CSS • Avoid flattening text into the image • Mind your alt text
    21. 21. Workflow1: prep • Duplicate the ID file • Fonts? • Add in covers, endpapers, marketing pages as required • Edit out print-specific material from copyright page
    22. 22. Workflow: Text1 • Add a header to each page, set that text to “break epub here”, export to reflowable to get one HTML file per page
    23. 23. Workflow: Text 2 • Children’s titles that will have MO: – Text into something like TextWrangler with line breaks – Mark the end of the line (xxx) – Put each word on it’s own line – Number the lines – Use the following find/replace: (d+) (.*?)(xxx)*r with <span id="W1">2</span> 3
    24. 24. Workflow: Text 2 (cont’d) • Replace xxx with r and you have the shape back • Using an HTML template for your book, create the pages from your tagged text file
    25. 25. HTML Template
    26. 26. Workflow: Images • Save-as • Delete all the live text boxes • Output the ID file as a series of JPEGs, sRGB, 150dpi • Name in a simple manner: ISBN? Page number? • Use PNG only when you require transparency
    27. 27. Workflow: OPF • List each HTML/image in the <manifest> • Order them in the <spine> • Adjust metadata • Add fonts, media to the <manifest> • Point container.xml to OPF
    28. 28. Workflow: CSS • Dupe the ID file one more time • Delete all artwork, empty frames etc., until nothing but live text frames are left • Run Rorohiko’s CSS Geometry script to get the page <div> CSS for the positioning
    29. 29. Workflow: CSS2 • Remembering viewport definitions from earlier, write the CSS • Simple, minimal – similar to reflowable CSS in tone, clarity • iBookstore Asset Guide says to avoid fractional definitions, to define font size in pixels not ems • Fonts must be embedded
    30. 30. SVG • Use sparingly per Asset Guide and accessibility best practices • For type on a curve • Include a fallback • MO highlights may not work
    31. 31. FXL QA • iBooks • Kobo iOS and Android • Readium (Chrome app) • Google Play • Test on device, not just in emulators!
    32. 32. Read Aloud • Syncing chunks of audio to highlight along with chunks of text • Need an .m4a • Use Audacity to demarcate chunks of the soundtrack
    33. 33. Audio Sync • Export tagged chunks to a txt file • Number the lines • Regex: ^(d*)s(.*?)t(.*?)t to <par id="par1">r<text src="filename.xhtml#W1”/>r<audio src="audio/filename.m4a" clipBegin="2s" clipEnd="3s" />r</par>
    34. 34. • Add a little header text and you have your SMIL file. Ta da!
    35. 35. Okay, it’s tedious • Liz Castro’s Read Aloud Miniguide is very helpful ( • An automated audio/text synchronization tool, in beta:
    36. 36. OPF Changes Your epub2 will no longer pass validation!
    37. 37. Audio Styling • Customize the CSS on a page-by-page basis if you want • Kobo support is varied – no highlight customizing in Android; use CSS kobo-smil- highlight for custom colour in iOS • Read-aloud highlighting can be micro or macro – at the word, sentence or page level
    38. 38. Other Audio • Ambient soundtracks are possible in iBooks: <audio epub:type="ibooks:soundtrack" src="audio/soundtrack.mp4"/> • Controls will automatically appear but additional start and stop buttons can be made for iBooks
    39. 39. Javascript • Simple animations, small interactivities • Call it in the HTML header, list it in the <manifest> • Good support from iBooks, Kobo iOS, Kobo Android
    40. 40. Plug-Ins Aquafadas: Rorohiko’ Flipick: CircularFlo: ZooDigital’sZEBtool: TigerCreate: PubCoder: Booqlab: Magic Epub:
    41. 41. But but but • An hour or so ago, creating an FXL epub got a lot easier
    42. 42. • This is big. • Beautiful, clean, pixel-perfect layouts directly out of InDesign
    43. 43. Things You Should Know • Exports word-level positioning controls with inline styling at <div> and word level. • The HTML includes inline styling and positioning.
    44. 44. Basics of Layout • Clean layouts still matter (stern look) but, well, not so much. • Structure still matters • Good typography habits matter a lot • White space via em-, en-, or tabs won’t export (as expected)
    45. 45. What?
    46. 46. Fonts • Fonts must be available for packaging • Only OpenType and TrueType fonts can be used Also: kerning is not supported on individual characters
    47. 47. Some tips and tricks • Rules and box outlines won’t come out at the same thickness
    48. 48. • Layers and transparency are tricky.
    49. 49. • Unlike reflowable epub, master page items will come through: folios, running heads, any drawn page items that will be on each page.
    50. 50. • Editing the code is hard
    51. 51. Best practices • No sketchy typography practices • Set up the ID file, deal with layers and transparencies, and iterate from the file • Especially for long documents, a clean navigation file will make your life easier
    52. 52. Hyperlinks • At present, cross-references, indexing, and hyperlinks are not supported.
    53. 53. Beware the z-index • The z-index property specifies the stack order of an element. • An element with greater stack order is always in front of an element with a lower stack order. • Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
    54. 54. Final notes • Conversion to KF8-FXL from this epub export will be difficult • Without word-level IDs applied to the <span>, adding media-overlays will be tricky • Revision is best achieved by re-running the entire file – single CSS for the whole document
    55. 55. Thanks! Twitter: @LauraB7