AN EXPERIMENT WITH "DROP" IMAGES

We've seen the work of drop caps. It's also possible to treat IMAGES of letters like font-based letters. Sort of.

But only in Kindle Fire or Paperwhite.

One easy way is to create some image style code and put it in the style section at the top of your book's HTML. Like this:

   img.drop
   {float:left;
   margin:10px 8px 0px 0px;}

Then, when you want to apply it, call the "class" just inside the <img> tag. Like this:

   <img class="drop" src="rockwell ultrabold T.gif" width=12%/><b>his particular morning</b>, ten-year-old [etc.]

I've also added the so-called "illuminated" letter to the mix. In the following screen shots of Kindle Previewer, the width spec for the first illuminated T is 80 pixels. The second one is set for 20%.

Here's Kindle Fire at font size 1:



The images are floating, all right, but at this font size there's been no convincing tuck-in of the text—not enough words.

Okay, so let's go to font size 3:



Now we've got some tucking in. In all examples, the image is surrounded by text. It's starting to look real. And if the paragraph had been longer, the first view would have worked, also.

Now, font size 7:

Looking even better. That letter is buried at the beginning of the paragraph.

But look at what happens in 8:

The Rockwell Ultra-bold T has been dropped all right, dropped in status to a somewhat regular letter. Is a one-line drop even a drop anymore?

Well, we've seen this before. When you’re dealing with the images of letters, there's no difference in size from one font choice to another. The relative size of the letter shrinks or balloons as the selected font rises or falls.

Now here's iPad at font size 5:

You can pretty much always count on iOS to level out the drama. As a mobi-code app, the letters will never "drop"—iOS, as well as Kindle Classic and DX, can't understand the "float" command.

Here's Kindle Classic 1:

Since each image was sized in percent (which mobi can't handle), they all defaulted to the actual size of the image.

Now, Classic at size 6:

Again, full size images. No real difference from raised caps created by images.

Finally, Paperwhite at font size 6:

Very similar to Fire at 7. I think the 80 by 80 pixel version (first illuminated T) looks the most natural.

But look what happens at font size 1:

 
 
In the third line (image width=20%), the boxed-up letter T is so large it encroaches on the remaining letters of the word "the." No doubt some experimentation with sizing would deal with this sort of thing.

But the fact is, images of letters are fixed in size. Using true drop caps—which manipulates actual font—allows the initial cap to size up and down with the font selected.

On the other hand, image-based drop caps look a lot more dramatic in mobi-code versions of Kindle than plain old 2 em caps in the standard, default font. And no need to split the code between kf8 and mobi.

More compromise and decisions . . .

And speaking of more decisions, one can also put a border around the drop image.

Here's Fire size 3 with a double red border at a width of 8 pixels:

Now Fire at font size 7; ridge type border, 12 pixels wide, in yellow:

And finally, Fire at 5; inset border, 12 pixels wide, in orange:

There are other border styles: dotted, dashed, solid, groove, outset. Check out the w3schools tutorial on css to find out more.

The complete code for the yellow ridge drop image:

   img.drop
   {float:left;
   border:12px ridge yellow;
   margin:10px 8px 0px 0px;}

Margin specs go: top right bottom left.

As for when it makes sense to use drop images, see my discussion of the use of drop caps in a previous post. Drop caps of either variety are pretty fancy fare for most books.

Still, I like the "illuminated" letter, especially with the ridge border. It looks great in the dropped position, and pretty special in mobi, too (though, sadly, sans border).

I'm sure I could whip up a more interesting version than the one I've been testing here—and put my own dang border around it, too. I just need to write something that cries out for the use of the little darlings.