The Design and Construction of eBooks, by Steve Thomas

Notes

Notes typically occur, in the print world, as either footnotes (at the bottom of the page) or endnotes (at the end of the chapter, or the end of the book).

In an ebook, footnotes can be problematic: where is the bottom of the page? Usually, this will be the same as the end of the chapter, so that footnotes become synonymous with endnotes. However, if the notes are brief, such as citations, it may make more sense to keep them close to their reference in the text. Long notes can be intrusive and interrupt the flow of the main content, so may be better placed as endnotes.

In my ebooks, the treatment of notes tends to vary depending on circumstances. Where there are few, brief notes, I generally keep these in the body, at the end of the paragraph in which they are referenced.

Wherever they are placed, we give notes a distinctive apprearance to make them easily distinguished from body text. They are in a different, and slightly smaller, font. When grouped as endnotes, I also separate them from the text with a horizontal line:

    .footnotes {
        border-top:1pt solid gray;
        font-family:Verdana, sans-serif;
        margin:1em; padding:1em 0;
    }
    .footnotes p { margin-bottom:1em; }
    .footnotes p,
    .footnotes li,
    .footnotes th,
    .footnotes td {
        font-family:Verdana, sans-serif;
        font-size:0.8em; text-indent:0;
    }

Ideally, notes should be encoded using the footnote class, but older works used the note class instead, with this CSS:

    .note {
        font-family:Verdana, sans-serif;
        font-size:.8em;
    }
    .note, .note p {
        margin:1em!important;
        text-indent:0;
    }

I’ve also defined an inline note, not much used but sometimes useful [for example when the note is just a citation], when an inline note can be less intrusive that linking out to a different place in the work.

    .inline-note {
        font-family:Verdana, sans-serif;
        font-size:.8em;
    }

Sidenote A common usage in very old texts was the marginal note, usually a sort of heading or precis of the content of the paragraph, either in the left or right margin,marginal note or indented into the body. I’ve defined two types of marginal notes, for the left and right margins, each indented into the body:

    .sn, .sidenote {
        clear:left; float:left; max-width:20%;
        margin:0.5em 1em 0 0;
    }
    .sn, .sn p, .sidenote, .sidenote p {
        font-size:.8em;
        font-style:italic;
        font-variant:normal;
        line-height:100%;
        text-align:left;
        text-indent:0;
    .mn, .marginal-note {
        clear:right; float:right;
        max-width:20%; margin:0.5em 0 0 1em;
    }
    .mn, .mn p, .marginal-note, .marginal-note p {
        font-size:.8em;
        font-style:italic;
        font-variant:normal;
        line-height:100%;
        text-align:right;
        text-indent:0;
    }

There’s also a popup note, which exploits the “tool-tips” display used by browsers. This does have the drawback of being available only when reading in the browser; it’s obviously not available if the user prints the work, and it doesn’t work in ereaders.

    .popup-note, abbr, acronym {
        border:1px dotted gray; cursor:help;
    }

And finally I define a special note for screen display only, used for instructions which only make sense in browser displays:

    @media screen {
        .screen-note { 
            font-size:.9em; text-indent:0;
            margin-left:1em; margin-right:1em;
            border:1pt solid gray; padding:2pt;
        }
    }
    @media print {
        .screen-note { display:none; }
    }

https://ebooks.adelaide.edu.au/about/part2.3.html

Last updated Tuesday, January 26, 2016 at 23:27