A standard way to centre images is to enclose them in div tags. As seen in this Safari Online book on HTML 5.
When we follow this to the letter with a <p>text</p><div><img src="yourimage.jpg" /></div><p>text</p> structure in iBooks. Things work well on full-height images.
But if we try and use the <div> as an opportunity to keep the image and caption together, then things take a turn for the worse. Doing this <p>text</p><div><img src="yourimage.jpg" /><p>caption text</p></div><p>text</p> results in this:
It seems that in the context of iBooks placing a paragraph within the image div grants iBooks permission to split an image across two pages.
So what happens if we use the HTML 5 figure tag approach <figure><img src="yourimage.jpg" /><figcaption><p>caption text</p></figcaption></figure>. Well let's see:
Perfect. It even keeps the caption on the same page as the image. So let's try this in Kobo app for iOS too:
Oops! Things aren't looking quite so rosy. It's behaving like when we placed a <p> inside the same <div> as the <img> in iBooks.
So what about Kindle, after all KF8 supports the <figure> and <figcaption> tags. Here's a collection of results from Kindle Previewer.
Here's the Fire HD looking good:
And the Fire HDX:
But for some reason the HDX 8.9" doesn't keep the caption on the same page in KP:
Same goes for the Paperwhite:
And the Kindle DX floats the text:
Kindle for iOS (iPad), shows the beginning of the caption but not the whole:
As you can see results are OKish but mixed and actually because of the way Kindle renders pages, if you move back and forth then the Fire HD and HDX can start behaving like Kindle for iOS (iPad) and showing only the start of the caption.
Final notes: I've relied here on the apps in each instance to resize a tall image larger than the page without specifying an actual height or width. Specifying dimensions might fix some issues. I've not tried this. Neither have I tried loading the book onto an actual Kindle or Kobo as yet, but will report back later on this.
When we follow this to the letter with a <p>text</p><div><img src="yourimage.jpg" /></div><p>text</p> structure in iBooks. Things work well on full-height images.
But if we try and use the <div> as an opportunity to keep the image and caption together, then things take a turn for the worse. Doing this <p>text</p><div><img src="yourimage.jpg" /><p>caption text</p></div><p>text</p> results in this:
It seems that in the context of iBooks placing a paragraph within the image div grants iBooks permission to split an image across two pages.
So what happens if we use the HTML 5 figure tag approach <figure><img src="yourimage.jpg" /><figcaption><p>caption text</p></figcaption></figure>. Well let's see:
Perfect. It even keeps the caption on the same page as the image. So let's try this in Kobo app for iOS too:
So what about Kindle, after all KF8 supports the <figure> and <figcaption> tags. Here's a collection of results from Kindle Previewer.
Here's the Fire HD looking good:
And the Fire HDX:
But for some reason the HDX 8.9" doesn't keep the caption on the same page in KP:
Same goes for the Paperwhite:
And the Kindle DX floats the text:
Kindle for iOS (iPad), shows the beginning of the caption but not the whole:
As you can see results are OKish but mixed and actually because of the way Kindle renders pages, if you move back and forth then the Fire HD and HDX can start behaving like Kindle for iOS (iPad) and showing only the start of the caption.
Final notes: I've relied here on the apps in each instance to resize a tall image larger than the page without specifying an actual height or width. Specifying dimensions might fix some issues. I've not tried this. Neither have I tried loading the book onto an actual Kindle or Kobo as yet, but will report back later on this.
I just hit the publish button for my first ebook. Far and away the most vexing problem I had (and probably still do) is the issue of images and their captions and flowing text around them. I had high hopes that using div tags to keep image and caption together on the same page would be a universal problem solver. not so much......I settled on achieving a compromise that was good enough across kindle and ipad. We're still in the wild west when it comes to ereading devices and their ability to render images and flow text.
ReplyDeleteJeff, thanks for taking the time to comment. For me the biggest problem seems to be Kindle and the decision over whether to provide owners of more recent Kindle Tablets with a superior experience and the owners of older (and e-ink) Kindles a worse one or whether to settle in the middle for a mediocre experience that is hacked to make things work most of the time. (But which in the future might need revision.)
DeleteWith regard to iBooks I've made the decision to go EPUB3 in order to take advantage of figure tags, but of course this means it is also necessary to have an EPUB2 version for other vendors.
This is less than ideal, but the future (for EPUB) is the figure tag and in a book where there are many images with long captions, it is far superior in its rendering.