custom bullets html ebook kindle

Question

I am creating an ebook for Amazon's Kindle in HTML, and then later use KindleGen to convert it into the Kindle's MOBI version.

The problem I am currently having is with custom bullets for nested unordered lists that I am using for the ebook's Table of Contents. Initially I was using an image in the list-style-image property to create a custom bullet. This was the CSS I was using:

ul.customBullet
{
    list-style-image: url('images/bulletPointImage.png');
    margin:1.3em;
}

And this was the html:

<ul class ="customBullet">
<li><b><h3>Text 1<b></h3></li> <!-- 1st tier -->
       <ul class="customBullet">
         <li><h4><b>2:<b></h4> <1-- 2nd tier -->
             <ul class="customBullet">
                <li><h6>Text 3</h6> <!-- 3rd tier -->
                    <ul class="customBullet">
                       <li><h3><a href="#chap1"> Text</a></h3></li> <!-- 4th tier -->
                    </ul>


                </li> 
            </ul>
        </li>
        <li ><b>3: <b></li>
        <li ><b>4: <b></li>
        <li ><b>5: <b></li>
        <li ><b>6: <b></li>
        <li><b>7: <b></li>

       </ul>
</ul>

I was having problems with aligning the bullets with the text. The text appeared one line below the bullet and a little to the left and not alongside as it should (in Firefox). When I previewed the MOBI created with KindleGen in KindlePreviewer, the image of the bullet was coming out tiny (and not proportional to the image file) and the same problem of the bullet not positioned in the same line as the text.

Also, the bullets appear differently in each of the different kindle models (Kindle Paperwhite, Kindle Fire, etc.), the size of the image varied and with different sort of spacing between the bullet and the text.

I then read somewhere online that Kindle does not support the list-style-image tag. Kindle's official supported CSS tags also do not include it. So I created a simple bulleted list without the CSS but with the same html code above. The problem is the same with the spacing. And different shaped bullets appear on each tier. For example a hollow circular one on the first, a squarish one on the second and so on.

So, my question is , is there a way (any lines of code) to make streamlined bullets in html for kindle's ebook without all these variations in different versions, and also without all these unneeded space insertions, and a proper sort of positioning. Bullets that stay the same no matter which version of kindle is being used. Hope I have explained myself properly.

Answer 1

There are a few things going on here. The spacing issue is likely being caused by the presence of block elements inside list elements—the headers are probably getting bumped onto their own line, apart from the start of the list item. If you're starting with the toc.xhtml of an epub file, you'll need to lose any elements inside the Table of Contents list (which must be in a <nav>) other than <span>, <a>, or <ol>. You've got a couple other minor problems that are probably from typing stuff in here, but to hit them quickly:

• The closing <b> tags don't have a "/", making them opening tags
• The first list item ends before the list inside it begins
• The first <b> ends before the <h3> containing it ends

Try out the following:

<nav id="toc" epub:type="toc">
    <ol class ="customBullet">
        <li class="tier1"><a href="item1.xhtml">Item</a> <!-- 1st tier -->
            <ol class="customBullet">
                <li class="teir2"><a href="item1.xhtml#part1">Sub-item</a> <!-- 2nd tier -->
                    <ol class="customBullet">
                        <li class="teir3"><a href="item1.xhtml#part1_1">Sub-sub-item</a> <!-- 3rd tier -->
                            <ol class="customBullet">
                                <li class="teir4"><a href="item1.xhtml#part1_1_1">Sub-sub-sub-item</a></li> <!-- 4th tier -->
                            </ol>
                        </li> 
                    </ol>
                </li>
            </ol>
        </li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ol>
</nav>

You could as easily give the class definition to each <ol>, and then have the CSS point to ol.tier3 li { color: blue; } or whatever styling you want— might be easier to read the code that way.

Hope that's useful!