Reflowable to Fixed ePub3

We had already worked on the conversion from PDF to ePub using IGP:Digital Publisher for Bridget Williams Books (BWB) in New Zealand,  "The Story of a Treaty by Claudia Orange". Tom Rennie (@TomRennie) asked if we could also create a fixed layout ePub of the same book. Excitedly we said yes!

We now have a very interesting new combo technique/toolkit addition to IGP:Digital Publisher. The ability to create a fixed-layout close replica from reflowable digitized content.

Over a year ago we did over 100 audio books in AZARDI custom fixed layout format for OUP (before the IDPF spec was invented). These were upgraded to IDPF fixed layout middle of last year after the spec came out.

Our objective is to always maximize the value of the master XHTML content with consistent quality tagging patterns so the publisher doesn't have to pay over and over again for format production.

Just recently we did the Faber and Faber 1227 QI Facts:To Blow Your Socks Off, but that was relatively straight-forward text content with the biggest challenge being a very large multi-index.

The Story of a Treaty is a beautifully presented, heavily illustrated reference book in full colour. It was a challenge and a good proving ground for this very aggressive use of XHTML in the form IGP:FoundationXHTML.

Reflowable to Fixed ePub3 works like this:

1. Get the content out of the PDF and into IGP:Digital Publisher tagged using IGP:FoundationXHTML using the standard production procedures. The content is now ready for anything.
2. Export the reflowable ePub2 / ePub3, Mobi and any other e-book format required. Step one finished.
3. At any time in the future, create a new design profile for fixed layout in IGP:Digital Publisher.
4. Style the design profile content using fixed layout presentation CSS techniques (mentioned below).
5. Export the Fixed-layout ePub3.
6. Have coffee.

The Secret Element

The secret is producing the book using the <span class="pagebreak-rw"> tag. In our processes these are always inserted in backlist digitization production and have been since 2006 when we moved away from XML to comprehensive XHTML production.

These tags are used for jobs like Index page linking in reflowable ePubs and are used for processor generated Line-by-Line reprint facsimile PDFs. The pagebreak tag now come into its own as a processing instruction for the production of fixed layout from reflowable.

In the production environment a nice piece of Javascript presents the content in the size and shape of the fixed layout book with pagination so styling can be relatively intuitive for the editor doing the fixed-layout styling.

When the export button is clicked the XSL processors grind into life, splits the file apart and packages everything as a ePub3 Fixed Layout package.

The cost of creating a fixed ePub from reflowable FX is a bit of CSS typing time; so the production cost increase by using this method is about 15-20% more than the reflowable ePub alone if the production editor knows their stuff.

We are getting more requests for fixed and flowing ePubs and it makes sense with content of any value to get it into the XHTML to give it a real future.

The Production Details

Page Setup

Page setup uses print-like techniques with page aspect ratio, size, line-height, font-size all using pixel-proportional representations of the print layout.

The running headers are CSS Content properties only and the coloured bars in the headers and note-boxes are pure CSS gradients.

Fixed layout Presentation. The styles for the page size, margins and line-heights for everything was the first thing to get right.

Images and Captions

This is the area requiring the most attention, but it is not that difficult. Captions are tagged under their images and position text references removed if appropriate. The position references are reinserted with CSS content properties and repositioned using absolute positioning.

Here is a PDF spread from the source document.

This was converted to a standard reflowable ePub adjusted through the magic of AZARDI to show the flow of the content from the PDF image. The captions for each image are under the respective images.

TADA! Here is the fixed layout presentation with the captions moved with CSS to the same position as in the print book with extra CSS inserted content. It also has the artistic running headers.

Position Floated Blocks

When a paragraph goes across a page and there is a floated image or notebox, during FX tagging production these are placed after the paragraph within which they occur.

To reposition these correctly the fixed layout processor breaks the paragraph at the <span class="pagebreak-rw"> tag into two paragraphs with para-open-rw and para-continued-rw selectors and moves the image container as the first-child of the section. The images are adjusted to be multiples of the line height.

Page baselining is done by ensuring all image blocks heights are a multiple of the line-height. The coloured border on the left of the notebox is a pure CSS gradient.

View the code

<!-- Before Processing -->
<p>Paragraph text <span class="pagebreak-rw">24</span> 
paragraph text</p>
<div class="media-rw figure-rw">
    <div class="position-control-rw">
       <img src=" " />
    </div>
    <p class="caption-rw">Image caption</p>
</div>
 ​­  
<!-- After Processing -->
 ​­
<p class="para-open-rw">Paragraph text</p>
</section>
<section class="body-rw Page-rw">
    <span class="pagebreak-rw">24</span>
    <div class="media-rw figure-rw">
        <div class="position-control-rw">
            <img src=" " />
        </div>
        <p class="caption-rw">Image caption</p>
    </div>
<p class="para-continued-rw">paragraph text.</p>

On this spread two images are floated to the top while the text flows past. This all happens automatically but the production editor does have to get the image block height as a multiple of the line height. The last paragraph on the right page is a "para-open-rw".

Summary

There is currently a lot of noise in the e-production space about creating fixed layout directly from InDesign or from PDFs. That is both the hard and expensive way to do this fixed layout stuff because there are only hard metrics to roll into the HTML and/or CSS. Both the HTML and CSS are relatively light with the FX to Fixed Layout approach.

If the only tool you have is a hammer all problems look like a nail! To keep the quote machine going:

We have demonstrated that it is easier, quicker and lower cost to extract the content from a book PDF, tag it well with a controlled XHTML and apply CSS for any and all formats you require including print, ePub, Mobi and fixed layout anything. Arguing that the content is already in InDesign is a quick get-a-format hack and does not address the business value a real digital content strategy delivers for any publisher.

With the full XHTML tagging approach not only do you get the formats, but there is a consistent long-term XHTML (XML) digital content strategy behind it.

That is what IGP:FoundationXHTML delivers for publishers. For the same money that you spend getting formats (probably less), you also have your content future ready.

And that is this post finished. It is more than a little interesting that it is easier to go from reflowable FX (XHTML5) to fixed layout with a bit of tidy CSS, than from an application or solution that tries to mimic layout with a huge cloud of metric layout styles.

References

IGP:Digital Publisher Business Information

IGP:Digital Publisher User Manuals

Public IGP:FoundationXHTML Specification