14
Footnotes are a bit like incidental tables, they’re used to add some information to a point made within the body text; they tend to be things like bibliographic references, clarifications and my case, the odd sarcastic comment and occasional joke.
Footnotes look like this:
| †1 | Footnotes usually provide additional information or references for particular items in the main body of the text — bibliographical information, clarification etc. | ||
Footnotes have two parts, a superscript number preceded by the dagger sign (†1) somewhere within the body text (indicating that to which the footnote is applied) and then the footnote itself, this can be anywhere within the text page (by and large, I tend to put the footnote or notes at the end of the section within which they apply). The footnote consists of a line that partially spans the page, underneath which is a dagger and number (corresponding to the number in the body text) followed by the indented text of the foot note.
The footnote is actually a two row by four column table (I’ve given each cell a false colour below) that is 95% of the central area width and is centred in the central area:
| †1 | Footnotes usually provide additional information or references for particular items in the main body of the text — bibliographical information, clarification etc. | ||
The table needs four columns to allow the top border to span an area over the footnote text, it artistically spans a quarter of the width of the text area (I know, it’s quite beautiful — there’s no need to thank me). The four columns are coloured red, blue, green and purple (all four columns are visible in the first row).
The first column is used to hold the footnote number (the dagger followed by a number), the second column just gives a space between the footnote number and the footnote text, this column never has anything in it.
The last two columns hold the footnote text; these two columns are merged together in the second row (coloured orange in the above example).
I’m going to go through the code now; this is pretty similar to how all the other tables work, if you’re bored with it (I know I am), just skip to the next section.
Ok, dig deep. The HTML:
<table class="table-fnote" id="js--fn01"> <tr> <th class="fnote-top" style="width: 10%"></th> <th class="fnote-top" style="width: 10%"></th> <th class="fnote-top" style="width: 20%"></th> <th style="width: 60%"></th> </tr> <tr> <td class="table-left"><em>†1</em></td> <td class="table-left"></td> <td colspan="2" class="table-left">Footnotes usually provide additional information or references for particular items in the main body of the text&nbsp;&mdash;&nbsp;bibliographical information, clarification etc.</td> </tr> </table>
And the CSS:
.table-fnote {
width: 95%;
margin: 2rem auto 2rem auto;
border-collapse: collapse;
font-family: "conc-t3-r";
font-feature-settings: "ss02";
font-size: 0.65rem;
}
.table-fnote th {
padding: 0 0 0.25rem 0;
}
.table-fnote td {
vertical-align: text-top;
padding: 0.25rem 0.2rem;
line-height: 130%;
}
.table-fnote td em {
font-family: "conc-t4-r";
font-feature-settings: "ss02";
font-size: 0.7rem;
}
.fnote-top {border-top: 1px solid #404030;}
In much the same way as all the other tables, the footnote is a table of, in this case, class table-fnote; and table-fnote is itself much the same as all the other table classes (table-clean, table-dense and table-incid).
The first bit sets the table to 95% of the central column width, it sets the top and bottom margins (applying whitespace above and below the table) and centres the table in the central area (auto left and right margins). Next it sets the font (Concourse with British settings) to quite a small size (0.65 em).
It also sets the descendant selectors for the heading and data cells. In this case, the heading row just has some padding applied to separate it from the following row.
The data descendant (table-fnote td) again adds some padding and sets an appropriate line height. It also vertically aligns the text, the text would by default be centred vertically within the cell, in this case I want the footnote number to be at the top of the cell (aligned with the first line of the footnote text).
Finally, I define a descendant selector for the em element; this just uses a heavier version of the Concourse font at a slightly larger font size. This is used for the footnote number.
So let’s look at how it all works; the heading row first.
The heading row is just there to set the width of the columns and draw a line across part of the table:
<tr> <th class="table-cent fnote-top" style="width: 10%"></th> <th class="table-left fnote-top" style="width: 10%"></th> <th class="table-left fnote-top" style="width: 20%"></th> <th class="table-left" style="width: 60%"></th> </tr>
The row has four cells (for the four columns) and each cell sets the width of that column. The column widths are (from the left) 10%, 10%, 20% and 60% (all add up to 100).
The first three cells have also been given the class fnote-top. This class just puts a dark border above the cell:
.fnote-top {border-top: 1px solid #404030;}
This is the line that appears above the footnote and spans a portion of the screen width. I make it span just a portion of the screen by only applying it to the first three columns. It applies a top border of 1 pixel in the same colour as the text.
The content row is as follows:
<tr> <td class="table-left"></td> <td colspan="2" class="table-left">Footnotes usually provide additional information or references for particular items in the main body of the text — bibliographical information, clarification etc.</td> </tr>
The most noticeable thing here is that there are only three cells, the last cell uses the colspan="2" attribute to merge the last two columns (see § 14.1.6).
The first cell contains the footnote number and has the table-left class to left justify the footnote number.
The footnote is entered between the <em>...<em> tags (giving a larger and heavier font).
The footnote number is entered with a preceding dagger symbol; this is another one of the special HTML characters that can be entered with an &code (see § 6.11). Entering † displays the symbol (†), this is followed by the number (1 in this case).
The next cell is always empty; this is just the gap between the number and the text.
Finally, the third cell contains the textual content of the footnote, just type it directly between the <td>...</td> tags.
If an extra paragraph is needed, just add another content (data) row and delete the footnote number:
<table class="table-fnote" id="js--fn01"> <tr> <th class="fnote-top" style="width: 10%"></th> <th class="fnote-top" style="width: 10%"></th> <th class="fnote-top" style="width: 20%"></th> <th style="width: 60%"></th> </tr> <tr> <td class="table-left"><em>†1</em></td> <td class="table-left"></td> <td colspan="2" class="table-left">Footnotes usually provide additional information or references for particular items in the main body of the text&nbsp;&mdash;&nbsp;bibliographical information, clarification etc.</td> </tr> <tr> <td class="table-left"></td> <td class="table-left"></td> <td colspan="2" class="table-left">Additional paragraph here.</td> </tr> </table>
It looks like this:
| †1 | Footnotes usually provide additional information or references for particular items in the main body of the text — bibliographical information, clarification etc. | ||
| Additional paragraph here. | |||
If a section has several footnotes, it is possible to put them all in a single footnote table, just add another content (data) row and update the footnote number and text:
<table class="table-fnote" id="js--fn01"> <tr> <th class="fnote-top" style="width: 10%"></th> <th class="fnote-top" style="width: 10%"></th> <th class="fnote-top" style="width: 20%"></th> <th style="width: 60%"></th> </tr> <tr> <td class="table-left"><em>†1</em></td> <td class="table-left"></td> <td colspan="2" class="table-left">Footnotes usually provide additional information or references for particular items in the main body of the text&nbsp;&mdash;&nbsp;bibliographical information, clarification etc.</td> </tr> <tr> <!-- Footnote content row --> <td class="table-left"><em>†2</em></td> <td class="table-left"></td> <td colspan="2" class="table-left">This is the second footnote</td> </tr> </table>
It looks like this:
| †1 | Footnotes usually provide additional information or references for particular items in the main body of the text — bibliographical information, clarification etc. | ||
| †2 | This is the second footnote | ||
One final note, to put the dagger in the body text, the paragraph looks like this:
<p>Footnotes<sup>†1</sup> are used to reference a particular item in the text and add a clarification or explanation; e.g. explaining an acronym.</p>
Use <sup>†1</sup> the <sup> makes it superscript and the † puts in the dagger symbol (obviously use the correct number).