Wrap Text around an Image

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:

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.