Table of Contents Typesetter
Entries
Typeset contents
Contents
- 1 · Openings9
- 2 · Scales31
- 3 · Rhythm57
- 4 · Colour of type83
- Appendix A · Conversions111
- Index127
Entry table
| Title | Page | Level | Numbering |
|---|---|---|---|
| 1 · Openings | 9 | top level | aligned right with leaders |
| 2 · Scales | 31 | top level | aligned right with leaders |
| 3 · Rhythm | 57 | top level | aligned right with leaders |
| 4 · Colour of type | 83 | top level | aligned right with leaders |
| Appendix A · Conversions | 111 | top level | aligned right with leaders |
| Index | 127 | top level | aligned right with leaders |
.toc { --toc-dot: 2px; }
.toc li {
display: flex;
align-items: baseline;
gap: 6px;
font-variant-numeric: tabular-nums;
}
.toc .title { flex: 0 1 auto; }
.toc .leader {
flex: 1 1 auto;
border-bottom: 2px dotted currentColor;
transform: translateY(-0.3em); /* sit the dots on the baseline rhythm */
}
.toc .page { flex: 0 0 auto; }
.toc .sub { padding-left: 1.25rem; opacity: 0.85; }You Might Also Need
The table of contents typesetter builds a contents list with real leader dots, which is the part of a contents page that is easiest to get wrong. The two portable techniques are a flex row with a dotted border and a gradient background with controllable dot spacing, and the tool writes both.
What is Table of Contents Typesetter?
The table of contents typesetter takes one entry per line in a title and page format, then lays out the contents page with the leader style, the page number handling and the indents you choose, and exports the CSS.
- Entries are typed one per line as a title, a vertical bar and a page number, and a line beginning with a space, a middle dot or a hyphen is treated as a sub-entry.
- Three leader styles are available: a dotted border on a flexible row, a repeating gradient with controllable dot spacing, and no leaders at all.
- Page numbers can be right-aligned with leaders leading to them, placed before the title, or omitted entirely.
- Leader gap runs from 2px to 16px, dot size from 1px to 4px and the sub-entry indent from 0 to 4rem.
- The entry table reports the title, the page, whether the line was read as top level or a sub-entry, and how the page numbers are being handled.
The two leader techniques are not equivalent. A dotted border on a flexible row is the simplest and renders uniformly, but the dots are drawn by the browser's border style, so their size and spacing are not really controllable and they sit slightly above the baseline. The gradient approach draws each dot as a radial gradient tile, with the background size set to the gap plus the dot size and the repeat set to horizontal, which gives exact control over both the spacing and the diameter at the cost of a background image that has to be positioned to sit on the baseline. The numbers are set with tabular figures so the digits line up in a column, which is what lets a reader scan page numbers rather than read them, and sub-entries are marked by indentation and a slight reduction in opacity rather than by a smaller size, so the hierarchy is positional.
- Level detection is a heuristic on the first character of the line, so a sub-entry has to be typed with a leading space, dot or hyphen to be treated as one.
- Page numbers are entered by hand. Nothing counts pages or derives them from a document.
- The left-numbered style puts the page before the title and has no leaders at all, since leaders only make sense when the number is at the end of the row.
- Only two levels exist, top level and sub-entry, so a third level has to be built by editing the exported CSS.
- Gradient dots are a background rather than real glyphs, so they do not appear if backgrounds are disabled when printing.
Use it when a contents page is being set by hand, when a generated contents list has to be restyled to match a printed book, or when leader dots are being argued about and both techniques need comparing on the same entries. Where the contents list sits in the page geometry, the book interior layout preview gives the text block it has to fit and the running head planner settles whether the contents pages carry a head at all.
How to use Table of Contents Typesetter
- Type the entries one per line as title, a vertical bar and the page number, prefixing sub-entries with a dash or a middle dot.
- Choose the leader style and the page number handling, and set the leader gap, the dot size and the sub-entry indent.
- Check the entry table to confirm which lines were read as sub-entries, since the level comes from the first character of the line.
- Copy the generated CSS, which carries the flex row, the leader technique and the tabular figures for the numbers.
When to use Table of Contents Typesetter vs related tools
Reach for it when a contents page is being set and the leader dots need to match a house style, when a contents list generated by another system has to be restyled, or when both leader techniques need comparing before one is chosen. Where the page it sits on is being planned, the book interior layout preview supplies the geometry, the index page layout preview does the equivalent job for the index, and the running head planner covers the head the contents pages carry.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.