This is the eighth installment of a series of articles. To read the previous one, please click here


Last time I promised you I’d cover some more frills for your eBook formatting, and as you’d certainly agree, images are a big part of that. Even for fiction writers images offer great opportunities to present your book in the best possible light, so let’s take a look today how you ca best make use of that.

In fiction, one of the most obvious places to have images included is as part of a book’s chapter heading.

Imagine, if you may, to include a small visual vignette underneath the chapter heading text to set it apart even more.

Here is a small image that I am going to use in my examples. Feel free to right-click the image and save it for your own perusal.

”vignette”

In theory, this is exceedingly easy to do, using style sheets and the background-image parameter. You could simply add the following line to your style for chapter headings and see the image appear and trickle down through all your chapter headings.

background-image: vignette.png

Unfortunately, the background-image parameter is not really part of the CSS style sheet subset used by the ePub eBook file format. Although most eBook readers support it at this point — the major exception being the Kobo reader — it is sadly not safe to use. This may change in the future, but if you want to create a stable eBook I discourage its use.

The alternative is, sadly, not nearly as elegant and requires a good bit more work. What we have to do is include the image manually at every chapter heading, which might look something like this.

<img src="vignette.png" alt="pinstripe" />

The important part when using images is to include the slash at the end of the <img> tag and to include the alt parameter. Without them, our final eBook will not be in the proper format required by many distribution channels. The alt parameter is really just a text description of what the image shows. It is used if, for some reason, the device can’t read the image or if it is displayed in a mode for blind people, where images are dropped altogether. Instead, the alt-text is used to inform the reader what the image showed, which is why I used the word “pinstripe,” since the little graphic I embedded there is an image of a pinstripe. Makes sense, doesn’t it?

To center our vignette on the line, all we need to do is wrap the image tag with the proper <p> and <span> tags, just like we would do when centering text.

<p class="centered"><span class="centered"><img src="vignette.png" alt="pinstripe" /></span></p>

CHAPTER 1

pinstripe

Jason Dark was leaning over the chess board when Siu Lin entered the room with a dog-eared book in her hands.

“Trying to solve another one of the London Illustrated’s chess challenges?” she asked.

CHAPTER 2

pinstripe

She had a smug smile on her face when she finally looked at Dark, but it disappeared the moment she saw his expression.

Dark had gone entirely pale as all blood seemed to have drained from his face. For a moment his eyes stared straight ahead, unfocused, not seeing anything. His lips were trembling and he clutched his left arm.

***

Even though you have to manually include the image tag in every instance of your chapter heading, oftentimes you can automate the process by using your programming editor’s search/replace function using a very simple regular expression.

Simply replace — for example —

<p class="chapter">(.+)</p>

with

<p class="chapter">$1</p>
<p class="centered"><span class="centered"><img src="vignette.png" alt="pinstripe" /></span></p>

While it would be theoretically possible to create a separate style for these images that contains instructions to center the image, I decided against it. We have found a way that is virtually bullet-proof by using the <p> and <span> tags, so why take any risks by using something instead that might cause problems somewhere down the line. When in doubt, I typically tend to err on the side of caution, even if it means writing a few extra lines of code. It is just good practice.

In his book “Scourge,” author David H. Burton took this one step further when he wanted to have his chapter headings in a fancy font that mirrored the typeface used in the book’s cover. Since fonts are extremely limited on eBook readers, we decided to achieve this by using images of the actual text that were created in Photoshop. While it increased the file size somewhat, it did have the benefit that it immediately created a very distinctive look and feel for the book as a whole and paid big dividends in my opinion.

This is how it was created.

<p class="chapter"><span=”centered”><img src="Chapter1.png" alt=”chapter1” /></span></p>

There is a big catch to this, however, as we are no longer able to let Calibre automatically create a table of contents for you. The problem here is that we no longer have the plain text that Calibre relies on to build the TOC with. All we have is an image that Calibre can’t interpret. So, what do we do?

There is a nifty work-around for this. Let’s simply change our code to something that looks like this.

<p class="chapter" style="display:none">Chapter 1</p>
<p class="chapterImg"><span=”centered”><img src="Chapter1.png" alt=”chapter1” /></span></p>

How cool is that? What we did was, we created a traditional chapter heading with plain text, but by using display:none as an additional style setting, we essentially make the text invisible. It is there in the code for Calibre to use, but the eBook device itself will not render it. Right underneath then, we plant our graphic text and all is as it should be.

I hope you enjoyed our “frills” session so far, but we’re not quite done yet.

Aside from chapter headings, there are occasions where we would like to include images directly in the text. Scene changes often are examples of that, where traditionally small vignettes find their use.

If you want to do that, all we need to include in our text is a proper image tag at the correct location, that could look something like this.

<img src="vignette.png" alt="scene change" />

Occasionally, you might want to embed images in the text itself for illustrative purposes. We might want the text to flow around them, and would like the image to appear either on the left or the right side of the screen. Once again, all of that is a simple case for our styles.

img.left
{
  float: left;
  margin-right: 5px;
}

img.right
{
  float: right;
  margin-left: 5px;
}

To create an image that sits neatly on the left side of the screen and has text flowing around it, we would simply use the following tag in our mark-up.

<img class=”left” src="apicture.jpg" alt="picture" />

We would use

<img class=”right” src="apicture.jpg" alt="picture" />

respectively for an image that sits on the right side of the screen and has text flowing around it.

CHAPTER 2

pinstripe

coverSiu Lin walked over to the small table and pondered over the chess pieces for a moment. She tilted her head slightly to the side as she analyzed the board set-up and ran through a variety of moves in her head. After a few moments she sat down in a chair opposite of Dark’s, mulling the chess problem over in her head some more. In silence both tried to figure out the solution to the challenge, each trying to beat the other to it. “Bishop to C6,” she finally said. “Then counter with the Rook to H8, and from there it is going to be easy.”

She had a smug smile on her face when she finally looked at Dark, but it disappeared the moment she saw his expression.

Dark had gone entirely pale as all blood seemed to have drained from his face. For a moment his eyes stared straight ahead, unfocused, not seeing anything. His lips were trembling and he clutched his left arm.

***

I will leave it up to your own imagination to come up with great ideas to use this cool feature.

Note: Unfortunately the mobi file format does not allow for floating images at this time. This means, of course, that it is not possible to use one of layout’s greatest features on the Kindle to the best of my knowledge. If you have found a way to float text around images in mobi files I would love to hear from you!

Here we are, already at the end of an installment, and we still have not managed to get our book into Calibre to build a “real eBook. I apologize for that and promise we will definitely do that in the next installment. In the meanwhile, at least you can check out your book in a web browser and play around with the many features we have explored so far.

Everyone has different needs for their books, so if you have any specific ideas for “frills” that you’d like me to discuss, please feel free to leave me some comments.


Take pride in your eBook formatting
Part IPart IIPart IIIPart IVPart VPart VIPart VIIPart VIIIPart IX

Need help with an eBook project? Check here for more information.