Side notes, the fourth solution, are the most attractive arrangement for both the computer monitor and the desktop printer, since they utilize space that is usually going to waste anyway. Very wide margins, either empty or populated with advertisements, navigation bars and the like, are necessary at the left and right of all but the largest text sizes if the copy is to remain balanced and legible. Even if texts are allowed to run 60 ems wide, there is still ample room in the white space at the left or right to display so-called shoulder notes in a smaller font size. The same applies on A4, U.S. letter-size and foolscap paper.
Interleaving, the fifth method proposed, is the easiest to implement with present-day CSS: the notes are simply placed on the line below the reference: coloured text, a background or indenting can be used as typographical signals to distinguish the text from the main flow. Although interlinear notes create a patchy effect, they give a more dynamic appearance to the online page, overcoming the greyness of large bodies of text.
Interleaving is best suited to substantial footnotes. It would be desirable to interleave between full paragraphs rather in the middle of the paragraphs, but this is technically difficult with CSS.
Examples: • Endnotes • Separate Notes • Side Notes • Pop-Ups • Interleaving • Cut-In Notes • Highlighting • Keywords
Piggin.Net Macro-Typography
by Jean-Baptiste
Piggin is licensed under a Creative
Commons Attribution-ShareAlike 4.0 International License.