• Print

Ask the Ebook Experts: Text alignment in Fixed-Layout EPUB for iBooks

How to mimic flowing text in a non-reflowable format

Q: In a traditional printed book, if a paragraph has not finished when the end of the page is reached, the entire paragraph will be justified. However the [CSS] command ‘text align last’ does not seem to be honoured in the last paragraph of the page in fixed layout for the iPad…What seems to happen is that in [InDesign CS6] it ‘looks’ justified but it doesn’t make it through to the epub version and there is a small gap at the end of the line. If you add text it goes on to a new line. I tried adding whitespace but that didn’t seem to be accepted…Is the problem with ibooks? Is there any workaround?

Andrew Rafferty

Fixed-layout paragraph with incorrectly justified last line

Fixed-layout paragraph in iBooks with incorrectly justified last line
Image: Andrew Rafferty; The Stones Remain

A: When you load a standard EPUB file into iBooks, the application automatically paginates the HTML content based on screen size and settings set by the user (font and font size). Content flows from page to page, and if a paragraph spans a page break, text alignment will be consistent on both pages.

Fixed-layout EPUBs differ from standard EPUBs in that it is the ebook designer who sets the pagination of the book, not the iBooks application. Each XHTML document in a fixed-layout EPUB file corresponds to a distinct page in the book, and no content is flowed from one page to the next.

If you want to mimic a text flow from page to page in a fixed-layout EPUB, you’ll need to split the text between two separate HTML documents. This poses a challenge if you want your text to be justified, because the text-align: justify CSS property does not stretch the final line of a paragraph to the full text-column width.

The good news is that CSS3 offers a solution to this very problem: the text-align-last property, which allows you to indicate how the final line of a text block is aligned. text-align-last: justify specifies that the final line should be fully justified, and span the full text column width.

The bad news about this good news is that text-align-last is not yet fully honored across all major Web browsers. It is supported in Mozilla-based browsers (Firefox), but is not supported in the Webkit engine, which powers Safari, Chrome, and—sadly—the iBooks ereader. Neither text-align-last nor the WebKit-specific -webkit-text-align-last, nor the EPUB3-specific -epub-text-align-last will produce the desired effect in the iBooks reader.

But some more good news for the intrepid and patient is there’s a hack-y HTML/CSS workaround that can achieve the effect of text-align-last: justify in iBooks (your mileage may vary on other ereader platforms).

Tweak word spacing using CSS

The old-school (dating all the way back to CSS1) word-spacing property allows you to designate a specific amount of space to place in between words. The following example uses word-spacing: 7px to specify that the last seven words on the page should have seven pixels of whitespace between them:

<p>Everywhere there are mysteries. And the most ancient man-made wonders
of all are the stone monuments erected by our Neolithic and Early 
bronze Age ancestors between 4000 and 1500BC - or, if it is less difficult 
to visualize in this way, between 140 and 240 generations ago. Little 
England (and smaller Scotland and Wales) are rich in these megalithic 
structures. Archaeologists tell us that more than a thousand chambered 
tombs and some 700 stone circles have resisted the 
smoothing iron of wind and rain, the teeth of the plough, the 
<span style="word-spacing: 7px">grasping hands of wave 
upon wave of</span></p>

And here’s a screenshot illustrating how this text renders in iBooks.

Last line correctly justified with word-spacing property

Last line correctly justified in iBooks with word-spacing property
Image: Andrew Rafferty; The Stones Remain

The main benefit of this approach is that it gives you fine-grained control over the whitespace in a paragraph. The downside is that it can require a fair amount of trial and error to determine the proper word-spacing values to achieve the desired justification effect. If you do decide to use this method, and have a paid iTunes Connect ebooks account, I highly recommend using Apple’s Book Proofer tool, as it eliminates much of the hassle involved in syncing EPUB files between your computer and your iPad/iPhone/iPod.

O’Reilly’s Ebook Experts want to help you solve your tough digital-publishing problems. Send questions to ebook_experts@oreilly.com, and we will publish submissions and responses on the TOC blog in future editions of “Ask the Ebook Experts”
tags: , , , , , , ,
  • Anne-Marie Concepcion

    And if you’re paid by the hour, just think how much money you could make doing this for every page!  :D 

    Sanders, really great to see this column debut! Sorely needed. 

  • http://www.facebook.com/profile.php?id=100000023217159 Jean-Claude Tremblay

    Nice (and painful) workaround indeed… I would probably use a span style=”word-spacing: of 3px or 4px for all the words on the last line for a better results than just half of them.

  • http://radar.oreilly.com/sandersk Sanders Kleinfeld

    @Anne-Marie: Thanks very much!

    @Jean-Claude: Agreed that it would be better to apply even word spacing to the whole line, and that this workaround is quite painful :)

  • Sanders Kleinfeld

    @Anne-Marie: Thanks very much!

    @Jean-Claude: Agreed that it would be better to apply even word spacing to the whole line, and that this workaround is quite painful :)

  • http://twitter.com/jctremblay Jean-Claude Tremblay

    I’m starting to use a trick that force the last line to justify without the need to use word or letter spacing.

    To force the last line of text to be justified, I’m adding a few characters to end, enough so the text justify, than I set the id positioning to overflow:hidden and make sure the the height of the div is set correctly.

    • matthewdl

      Yes, that approach is more correct. Setting letter spacing specifically seems very hackish.

  • http://www.suntecdigital.com/ebook-conversion-services/fixed-layout-epub-conversion.html Thomaswilson

    Fixed
    layout ePub Conversion offer powerful tools for making your eBooks
    look professional and perform well. Publishers have to redesign the pages of
    the device accordingly so that the device should get well fitted before being used.
    This may include increasing the text size, reducing the image size, and removing
    the details from the page.