Easily force left alignment in ePubs viewed in iBooks

1 07 2011

Finally! I figured out a much more seamless way to force the headings and any other content to be left aligned in our ePubs for iBooks.  The goal of my ePub creation is really to have a seamless process, we can’t afford the time to unpack, edit html/css, and repack files just for one document… so everything needs to be able to come straight from InDesign and be ready for viewing in iBooks.

I’m also assuming that a large proportion of users probably don’t even know how to turn off the full justification setting for iBooks.. I mean, I didn’t realise the options were in the settings on the iPad for a LONG time myself.. So, by forcing the left align on the headings at least the ePub will look and read nicer with the justification setting still turned on.

The only solution I saw on the net to solve the left-aligned problem was to edit the html of the unpacked ePub (which is a massive no for our workflow) and add a span element inside the heading tags. It got me thinking though, and the idea suddenly came to me.  Get InDesign to just do it for you.

First off, create a new character style in your master document (the one that synchronises styles between all the docs in your InDesign book). Call it something like leftAligned. Go to the bottom option, tag formatting, set it up so a is added with the class of leftAligned.  Now, in your css file (the one you use when you export your ePub files) you can have a class that looks something like:

span[class*="leftAligned"]{ text-align: left; }

* little note; just found out the span doesn’t even need to have any styles at all, oh well!

Now, to use the character style and get InDesign to do the work for you; do a find and replace for every document in your book; and what I did was search for any H1 paragraph styles, and have it apply the leftAligned character style to them. I then did it with every other heading type and the referencing paragraph styles.

When I exported to ePub and viewed in iBooks, FINALLY I saw left-aligned headings. MUCH nicer, and much easier than unpacking, editing, and repacking the ePub.

Advertisements

Actions

Information

One response

10 09 2013
Eric Coll

Please note that the “put span tags inside the heading text” trick no longer works for left-align and p tags with the latest version of iBooks. I guess they read this post! It does seem to still work for center and right-align, but that is not the big problem, the big problem is left-align headings.

When using indesign, the solution is to not convert headings to text using the main menu or right-click options (that maps them to p tags that CAN NOT be left-aligned), and to choose Bullets: map to unordered lists, and Numbers: map to ordered lists in the EPUB Export options dialog, which maps them to ul and ol tags which ARE left-aligned.

Then there is no problem.

Cheers

Eric

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: