eBook Conversion

eBook conversion for Kindle and ePub readers

Images as chapter headings (Kindle)

If you really don’t like the Kindle’s default chapter styles, then a workable alternative is to use an image instead. Of course, this means creating a different image for every chapter, which is time-consuming if your book is long, but it will look really nice if it’s done well. You could maybe ask the person who’s designing your cover for advice (or get him or her to do these graphics for you as well).

Instructions

Your image should be a GIF and, as discussed in the section on section break graphics, you have to enter the size of the graphic to stop the Kindle resizing it.

The CSS you need is the same as what you’ve been using for text, because graphics in this case are treated in the same way.

h1{ text-align:center; page-break-before: always; margin-bottom: 2em;}

Obviously, if you want your graphic to be left- or right-aligned, change the text-align value accordingly.

Now, putting the image in is not difficult at all; assuming your chapter headings are wrapped in <h1> … </h1> tags, simply adding the HTML code to insert an image between the tags will work. The only problem is that your conversion program has no information on which to build a table of contents.

This is not too difficult to fix; however, I’ve only been able to get this working with Calibre and not with MobiPocket Creator.

Here’s the HTML you’ll need:

<h1 title="Chapter 1"><img src="Chapter1.gif" height="221px" width="250px" alt="Chapter 1" ></h1>

The text you put in the quotes after h1 title is what will appear in the table of contents. Change the height and width values to match the size of your image.

You should also add an alt=”” tag – this is alternate text for an image. When someone is using text-to-speech, an eBook should speak this text when it encounters an image. Unfortunately the Kindle ignores this (poor show, Amazon), but you should still include it – ePub files will not validate unless images have alt tags. (Hopefully Amazon will fix this oversight in a firmware update.)

We now need to tell this to Calibre. The instructions for converting to Calibre are here; in the Table of Contents pane in the Convert dialog, press the magic wand button by the Level 1 TOC field. Enter the following values;

  • Under ‘Match HTML tags …’, enter h1
  • Under ‘Having the attribute’ enter title. Press OK

Bear in mind that, in this case, the output of Calibre’s built-in reader will not be the same as the output in Kindle Previewer or the Kindle.

A sample layout

Kindle file: imageheading.mobi
Source HTML file and images: imageheading.zip

In my prospective Freemasonry-themed conspiracy thriller, I’ve used some Masonic compasses as chapter headings. In the Kindle file, these chapters output as ‘Chapter 1’ and ‘Chapter 2’ in the table of contents. The images are about 17KB each.

Sample chapter with image chapter heading (click to enlarge)

Tags: ,

5 Responses to “Images as chapter headings (Kindle)”


  1. Paul Salvette
    on Sep 15th, 2011
    @ 2:29 am

    It’s nice to see someone who understands that you can’t just convert a word document directly into MOBI. Thank you for these excellent tutorials. Any plans for an EPUB tutorial?


  2. Paul
    on Sep 15th, 2011
    @ 8:59 am

    Thanks – yes, I’m working on it. I think most HTML to .mobi concepts work on ePub as well – I probably just need to add information about the extra formatting options that are available with ePub. (I also need to borrow a proper ePub reader, so I’m not relying on emulators.)


  3. Thad McIlroy
    on Sep 28th, 2011
    @ 8:46 am

    Hi Paul,

    It’s tough “conversing” on Twitter, but at least that has brought me to your site, which I’m looking forward to spend some time exploring. I can be reached at thad@thefutureofpublishing.com. Cheers.


  4. Ravi Banthia
    on Sep 27th, 2014
    @ 7:47 pm

    Hi Paul,

    Great stuff from you!

    I just noticed a typo in the link that brings me to this page.

    Images as chapter hedings: Using images in chapter headings as an alternative to text

    https://ebookconversion.paulbrookes.net/kindle-topics/

    Best regards,
    Ravi


  5. WomensNews
    on Jun 19th, 2016
    @ 1:12 pm

    If your document does not have chapter headings and titles formatted differently from the rest of the text, calibre can use this option to attempt detection them and surround them with heading tags. h2 tags are used for chapter headings; h3 tags are used for any titles that are detected.

Leave a Reply

© Paul Brookes, 2015. Powered by Wordpress.