Digital design and other shiny toys

Controlling image width in ebooks displayed in iBooks app

Posted on by Paul

I was talking to a client about her ebook today and, while she was very polite, I sensed frustration at how long everything was taking. We’re adapting a lengthy textbook, complete with illustrations from Microsoft Word to EPUB and MOBI format. The source material and publishing requirements mean we’re creating a standard re-flowable ebook rather than a fixed-layout one.

The main area of concern is the illustrations, specifically their display size. To keep things simple and avoid problems with more limited ebook reader devices (that’ll be the Kindle) we’re putting most images in a separate block and allowing them to fill the display width. However, some images need to be limited to half, or even quarter the display width. No problem, I think, I’ll just use max-width in the CSS to limit how wide images can be. Everything looks great until we test in iBooks on the iPad. The images are the full width of the ‘page’, ignoring the CSS rule that should limit them. It was at this point the client began doubting my design skills. Luckily there is a workaround. By putting the images inside another element, in this case a paragraph, and applying left and right margins of 25% I was able to replicate the original effect of limiting maximum image width to 50%.

Comments are closed.

Read the comments policy