CSS Cookbook/TOC and Index
Table of Contents
2020 note
Be aware that much of this page is over ten years old, and the list method described here for ToCs is not suitable for e-reader versions created from the HTML by ebookmaker, nor for the range of narrower and wider displays. A two (or three) column table containing the (chapter number,) title and page, with the maximum width constrained, is more flexible and robust for the range of formats now required.
Examples of how to use the preferred tables are here:
- User:Windymilla/Tables_for_ToCs
- DP_Official_Documentation:PP_and_PPV/DP_HTML_Best_Practices/Case_Studies/Tables/Table_of_Contents
TODO: Add examples of HTML and CSS for a range of ToCs using
Simple TOCs
Tables of Contents are almost never as simple as this hypothetical example:
Canto I Canto II Canto III
But to make such a TOC into HTML you would code it like this:
<ul class="TOC"> <li><a href="#CANTO_I">Canto I</a></li> <li><a href="#CANTO_II">Canto II</a></li> <li><a href="#CANTO_III">Canto III</a></li> </ul>
That is: enclose the list in <ul class="TOC">...</ul>; wrap each title in a link to its corresponding anchor; and wrap each link in <li>...</li>.
Wiki limitations prevent us demonstrating this code here. Trust us; it looks nice. And the bonus is, you can write a CSS rule with the selector .TOC a in which you tell the browser how to render the links that appear in a TOC list. For example if you don't like the look of a TOC full of blue, underlined chapter titles (the default rendering of a link) you could add a rule
.TOC a {text-decoration:none; color:black; background-color:silver;}
Roman Chapter Numbers
Often chapters are numbered with Roman numerals. Here is part of the TOC from Winning His "W"
I. THE OPENING TERM
II. PETER JOHN'S ARRIVAL
III. NEW FRIENDS AND NEW EXPERIENCES
IV. A CLOUD OF WITNESSES
V. UNSOUGHT ATTENTIONS
VI. A RACE IN THE DARKNESS
VII. SPLINTER'S QUESTIONS
VIII. THE PARADE
In the HTML edition, the PPer changed the definition of the class TOC from list-style-type:none to list-style-type:upper-roman, and removed the numerals from the actual text. Now the browser generates the numerals, which neatly solves the otherwise-difficult problem of right-aligning the Roman numerals against the left-aligned titles.
(Again, Wiki limitations prevent demonstrating how this looks.)
These two styles can be combined in one book. Here is a portion of the TOC from A Tale of Two Cities (which has no HTML edition):
Book the First--Recalled to Life Chapter I The Period Chapter II The Mail Chapter III The Night Shadows Chapter IV The Preparation Chapter V The Wine-shop Chapter VI The Shoemaker Book the Second--the Golden Thread Chapter I Five Years Later Chapter II A Sight Chapter III A Disappointment Chapter IV Congratulatory Chapter V The Jackal
This can be marked-up as roman-numeral sub-lists enclosed in the list items of a TOC list:
<ul class="TOC" > <li>Book the First—Recalled to Life <ul class="TOC" style="list-style-type:upper-roman;margin-left:1em;"> <li><a href="#">The Period</a></li> <li><a href="#">The Mail</a></li> <li><a href="#">The Night Shadows</a></li> <li><a href="#">The Preparation</a></li> <li><a href="#">The Wine-shop</a></li> <li><a href="#">The Shoemaker</a></li> </ul> </li> <li>Book the Second—the Golden Thread <ul class="TOC" style="list-style-type:upper-roman;margin-left:1em;"> <li><a href="#">Five Years Later</a></li> <li><a href="#">A Sight</a></li> <li><a href="#">A Disappointment</a></li> <li><a href="#">Congratulatory</a></li> <li><a href="#">The Jackal</a></li> </ul> </li> </ul>
TOCs with Page Numbers
Under the old PGDP style guide, proofers would remove the page number references from the TOC. Starting in 2004, proofers usually retained the page numbers in the TOC, index, and other references so they can be used as hyperlinks. Here is part of such a TOC:
The Perfect Reader 1 The Autogenesis of a Poet 5 The Old Reliable 19 In Memoriam, Francis Barton Gummere 23 Adventures at Lunch Time 30 Secret Transactions of the Three Hours for Lunch Club 36
We want to reproduce this tabular list, with left-aligned titles and right-aligned numbers, and mark-up each number as a link to the corresponding page-number anchor generated by Guiguts, so that 19 becomes <a href="#Page_19">19</a>. We could do it as an HTML table, but if we do, we will have major problems with nested sub-lists and with chapter abstracts (shown just below). TOC lists handle both things nicely, and we use absolute positioning to right-align the page numbers.
Here is part of the HTML code, pretty-printed for readability:
<ul class="TOC"> <li>The Perfect Reader <span class="ralign"><a href="#Page_1">1</a></span> </li> <li>The Autogenesis of a Poet <span class="ralign"><a href="#Page_5">5</a></span> </li> <li>The Old Reliable <span class="ralign"><a href="#Page_19">19</a></span> </li> ... </ul>
The TOC is inclosed in a list with class TOC. Each line is made into a list item. The page number is enclosed first in a link to the corresponding page-number anchor; and then further wrapped up in <span class="ralign">...</span>.
The resulting list will be nicely indented at both sides, with the page number links neatly right-aligned and on the same horizontal line as their titles. Although this is perfectly standard CSS, it was not easy getting to it (see gory details).
A List of Illustrations (LOI), a List of Tables, a List of Examples—any simple directory that relates one-line titles to their page numbers—can be marked-up in exactly the same way as the preceding example.
Chapter Abstracts
Sometimes the TOC contains telegraphic abstracts of each chapter under the chapter titles. Here is an example from How to Teach Religion.
I. THE TEACHER HIMSELF 13 Importance of the teacher--Three types of teachers--The personal factor in teaching religion--Developing the power of personality--The cultivatable factors in personality--A scale for determining personality--The teacher's mastery of subject-matter--Methods of growth--Fields of mastery demanded--Service and rewards--Problems and questions. II. THE GREAT OBJECTIVE 30 Two great objectives in teaching--Making sure of the greater objective--Teaching children _versus_ teaching subject-matter--Subject-matter as a means instead of an end--Success in instruction to be measured in terms of modified life, not of material covered--The goal of a constantly developing Christian character and experience--Problems for discussion.
The code for this is almost the same as the preceding example: the whole enclosed in <ul class="TOC"> (with the definition of TOC changed to list-style-type:upper-roman); each chapter enclosed in <li>...</li>; and each page number enclosed in a link inside <span class="ralign">..</span>. The difference is each list item contains an abstract enclosed in <p>..</p> inside the list item:
<ul class="TOC" style="list-style-type:upper-roman;"> <li><span class="smcap">The Teacher Himself</span> <span class="ralign"><a href="#Page_13">13</a></span> <p> Importance of the teacher—Three types of teachers—The personal factor in teaching religion—Developing the power of personality—The cultivatable factors in personality—A scale for determining personality—The teacher's mastery of subject-matter—Methods of growth—Fields of mastery demanded—Service and rewards—Problems and questions. </p> </li> <li><span class="smcap">The Great Objective</span> <span class="ralign"><a href="#Page_30">30</a></span> <p> Two great objectives in teaching—Making sure of the greater objective—Teaching children <i>versus</i> teaching subject-matter—Subject-matter as a means instead of an end—Success in instruction to be measured in terms of modified life, not of material covered—The goal of a constantly developing Christian character and experience—Problems for discussion. </p> </li> </ul>
The Cookbook styles include a definition for .TOC p {...}, that is, the style of paragraphs that occur inside a TOC. Modify this definition as desired to style these abstracts. In the example the all-cap chapter titles were converted to title-case and enclosed in <span class="smcap">..</span> as well.
Multilevel TOCs
Yet another complication that can appear in a TOC is an indented list of sub-entries for major topics. Here is a sample of a TOC from such a book:
CHAPTER I.--History of the Cathedral Church of S. Peter 3 CHAPTER II.--The Cathedral--Exterior 36 The West Front 39 The Towers 44 The Porch and Parvise 45 The Bell-Tower 48 CHAPTER III.--The Cathedral--Interior 57 The Choir 60 The Pulpit and Throne 70 The Organ, Baldachino, and Pavement 72 The Screens 74 CHAPTER IV.--The Minster Precincts and City 99 The Palace 106 The City and Guild Hall 108 The Tithe Barn 111 CHAPTER V.--History of the Monastery 112 CHAPTER VI.--History of the Diocese 127
The markup solution is to enclose each sub-list of sub-topics in <ul class="TOC>..</ul> inside the list item for that main topic. Here is part of the code, pretty-printed
for readability:<ul class="TOC">
<li>CHAPTER I.—History of the Cathedral Church of S. Peter
<span class="ralign"><a href="#Page_3">3</a></span>
</li>
<li>CHAPTER II.—The Cathedral—Exterior
<span class="ralign"><a href="#Page_36">36</a></span>
<ul class="TOC">
<li>The West Front
<span class="ralign"><a href="#Page_39">39</a></span>
</li>
<li>The Towers
<span class="ralign"><a href="#Page_44">44</a></span>
</li>
<li>The Porch and Parvise
<span class="ralign"><a href="#Page_45">45</a></span>
</li>
<li>The Bell-Tower
<span class="ralign"><a href="#Page_48">48</a></span>
</li>
</ul>
</li>
<li>CHAPTER III.—The Cathedral—Interior
<span class="ralign"><a href="#Page_57">57</a></span>
<ul class="TOC">
...
</ul>
Each level of unsigned list automatically indents left and right from the parent level, so the sub-lists are automatically indented under their parent terms.
Indexes
Here is a sample of an index from the ASCII etext of a book:
Alban's, S., relics, 89
Alcock, Bishop, 38-40
his chapel, 65
Allen, Bishop, 35, 121
tomb, 122
Altar, often moved, 88
Andrewes, Bishop, 110
Barnet, Bishop, 112
tomb, 122
Belsham, Bishop, 113
Bishop, in abbot's stall, 17
his sword of state, 29
Brithnoth, Abbot, 47
Brithnoth, Alderman, 49
Butts, Bishop, 115
Canute, King, 41
Catharine's, S., chapel, 126
Cathedrals of old foundation, 7
Choir,
aisles, 82-86
south aisle, 82
north aisle, 84
screen, 83-84
compared with presbytery, 91
Cloister, 99
College of Secular Clergy, 122
Compton, Bishop, 117
This example has single-spaced entries with one blank line between alphabetic groups. Subterms are indented under main terms. (This format does not agree with the DP guidelines which call for a blank line between major terms and two blank lines between alphabetic groups.) Whatever format you choose, your first priority in post-processing an index is to make sure that the vertical spacing between terms and the indentation of sub-terms is absolutely, rigorously, perfectly consistent from "Aardvark" to "Zebra." This is to ensure that you can apply regular expression "replace all" actions across the whole index with predictable results.
Index HTML
Note that Guiguts has an Auto-index function that converts a text index into an HTML list.
An index is best treated as a group of lists. Each alphabetic group of top-level terms, like Barnet, Bishop through Butts, Bishop, is a list in which each top-level term is an item.
Subterms, like aisles, screen, and compared with presbytry under Choir, comprise a sub-list. If there are more levels of subterm, as in south aisle and north aisle under aisles, they are another level of list.
To mark up the index, wrap each alphabetic group in <ul class="IX">...</ul>. Enclose each group of sub-terms in another <ul class="IX">...</ul> that is inside the list item for the higher term to which they apply.
Inside the head item of each alphabetic group, place an anchor <a id="IX_X"></a> where X is the initial letter of that group.
Finally, convert each page number into a link to the Guiguts-generated page-number anchor. This greatly enhances the value of the index in the HTML edition.
Here is how the above index would be marked up, in part:
<ul class="IX">
<li>Alban's, S., relics, <a href="#Page_89">89</a></li>
<li>Alcock, Bishop, <a href="#Page_38">38</a>-<a href="#Page_40">40</a>
<ul class="IX">
<li>his chapel, <a href="#Page_65">65</a></li>
</ul></li>
...
<li>Andrewes, Bishop, <a href="#Page_110">110</a></li>
</ul>
<ul class="IX">
<li>Barnet, Bishop, <a href="#Page_112">112</a>
<ul class="IX">
<li>tomb, <a href="#Page_122">122</a></li>
</ul></li>
...
<li>Butts, Bishop, <a href="#Page_115">115</a></li>
</ul>
<ul class="IX">
...
<li>Choir,
<ul class="IX">
<li>aisles, <a href="#Page_82">82</a>
<ul class="IX">
<li>south aisle</li>
<li>north aisle</li>
</ul></li>
<li>screen, <a href="#Page_83">83</a>-<a href="#Page_84">84</a></li>
<li>compared with presbytery, <a href="#Page_91">91</a></li>
</ul></li>
<li>Cloister, <a href="#Page_99">99</a></li>
<li>College of Secular Clergy, <a href="#Page_122">122</a>Compton, Bishop, <a href="#Page_117">117</a></li>
</ul>
Do not recoil in alarm at the density of this markup. There is no reason to manually type a bit of it. The whole job can be done with a series of regular expressions as laid out in this digression.
Index Jump-Table
If the index is more than a few screens long, you can assist the reader by inserting an alphabetic jump-table: A table of two rows and 13 columns, each containing a letter linked to the IX_X anchors. Feel free to copy this one:
<table style="width:75%;" border="1" summary="alpha jump table"> <tr> <td> <a href="#IX_A">A</a></td> <td> <a href="#IX_B">B</a></td> <td> <a href="#IX_C">C</a></td> <td> <a href="#IX_D">D</a></td> <td> <a href="#IX_E">E</a></td> <td> <a href="#IX_F">F</a></td> <td> <a href="#IX_G">G</a></td> <td> <a href="#IX_H">H</a></td> <td> <a href="#IX_I">I</a></td> <td> <a href="#IX_J">J</a></td> <td> <a href="#IX_K">K</a></td> <td> <a href="#IX_L">L</a></td> <td> <a href="#IX_M">M</a></td> </tr> <tr> <td> <a href="#IX_N">N</a></td> <td> <a href="#IX_O">O</a></td> <td> <a href="#IX_P">P</a></td> <td> <a href="#IX_Q">Q</a></td> <td> <a href="#IX_R">R</a></td> <td> <a href="#IX_S">S</a></td> <td> <a href="#IX_T">T</a></td> <td> <a href="#IX_U">U</a></td> <td> <a href="#IX_V">V</a></td> <td> <a href="#IX_W">W</a></td> <td> <a href="#IX_X">X</a></td> <td> <a href="#IX_Y">Y</a></td> <td> <a href="#IX_Z">Z</a></td> </tr> </table>
| CSS Cookbook Topics | |
|---|---|
| Intro | • Styles • Browser Issues • About • Reference |
| Styling | • Basic Text • Heads • Lists • Tables |
| • Block Quotes • TOC and Index • Images • Poetry | |
| • Sidenotes • Drama • Footnotes • Page Numbers | |