You can wrap text around a “floated” image in your eBook for Kindle devices that support KF8 formatting. For older Mobi7 Kindles that do not support floated elements, display the image in a centered div or paragraph.
To float an element, such as an image or callout, you’ll need to create CSS styles for KF8 Kindles (Fire HD, Fire HDX, Paperwhite) and alternate styles for Kindle DX and other Mobi7 devices. Each set of styles is wrapped in a “media query” to ensure that the device in use “sees” the CSS style declarations meant for it.
It’s easy to create the media queries, but nice-looking results need CSS styling to automatically adjust image size in proportion to the Kindle viewing area. That is, an image that looks just right on a particular Kindle in portrait orientation may look wrong when the device is rotated horizontally, or even noticeably ill-proportioned on a different device. Fortunately, there’s an easy fix.
For consistently pleasing results, we need to constrain the image width to a percentage of the page (viewing area not viewport) width instead of using an absolute pixel size. Be aware that changes in font-size by the user will have no effect on image size, but large fonts adjacent to wrapped images may look a bit awkward.
Styling the image with CSS
An image floated left or right of wrapped text will look nice (I think) at between one-fourth and one-third of the screen width. I wouldn’t go higher than that to avoid a narrow sliver of wrapped text on on small screen devices (smartphones), or when larger font-sizes are in use.
For an example, let’s use an image that’s initially 400 pixels wide, displayed left of wrapped text at 25% of the page width. It just happens that 400 pixels is about 25% of the full screen width of the Kindle HDX 8.9″. Therefore the image will display nicely on the HDX and will scale down for lower-resolution, smaller-screen KF8-based Kindles. Scaling up may cause pixelation of the image and should be avoided.
Media Queries
Media queries are used to specify different CSS styles for KF8 Kindles and Mobi7 Kindles. On regular web pages, they’re commonly used to make the layout responsive to changes in screen (viewport) size for smartphones, tablets, laptops, and desktop computers.
My CSS stylesheet for the examples on this page includes the following media queries, which are placed at the end of the style sheet, after styles that apply to all devices:
@media not amzn-mobi {
/* floated container div - 25% width */
div.floatleft {width: 25%; float:left; margin-right: 1em;}
div.floatright {width: 25%; float:right; margin-left: 1em;}
/* images - 100% of container */
div.floatleft img,
div.floatright img {width:100%; margin-top: .4em;}
/* hide mobi image */
img.dx {display: none;}
}
@media amzn-mobi {
/* center images for DX/mobi */
div.floatleft,
div.floatright {text-align: center; text-indent: 0;}
/* hide kf8 image */
img.kf8 {display: none;}
}
Floated images in Kindle Previewer
In the Kindle Previewer screenshots below, a sunflower image is floated inside a div of width 25%. As you can see, Kindle DX auto scales up the image to full-width in a centered div or paragraph. Specifying a width of 25% for the container div has no effect. If it’s important that the image be constrained to a smaller size on the DX, you’ll need to use a workaround in your XHTML document and in the CSS.
Pages showing the footbridge images have two <img> tags enclosed in a container div. One is for KF8, the other for Mobi7:
<div class="floatleft"><img alt="bridge" class="kf8" src="../Images/park-bridge-willows-370.jpg" /><img alt="bridge" class="dx" height="370" src="../Images/park-bridge-willows-370.jpg" width="370" /></div>
The footbridge images also have width and height attributes inside the <img> tags for Mobi7 Kindles.
CSS styles for width and height do not prevent auto up-scaling on Mobi7 devices. And, unfortunately, width and height attributes in an <img> tag trump the fluid 25% CSS width property for KF8. That’s why I’ve used separate <img> tags for KF8 and Mobi7.
In short, Mobi Kindles will honor image size expressed as attributes in the <img> tag:
<img src=”images/filename.jpg” width=”372″ height=”511″ />
Without width and height attributes, images will fill the width or height of the viewing area when they exceed half its width or height. On the Kindle DX, these dimensions are 372 x 511 pixels. (In practice, I’ve found that any image close to half width/height will do the same thing.) On Kindle 3, the trigger dimensions are 260 x 311 pixels (half of 520 x 622 pixels).
Contrary to expectations, smaller images will also be greatly enlarged. To constrain image size in Mobi7 devices, always include the width and height attributes (or at least the one that’s most important).
Keep in mind that images on Kindles 1-3 will also be affected by these attributes, so keep images small enough to look acceptable on those devices as well as the expansive DX, which is the sole Mobi device simulation now included in Kindle Previewer.
For ornaments, icons, and dingbats, it would be better to bypass fluid sizing and specify the exact image size. Mobi Kindles are notorious for quadrupling the size of dingbats or making authors look like narcissistic twits by blowing up their faces to full screen width.
Screenshots
Click any image to view the series of larger images:
- HD Floated Images – page 1
- HD Floated Images – page 2
- HDX Floated Images – page 1
- HDX – Floated Images – page 2
- HDX 8.9 Floated Images – page 1
- HDX 8.9 Floated Images – page 2
- Paperwhite Floated – page 1
- Paperwhite Floated – page 2
- DX – Centered and enlarged
- DX – Centered and constrained
I think the best way to really see what happens with floated and auto-enlarged images is to make a short test book with a couple of images and some dummy text. I tried a whole bunch of images with permutations of possible ways to use CSS and the HTML <img> attributes before reaching some conclusions about what actually works and what’s barking at the moon.
Jenni says
Thank you so much for this post! I was one day away from throwing in the towel and forcing DX users to view the huge versions of my book’s images…but media queries are going to save the day.
One quick question…when I revised my CSS to include the media queries and uploaded the new version to Kindle Previewer, *both* of my images displayed on the page. Is this a quirk of Previewer or did I do something wrong in the CSS?
Araby Greene says
It’s not a quirk of Previewer, which should display either the kf8 or the mobi image. There are a couple of things to check in your stylesheet and in the HTML.
Make sure each media query has an opening and closing curly bracket. Each CSS declaration inside the media query also has an opening and closing curly bracket.
The stylesheet should include two classes that hide the “wrong” images
1. The media query @media not amzn-mobi { } (or @media amzn-kf8) should include the style: .mobi {display: none;}
2. The media query @media amzn-mobi { } should include the style: .kf8 {display: none;}
In the div containing the images:
1. The <img> element that displays on kf8 devices should include class=”kf8″
2. The <img> element that displays on Mobi7 devices should include class=”mobi”
Generally, you would put your media queries below styles that apply to both kf8 and mobi7. Off the top, I can’t think of anything else that would cause both images to be displayed on the page.
Christine Bruderlin says
Hi Araby, Firstly, thank you so much for your fabulous website. I’m fairly new to ebooks and it’s been extremely helpful. Of course, my first ebook is for my husband and has images so I’ve been grappling with floating images. I think I’ve gotten on top of everything except for the same problem as Jenni — I am getting double images, but seemingly only on our own Paperwhite (B024) Kindle and the Kindle DX (via Kindle preview). On ipad, iphone, and Kindle Fire (preview) it’s working beautifully.
This is the code I have used:
@media not amzn-mobi {
/* floated container div – 25% width */
div.floatleft {width: 25%; float:left; margin-right: 0.5em;}
div.floatright {width: 25%; float:right; margin-left: 0.5em;}
/* images – 100% of container */
div.floatleft img,
div.floatright img {width:100%; margin-top: 0.4em;}
/* hide mobi image */
img.dx {display: none;}
img.mobi {display: none;}
}
@media amzn-mobi {
/* center images for DX/mobi */
div.floatleft,
div.floatright {text-align: center; text-indent: 0;}
/* hide kf8 image */
img.kf8 {display: none;}
}
If you could assist I’d be extremely grateful, the book is due for publication in a few days and I’m absolutely tearing my hair out.
Look forward to hearing from you, kind regards, Christine
Araby Greene says
Your CSS code looks okay and I don’t know what to add to my previous suggestions, so I’ve sent you a private response with files to compare with your own. Hope that helps.
Jenni says
Hi Araby and Christine,
For reference, I finally figured out what was causing the double images I mentioned in my first comment – in InDesign, I was exporting the file as an ePub2, and the double images always occurred. When I exported as ePub3, everything worked beautifully.
A tiny step – but one I couldn’t find mentioned anywhere. Once I figured this out, I changed my workflow to have one ePub2 file (no media queries) for vendors like Nook, Kobo, etc., and a second file designed to export as ePub3 with media queries just for Kindle.
Hope this helps anyone else struggling with the same problem!
Jenni 🙂
Araby Greene says
Thanks for your input about exporting from InDesign. I’m sure this info will help Adobe ID users. The post examples were saved from the Sigil editor (a different kettle of fish than ID) as ePub2.