CODEWITHSUNDEEP
htmlhtml-lists
Cybis
Cybis

Reputation: 9863

How to emulate lists in HTML?

I'm converting a word document into HTML by hand so that it'll look nice when published on the Amazon Kindle. However, I'm having trouble getting the table of contents to look right.

Basically, I want the TOC to look something like what you'd get with an ordered list, but with custom list items:

Table of Contents
Preface: My Example

  1. The First Chapter
  2. Apples
  3. Yadda Yadda...

Epiogue: The End
Appendix

How can I get the "Preface", "Epilogue", and "Appendix" labels to align themselves with the "1", "2" and "3" in the list? How can I get the preface and epilogue titles (i.e., "My Example", and "The End") to align with all the rest of the chapter titles? I realize it probably can't be an actual HTML list tag, but how might I achieve the appearance?

Note - this must render on a Kindle. No javascript or anything fancy.

I'm sorry if something like this has been asked before. I can't figure out a concise way to phrase this question, which makes searching for it difficult.

Upvotes: 0

Views: 345

Answers (2)

Marcel
Marcel

Reputation: 28087

I can't say I've had experience formatting HTML specifically for rendering on the Kindle but the follwing basic HTML and CSS should work.

HTML:

<h2>Table of Contents</h2>
<ol id="toc">
    <li class="no">Preface: My Example</li>
    <li value="1">The First Chapter</li>
    <li>Apples</li>
    <li>Yadda Yadda...</li>
    <li class="no">Epilogue: The End</li>
    <li class="no">Appendix</li>
</ol>

CSS:

#toc {margin:0; padding:0; }
#toc li { margin:0 0 .5em 1.25em; }
#toc li.no { margin-left:0; list-style:none; }

Demo: jsfiddle.net/BdfEE

It uses a deprecated value attribute on the second <li> but if it works then great. If not you can try the CSS method of changing the numbering of an ordered list, however I'd imagine this possibly not working, depending on Kindle's CSS capabilities.

Upvotes: 2

Billy Moon
Billy Moon

Reputation: 58601

put them in an unordered list with no bullet marker then they should align with the other list

<ul style='list-style-type: none;'>

Upvotes: 0

Related Questions