Get in touch

Hi,

You can email me using the form on the right. Alternatively, you can go to the Contacts page (you’ll see a link at the bottom of every page) and be added to my mailing list to keep you informed of news, releases and offers.

Thanks for visiting the site.

Stephen

           

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

Text dividers in ebooks

Blog

The blog of Stephen Arnott (aka S J Arnott). Writer of the Leofric Dark Age adventures and Jack Bleacher.

Text dividers in ebooks

Stephen Arnott

Text dividers like the ones above (also known as separators or glyphs) are an attractive way of marking breaks in text, particularly the endings of chapters. In this post, I'll tell you how to add a text divider using HTML. In doing this, I'll assume that you already have an epub version of your book, and some way of unpacking it (see my previous post for help with this).

Step1:

Find a divider you like. Most photo-libraries have a selection. You will have to pay for them, but they usually come on a sheet that has a wide selection of designs on it. The header picture for this post is part of a sheet I bought from CanStockPhoto. It's worth getting a good quality image. Screen captures won't cut it; they're nasty. You need an image resolution of at least 300dpi. 

Step 2:

Once you have a divider you like, crop it out of the sheet using a photo-editing app. On my Mac, I use Pixelmator. Save the image as a png file and give it a name such as 'divider.png'. As you save it, make a note of its dimensions (e.g. 400px by 80px).

(Some sources say that Kindle will accept only jpg or gif files. However, the official guidance recommends both gifs and pngs for drawings, and jpgs for more complex images, such as the cover. I've had trouble with gifs in the past, but none with pngs.)

Step 3:

Unpack your epub and use a text editor to open the document you want to add a divider to. Find the point where you want to insert the divider and copy in the following code.

<p class="divider png"><img alt="divider img" src="images/divider.png" width="40%" height="auto" /></p>

The above is a self-contained gobbet of HTML that tells the ebook reader to insert the image labelled 'divider'. It also tells the reader to make the image wide enough to cover 40% of the width of the page.

Step 4:

In your unpacked epub, look for the folder called 'CSS' and open the document inside it. The document will be called 'CSS' or 'stylesheet' or something similar. In this file, you'll find a long list of code. Go to the bottom and paste in the following:

.divider img {
margin: 0.0px 0.0px 0.0px 0.0px;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
text-indent: 0.0px;
width: 40%;
height: auto;
}

The above gives the ebook reader some general instructions on how you want the divider image dealt with, but specifically tells it that you want the image centred and that, again, you want the image to cover 40% of the width of the page. Properly, we should only have to give the reader the '40%' instruction once, but it doesn't hurt to use belt and braces.

Step 5:

In Step 2, you made a file called 'divider.png'. Within the unpacked epub, you'll find a folder called 'images'. Drag 'divider.png' into this folder (which, I'm assuming, will already contain your cover image).

Step 6:

Look for the document called 'content.opf'. Within it, you'll find a list of code inside a tag called 'manifest'. Within this list of code you'll find a line that refers to your cover image. It will look something like this:

<item id="cover-image" href="images/cover.jpg" media-type="image/jpg"></item>

Copy this line and paste it into the list. In the copied line, modify the text to replace 'cover' with 'divider'. For example:

<item id="divider" href="images/divider.png" media-type="image/png"></item>

Notice that we've changed both the name and the file-type (jpg to png). The manifest is a list of all the files within the ebook. If there is no record of the divider in here, the ebook reader won't be able to display it.

Step 7:

If all the code is in the right place, the divider should appear the next time you preview your ebook. However, be aware that some versions of Kindle (e.g. the DX) will ignore the 40% instruction and display the divider by default as an image that stretches the full width of the page (this is one reason why a high quality image is needed - low resolution images will quickly break up if they're stretched too far). One way to get round this is to create a divider image that has a white margin on either side. The divider will display correctly (i.e. 40%) on devices such as the Kindle Fire.

A note on sizing

In the above, we instructed that the divider's length should be 40% of the width of the page, however, there might be cases where you want the divider to display as a specific size. In the above example, our image was sized 400px wide by 80px high. If we wanted the image to display at this size we could change the HTML from:

<p class="divider png"><img alt="divider img" src="images/divider.png" width="40%" height="auto" /></p>

To:

<p class="divider png"><img alt="divider img" src="images/divider.png" width="400px" height="80px" /></p>

Assuming the Kindle device actually cares what we want to do, the image will either cover the width of the whole page as a default, or will now be rendered as 400px by 80px.

If you decide you want the image size to be greater or smaller than 400 x 80, you can change either dimension as long as the other dimension is changed proportionally, otherwise the image will distort. To ensure you do this properly (and save you some maths) look for an aspect ratio converter online (like this one), fill in the original dimensions, then change one of them. So, for example, if we want the image to be 300px wide, the converter tells us that the height must reduce from 80px to 60px, i.e.

<p class="divider png"><img alt="divider img" src="images/divider.png" width="300px" height="60px" /></p>

Remember, that if you make changes like this, they should be reflected in the CSS Stylesheet. In this case, we would go back to the code we added at the bottom of the stylesheet and change it to:

.divider img {
margin: 0.0px 0.0px 0.0px 0.0px;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
text-indent: 0.0px;
width: 300px;
height: 60px;
}

I hope this has been useful. You can see examples of dividers in the following books if you go to Amazon and use the 'Look inside' feature: