Saturday, January 26, 2013

A simple table of contents


<h2 id='toc'>Contents</h2>

<p class='center'><a href='#chapter01'>Chapter One</a></p>

<p class='center'><a href='#chapter02'>Chapter Two</a></p>

<p class='center'><a href='#chapter03'>Chapter Three</a></p>

<p class='center'><a href='#chapter04'>Chapter Four</a></p>

<p class='center'><a href='#chapter05'>Chapter Five</a></p>

<p class='center'><a href='#copy'>Copyright - About the Author</a></p>

You will of course add as many chapters as needed, advancing the link (#chapter06, #chapter07, etc.) with each addition. I like to number them as shown, but if you like you can give the link a descriptive name, as I have done for the final section (#copy) containing the copyright information and a brief biography of the author.

Update: If you work in Sigil, as I recommend, this task is simplified for you. First, you can actually build an "html table of contents" using the Tools option on the top menu. (Click on Tools > Table of Contents > Create HTML Table of Contents.) I don't do this because I prefer my own layout, and it's a chore to edit Sigil's version. Second, you don't have to put anchors in the chapter headings or even to use the href= instruction.. By breaking the large html file into separate chapters and sections, you can use the Insert > Link option on the top menu to quickly connect an item in the TOC to that chapter. Just swipe the mouse cursor over, say, Chapter Five, then link it to the appropriate file. The link will look something like this: <a href="../Text/Section0005.html">.

23 comments:

  1. Yes, it's me again!
    I have a foreword and introduction before Chapter 1.
    I imagine I would treat them like the copyright:
    <p class='left':<a href='#foreword">Foreword by G. Smith</a></p>
    <p class='left':<a href='#introduction">Introduction by G. Smith</a></p>

    And you say not to use <a href> link back to the Contents? I've not gotten to sigil yet. My book has about 75 jpegs - I guess there is no limit as to how big one html file cane be. Thanks again for your help.

    ReplyDelete
    Replies
    1. You can, but I would be more likely to treat them as chapters. (Actually, because the Look Inside is such a great sales tool on Amazon, I am inclined to put all that stuff at the back of the book.)

      You can certainly link back to the TOC, though I don't bother.

      Epubs are supposed to be broken into multiple files, because older epub readers can choke on big files. As a practical matter, a lot of jpegs will increase the download fee in a Kindle book (assuming you want the 70 percent royalty). We are told to keep our jpegs at 127KB or smaller. 75x127= close to ten megabytes (allowing for text) or a download fee of $1.50. Certainly doable, but if you price it at $2.99 your royalty at 70 percent will be about 59 cents; while at 35 percent it will be $1.04 or $1.05. Something to bear in mind.

      Delete
  2. Me and my questions. Thank you NotJohn. The day I get this book published, I will send you a comp copy. Am using your book right now, but note that the link on Step 2. CSS has been taken down: http://notjohnkdp.blogspot.com/2012/12/a-style-sheet-for-e-books.html (I'm sure there is a new link to replace it - what might it be?) I must have the second edition (as evidenced by the link date).

    ReplyDelete
    Replies
    1. Yes, it got a new address when I revised it most recently. It's at http://notjohnkdp.blogspot.com/2013/07/heres-my-style-sheet.html

      Delete
  3. Hello Notjohn,

    I am trying to publish book #2 of a trilogy, but the table of contents does not show up on the left panel in Kindle. I can access the TOC fine in the book, and through the Go menu, but it doesn't show up. It shows up fine in book #1, and I used book #1 as a template (based on your template; I bought your book). Any ideas?

    ReplyDelete
    Replies
    1. Did you use Sigil? Using the Generate Table of Contents option allows you to say what will appear in the virtual TOC, which is what I think you mean by "left panel." (I don't have a left panel in my Fire HD, but I can call up the virtual TOC and look at it onscreen.)

      Delete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. Hi NotJohn,

    I used you code for a simple TOC in my HTML file (I'm using SynWrite editor). The TOC appears all right while I open my htm file in a browser but Chapter 1, Chapter 2 etc. don't work like hyperlinks - clicking on them don't take me anywhere (I suppose clicking on Chapter N should take me to the Chapter N in the text). Can you please help?

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. This comment has been removed by the author.

      Delete
    3. I do all this in Sigil; it's much easier. But if you are uploading a single html file, then you must put an anchor before the chapter heading for Chapter N, like this: <id="N">

      In my Guide, you'll see that I use chapter01 (etc) as the anchor and pointer. Helps keep things straight. So the pointer is <a href="chapter01">Chapter One</a> while the anchor is <id="chapter01">

      In Sigil, ideally, each chapter becomes a separate file, so you point to the file instead. Sigil has an option that will build an html TOC for you. Go to Tools > Table of Contents > Create Html Table of Contents

      Delete
    4. Hi NotJohn:
      First off, thanks. I downloaded the Sigil version you've recommended and build the TOC using it.
      Now some more questions. The TOC in Sigil is shown on the side bar. The Sigil only allows to save file as ePub. So far so good, Amazon DKP accepts ePub. I uploaded my file and the TOC is not shown in the online Preview. Any trick I should use to get it shown?
      And one more questions. All my paragraphs, as well as each speech remark of my characters, look "double-indented". In my original source, which is Google Docs, I used 5 spaces for each indent as Kindle does not recognize tabs. Any advice on how to handle these indents - possibly in Sigil? Many thanks in advance, Greg

      Delete
    5. The online preview doesn't obey hyperlinks, so if the TOC links don't work, that's to be expected. If they don't SHOW, then you haven't created an html TOC. Note that you can do this in Sigil by going to Tools > Table of Contents > Generate Html Table of Contents (or some such language).

      If your paragraphs begins with <p> they will be indented according to your style sheet. See my style sheet on this blog. I call for an indent of 1.5 em (I think). If you want more, then use 2 em. You can copy that style sheet into a text file (Notepad will do). Save it as style.css or any name that ends with the css extension. Insert it into Sigi's Styles folder. Then at the heading of your html file as shown in Sigil, make sure it says (in the HEAD section) <link href="../Styles/style.css" rel="stylesheet" type="text/css" />

      Delete
  6. I'm following your book and am now on 548. I have a couple questions about Sigil. 1. The link to the user guide is broken and I can't find the guide. Do you have a new link for it?
    2. I opened the htm file and saved it as epub. However, when I open the epub file, the tab shows htm, not epub. Should I be seeing the name of the epub file in Sigil's tab?

    ReplyDelete
    Replies
    1. The outdated but only manual is here: http://peterloveland.com/development/plant/wp-content/uploads/2015/03/Sigil-0.2.0-Manual.pdf

      The individual files are named html or xhtml. The book file itself however has the extension *.epub. I am now using the most recent (0.9.x) version of Sigil, but since I have no use for epub 3 (don't understand it, or why it's needed!), I set my preference for epub 2. So at the top it will say something like filename.epub - epub 2.0 - Sigil. But looking at the lefthand column of individual file names, the first says TOC.xhtml, the second is title.htm, and the third is filename0001.htm (I named those; sometimes I get ambitious and name them chapter01.htm, chapter02,htm, etc).

      Delete
  7. I have installed the latest version of Sigil and am now at Preview Your Book in your guide. I noticed in the preview that there are widows and orphans, sometimes a header is alone at the bottom of a page. This does interrupt the reader's flow, and I'm wondering what you do about this, if anything.

    ReplyDelete
    Replies
    1. No worries! In a reflowable e-book (the vast majority, and IMHO the best kind) there are no "pages" as such, so there will always be widows and orphans. I don't worry about them even in a print edition, and then only there's only a line or two alone on a page. (Then I revise an earlier paragraph to tighten up the chapter.)

      Of course if the "header" is a chapter title, you almost certainly don't want that. Each chapter or section (TOC, title page, most images) should be a separate file. Once you have your style sheet set up and linked, just place your cursor at the last character in the chapter, then mouse-click the icon that shows a book page, an arrow, and two book pages.

      Delete
  8. I am now viewing my eBooklet in the Kindle Previewer. With the small class, there is much more line space after the header than before. I would prefer the reverse. The HTML paragraph classes are first, small, then first. Suggestions?

    ReplyDelete
  9. Sure, just change margin-bottom:1em; to margin-top:1em; or something similar. If you want some bottom margin, then make it margin-bottom:0.5em;

    You do understand that these are paragraphs, not headers, right? They aren't "hierarchical," so they won't be picked up for the table of contents. That's why they're paragraphs and not an H3 header, which seems to be exactly what you're looking for (space above, no space below).

    Those large, medium, small paragraphs are designed for the title page, though they can be used elsewhere if a heading isn't intended to be in the table of contents.

    ReplyDelete
  10. Thank you. That is what I wanted. I created a new small paragraph class p.psmall with margin changes. Even with the bottom margin set to 0, there was too much space after the ending p tag. I corrected it by making a negative, -.5em, bottom margin. Will a negative margin cause any problems?

    ReplyDelete
    Replies
    1. That's weird. The problem must lie with whatever follows the paragraph in question. I have no idea what would happen with a negative margin, but if it works, it works. Make sure you preview the book thoroughly.

      Delete
  11. I know this is an old post, but hopefully you get this comment.

    How would you alter this if you have sub levels to your TOC? For instance, I have Part I and Part II, then chapters underneath those.

    ReplyDelete
    Replies
    1. The easy way would be to capitalize PART ONE, PART TWO, or to use italics and boldface, something like that. You could also use p class="center" for the parts and p class="first" for the chapter titles.

      Delete

English only. No links. Keep it clean.