eBook Typography - a couple of tweaks

Image for eBook Typography - a couple of tweaks
Image for eBook Typography - a couple of tweaks
Image for eBook Typography - a couple of tweaks

My eBook eBook Typography for Flowable eBooks has been in the iBooks store for a couple of weeks, but I wasn't happy with a couple of issues, so I have uploaded a new version to the store.

It occurs to me, that eBooks can be updated (to fix stylistic problems), and rather than this being an entirely new edition (as it would be in pBook), this is simply a small update and could be handled in the same way that software is updated. On my title page, I have an aside that displays the version number.

But what changes have I implemented?


Controlling page breaks in a flowable eBook is fraught with dissapointment. In fact there is a whole chapter in my book on 'Controlling the page'.

One way to try to control the page breaks is to use the CSS rules for paged-media. Here is an example:

.someblock {

Another of these rules is:


And I was using this to prevent a heading from appearing at the bottom of the page. No good!. The word avoid is a let-out for the iBooks app, to simply ignore. You will see from the picture here that a heading appears at the bottom of the left page; separated from its following paragraph.

To prevent this happening, we need to wrap the heading and the following paragraph in a block (<div>) and then add a style rule like this:

div.keeptogether {

But how can we add this <div>?

This is where a little knowledge of GREP is useful, and because my favourite text editor is BBedit, this is what I have used.

We need to search for or headings (h3 in this case) and then find all text until the end of the first paragraph (</p>).

Here is the GREP rule; search and replace:


and replace with:

<div>\r\1\r</div><!-- end of the heading and first paragraph -->

A style rule is then added to the CSS and we have kept the heading together with its following paragraph.

A slight page problem noticed in iBooks 2.2

With the release of the iBooks app 2.2 with iOS6, I noticed something wrong with the page where I try to show the full available space. The colour block flooded over to a second page. See the image here. It was OK in the earlier version of iBooks. I wrote about this here.

It seems likely that iBooks 2.2 is providing a slightly taller space for pages to take account of the new iPhone5 which has a 16:9 proportion screen.

I have solved this problem by giving the yellow block fixed position as well as 100% height.

Posted on 28 Sep around 11am


Commenting is not available in this channel entry.