webtypography/items/2.1.10.html

<blockquote class='quote-from-book'>	<p><span class='ic'>“</span>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.”</p>
 </blockquote>
	<p>The <dfn>dot leader</dfn> 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 <abbr title="Cascading Style Sheets">CSS</abbr> so it is rarely seen in web pages. Bringhurst goes on to present two alternative layouts for tables of contents which are replicated&nbsp;here:</p>

	<h2>Example 1 – Table of contents aligned&nbsp;right</h2>

	<div class="example"><table class="ex2-1-10-toc1">
<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’s Dream</th><td>11</td></tr>
</table></div>

	<p>This is a table of contents so it has been marked up as a simple&nbsp;table:</p>

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

	<p>The <abbr title="Cascading Style Sheets">CSS</abbr> looks like&nbsp;this:</p>

<pre><code>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;
}</code></pre>

	<p>While most of the <abbr title="Cascading Style Sheets">CSS</abbr> is straight forward, a point worth highlighting is the <code>margin</code> declaration for the <code>table</code> itself. There is a right margin of 3&nbsp;em to set the table in slightly from the right gutter and a left margin of <code>auto</code> to push the table over towards the right hand side of the&nbsp;page.</p>

	<h2>Example 2 – Centred table of&nbsp;contents</h2>

	<div class="example"><table class="ex2-1-10-toc2">
<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></div>

	<p>Again a simple table has been used for the&nbsp;markup:</p>

<pre><code>&lt;table&gt;
  &lt;tr&gt;&lt;th&gt;Prologue&lt;/th&gt;&lt;td&gt;page 5&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;th&gt;Points of Possible Agreement&lt;/th&gt;&lt;td&gt;page 9&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;th&gt;Irreconcilable Differences&lt;/th&gt;&lt;td&gt;page 11&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;th&gt;Conclusion&lt;/th&gt;&lt;td&gt;page 163&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;th&gt;Index&lt;/th&gt;&lt;td&gt;page 164&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</code></pre>

	<p>The <abbr title="Cascading Style Sheets">CSS</abbr> looks like&nbsp;this:</p>

<pre><code>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;
}</code></pre>

	<p>There a couple of points worth noting in the <abbr title="Cascading Style Sheets">CSS</abbr>. The table has been centered by giving the left and right margins a value of <code>auto</code>. For block-level elements a <code>width</code> declaration would also be required when applying this technique, however tables have an inherent width so one does not need to be specified&nbsp;explicitly.</p>

	<p>The bullet points separating chapter titles and page numbers have been generated by the <abbr title="Cascading Style Sheets">CSS</abbr>. Specifically a bullet point <span class='bracket'>(</span>Unicode character 2022<span class='bracket'>)</span> has been inserted before the <code>td</code> element. Generated content is not supported by Internet Explorer 6&nbsp;or 7, so a more cross-browser alternative would be to write a bullet point entity <code>&amp;#8226;</code> into the markup&nbsp;itself.</p>