Friday, August 23, 2013

How to Have No First Line Indent for Kindle eBooks

I hear this very often on Kindle formatting forums:

"I have no indents in my book, but when I publish it on Kindle there are indents on the first lines of every paragraph. Why are they there? How do I get rid of them?"

This most often happens when you format your book using Word (or any other word processor).

The sad truth is that if you set your first line indent to 0in in Word, you will get indents in your final Kindle book.

It seems that when you set the indent to 0 in Word, it doesn't actually set it to 0in, it set it to 'none'. What's the difference, isn't that the same thing? Well, in html (which is what all eBooks are based on) there is a difference.

If there are "no" first line indents:
What it Means: This means there is no mention of text-indent in the html.
The Result: The default indent of the device or program is used, for Kindle the default is a slight indent.

If first line indents are set to "0":
What it Means: "text-indent: 0" will be added to the style of the paragraph.
The Result: No indent.

So, what do you do if you want no indent?

In Word you can set the first line indent to a very small number (0.01in for example). This will set a very small indent (so that it won't go to default) and visibly it's not very different from 0in.

This could also happen if you edit your book as html or an ePub. In this case, the default indent can occur if you have no "text-indent" style for your paragraphs. To fix this simple add in "text-indent: 0".

Saturday, August 17, 2013

How to Keep Images and Captions Together in eBooks

I've come across this question a lot. How do I keep the captions below my images (or tables, figures, etc)?

As you know, eBooks don't have set 'pages', the text flows. The user can change the font, the size, and the margins of the text. So, what happens when your image is at the bottom of the screen and there's no room below it? Well, the caption is pushed to the top of the next screen. Many people don't like this, and I understand. The caption is supposed to stay with the image, that's why it's there.

The sad conclusion I've come to (after much research and experimenting) is that there is no easy way to keep the two together that will work on all devices or programs.

The first thing I tried was the html property "page-break: avoid".

You may use it in this manner:
<div style="page-break-inside: avoid">
<img src="../Images/example.jpg">
<p>This is the caption below the image</p>
</div>

This should cause those items within the "div" to not break across pages. Therefore the image and caption should stay together.

Note that I said should. I tried this method, and I found that whether it works or not depends on the device/program you use. Some would honor it, others wouldn't. Sadly, Amazon/Kindle does not honor this code.

At the time I was trying to code a Kindle book, so it was on to something else. I went to Amazon's website and found what html/css codes they support. If you're curious you can check it out here:
Supported HTML in eBooks in General
Supported HTML/CSS in KF8 eBooks

I found the codes "figure" and "figcaption" in the KF8 supported html. I thought maybe that would keep the two elements together. Unfortunately, in my tests it did not. I even tried combining the 'figure/figcaption' with the 'page-break-inside: avoid'. But, it still didn't work.

So in the end, the only method I've found that works right now (this may change in the future) is to place the caption within the image file.

To do this, open your image in some image editing program. GIMP is free and available for multiple operating systems. Add a little white space under your image and use the text tool to type in your caption.

One thing to keep in mind while using this method is that the text is now part of the image, which means the text will scale with the image. When your image appears very small (think about reading on an iPhone screen) the text will be very small as well. There's not much you can do about this. Try to make the text large enough to read on the majority of screens.

The good news it that this method will work on all devices/programs.