February 16, 2012

Adding Ordered and Unordered Lists to Your Kindle eBook


Thank you for visiting this eBook design tutorial. We now have an eBook design startup—BB eBooks—dedicated to helping independent authors and small presses get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. Amazon's Kindle Store, Barnes & Noble's Nook, iBookstore, Smashwords, etc.) Please contact us for a no-obligation quote. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer free online tutorials and apps to help you professionally design your eBook. Please visit our Developers page and let’s work together to improve the overall standards of eBooks. Also, please sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.



Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.

Previous Post: Working with Tables

Lists are a way to represent related pieces of information in bulleted format. Ordered lists utilize a sequential numbering format, while unordered lists use bullets. In terms of presentation, lists are typically indented from the normal content, with the bullets or numbers appearing in a vertical line. Using this type of markup is particularly useful for non-fiction.
Examples of Ordered and Unordered Lists


Older e-ink Kindles have marginal support for lists; however, they typically work as long as the presentation properties aren't modified using CSS. The Kindle Fire has much better support for lists, and their presentation can be extensively altered using CSS.

HTML Markup for Lists


The entire contents of an ordered or unordered list are wrapped in the tags <ol></ol> or <ul></ul> respectively. Within these elements, text is added in between <li></li> tags to denote the content for one bullet. The HTML markup for the above screenshot would look as follows:
<p>Things to do today (in order)</p>
<ol>
<li>Fire agent</li>
<li>Learn how to design an eBook</li>
<li>Upload my eBook to the Kindle store</li>
</ol>
<p>Things to do today (in no particular order)</p>
<ul>
<li>Walk the dog</li>
<li>Write 1,000 words</li>
<li>Make alimony payments</li>
</ul>
Important Note: Do not wrap the contents of an entire ordered or unordered list within <p> tags (i.e. <p><ol><li> Item1 </li></ol></p>). This is improper coding and will result in failed HTML validation. Also, be sure to follow the rule that the first tag opened should be the last to be closed. <ol><li></li></ol> is correct, but <ol><li></ol></li> is incorrect.

When working with lists, it is comforting to know that if the content for one bullet is wrapped onto the next line, it will be indented the same distance from the bullet as the first line. Therefore, all the text inside a list will be flush. This is a nice typographical feature when you want to display specific information to your reader.
Lists Appear Flush from One Line to the Next

Nested Lists


Nesting lists allows you to display sub-bullets under one bullet. This is particularly useful when constructing the Table of Contents. While support for nested lists on the older e-ink Kindles is poor, it works well on the Kindle Fire. Care must be taken with the syntax and tag placement for nested list HTML markup, and use of an HTML Validator is almost essential. If you want to add a sub-level list to one bullet, add a separate ordered or unordered list in between the opening <li> and closing </li> tags of the root-level element. Some sample HTML is as follows (indented for convenience):
<p>Things to do today (in order)</p>
<ol>
  <li>Fire agent</li>
  <li>Learn how to design an eBook utilizing my awesome new HTML and CSS skills
  <ul>
    <li>Brush up on KindleGen compiling</li>
    <li>Debug my EPUB</li>
  </ul>
  </li>
<li>Upload my eBook to the Kindle store</li>
</ol>
Nested List Example in Google Chrome


Notice how the closing </li> for #2 on the ordered list comes after the </ul> for the sub-level list.

When designing eBooks for the Kindle, it is a good practice to be cautious in the use of nested lists due to their poor rendering on older e-ink Kindles when CSS is applied. However, if no CSS is defined for the list, they will have acceptable rendering.
Acceptable Rendering of Nested Lists on the Kindle
Next Post: Working with Hyperlinks
Share/Bookmark

17 comments:

Dan said...

I've found using any kind of CSS to style lists in ebooks is more trouble than it's worth. If you need to use lists, it's best to just use the default list styling in each reading device.

Paul Salvette said...

Thanks for your comment, Dan. I'm going to start covering CSS for Kindle pretty soon here. Would love to get your feedback. It can do some powerful stuff.

Angie said...

Hi Paul,

Can I have line space between ordered/non-ordered lists? How?

Some of my lists have long sentences and I hope I can insert a line space between them for a break to readers' eyes. Thanks!

Angie

Paul Salvette said...

Try using a break tag <br />

Graham said...

Hi Paul,
Your blog has been insanely helpful many times. I was wondering if you have tried to manage resizing the numbers included in a numbered list on a Kindle?

E.g., I have a numbered list in my ebook, and when I change the font size on the Kindle device itself, the numbers in the list are resized way out of proportion with the list item content. I end up with an enormous 3 next to my list item text. Do you know of any way to control this?

Paul Salvette said...

Graham,

Unfortunately, dealing with ordered or unordered lists on the older e-ink Kindles is a total nightmare. I recommend not applying any styling to them. Sorry.

Anonymous said...

Sir, I used ordered lists for my non-fiction book which show exactly the way i want on Kindle paperwhite,fire and fire HD, also on PC.
But the lists join to form a paragraph on the rest of the devices like Kindle, DX and iPad.

Please guide me a way out as soon as possible.
Thanks

Anonymous said...

SORRY I FORGOT TO ENTER MY NAME AND INFO!!

SWATI
swatibansal.21cent@gmail.com

Sir, I used ordered lists for my non-fiction book which show exactly the way i want on Kindle paperwhite,fire and fire HD, also on PC.
But the lists join to form a paragraph on the rest of the devices like Kindle, DX and iPad.

Please guide me a way out as soon as possible.
Thanks

Paul Salvette said...

Can you please show your markup? Also, make sure you do not enter any styling information on ol, ul, or li elements for MOBI7 type devices.

Anonymous said...


SWATI

i used this css code for ol
font-family:"Times New Roman","sans-serif";
margin: 1em 0 1em 0;
list-style-type:decimal;

and this for li

margin:0.5em;

I did not use it earlier but i found that the lists were too stuck up with each other.

Please, if required, suggest an alternate code.

Thanks

Paul Salvette said...

Swati,

All ol, li, and ul styles for the Kindle must be in the KF8 media query. Example:

@media amzn-kf8{
ol styles
li styles
ul styles
}

Otherwise they will affect MOBi7-type devices and cause major problems. Hope that helps.

Anonymous said...

SWATI

Hello Sir, ThankYou for that @media advice. I completely forgot that it exists :)
Although i did not use kf8, i used @media amzn-mobi which settled things my way. Now the book is working fine on all devices.
One more thing i want to know is that i am having 2-3 paragraphs in between lists (li). Structure is :
(ol)
(li)(/li)
(para1)
(para2)
(li)(/li)
(/ol)

Now my margin for para is 1em and for ol is (1em 0 1em 0)
This causes a double spacing between (/ol) and (p) and looks awkward for nested lists and paragraphs!!

Now how to eliminate that? That is the only problem hanging now.

Thanks.

Paul Salvette said...

Swati,

I'm not sure if putting paragraphs inside li elements is okay. Does it pass XHTML validation? Try using a negative indent on your bulleted paragraphs and write them as p elements rather than li elements.

Anonymous said...

SWATI
Yes sir, its valid.
For continuity i used the 'start=1' and so on attributes for ol.
That is completely working fine with all devices.
Only double spacing is the only problem arising and i don't think that those CSS3 updates would help me as they are not detected on older versions of kindle.

Thamizh Mani said...

Hi Team..,
I am use the order list but justify style is not support in mobi file any solution...

Knowyourfire said...

Is There any readymade software that helps in creating the ebook cover.I searched and find some online but not sure is that a good idea??

Zheng junxai5 said...
This comment has been removed by a blog administrator.