2.1.10 Don’t stretch the space until it breaks

Lists, such as contents pages and recipes, are opportunities to build architectural structures in which space between the elements both separates and binds. The two favourite ways of destroying such an opportunity are setting great chasms of space that the eye cannot leap without help from the hand, and setting unenlightening rows of dots that force the eye to walk the width of the page like a prisoner being escorted back to its cell.”

The dot leader approach to which Bringhurst alludes is the default presentation for tables of contents in Microsoft Word. Fortunately this kind of layout is tricky to accomplish in CSS so it is rarely seen in web pages. Bringhurst goes on to present two alternative layouts for tables of contents which are replicated here:

Example 1 – Table of contents aligned right

Introduction7
Chapter 1 The Sex of Centaurs11
Chapter 2 Poliphilo’s Dream11

This is a table of contents so it has been marked up as a simple table:

<table>
  <tr>
    <th>Introduction</th>
    <td>7</td>
  </tr>
  <tr>
    <th>
      Chapter <strong>1</strong>
      The Sex of Centaurs
    </th>
    <td>11</td>
  </tr>
  <tr>
    <th>
      Chapter <strong>2</strong>
      Poliphilo&#8217;s Dream
    </th>
    <td>11</td>
  </tr>
</table>

The CSS looks like this:

table {
  margin: 0 3em 0 auto;
}

th {
  font-weight: normal;
  text-align: right;
  padding: 0;
}

td {
  font-style: italic;
  text-align: right;
  padding: 0 0 0 0.5em;
}

While most of the CSS is straight forward, a point worth highlighting is the margin declaration for the table itself. There is a right margin of 3 em to set the table in slightly from the right gutter and a left margin of auto to push the table over towards the right hand side of the page.

Example 2 – Centred table of contents

Prologuepage 5
Points of Possible Agreementpage 9
Irreconcilable Differencespage 11
Conclusionpage 163
Indexpage 164

Again a simple table has been used for the markup:

<table>
  <tr><th>Prologue</th><td>page 5</td></tr>
  <tr><th>Points of Possible Agreement</th><td>page 9</td></tr>
  <tr><th>Irreconcilable Differences</th><td>page 11</td></tr>
  <tr><th>Conclusion</th><td>page 163</td></tr>
  <tr><th>Index</th><td>page 164</td></tr>
</table>

The CSS looks like this:

table {
  margin: 0 auto;
}

th {
  font-weight: normal;
  text-align: right;
  padding: 0 0.5em 0 0;
}

td:before {
  content: "2022";
  padding-right: 0.5em;
}

td {
  font-style: italic;
  text-align: left;
  padding: 0;
}

There a couple of points worth noting in the CSS. The table has been centered by giving the left and right margins a value of auto. For block-level elements a width declaration would also be required when applying this technique, however tables have an inherent width so one does not need to be specified explicitly.

The bullet points separating chapter titles and page numbers have been generated by the CSS. Specifically a bullet point (Unicode character 2022) has been inserted before the td element. Generated content is not supported by Internet Explorer 6 or 7, so a more cross-browser alternative would be to write a bullet point entity &#8226; into the markup itself.

Rhythm & Proportion

§ Horizontal Motion

Reference

Cover of ‘The Elements of Typographic Style’ by Robert Bringhurst