introduction

“Scholarship on the Web: Managing & Presenting footnotes and Endnotes” has been revised and improved. First among the additions are print stylesheets for each technique as well as new approaches to displaying Download
“Managing & Presenting
Footnotes & Endnotes” PDF


View Screen CSS for Essay
View Print CSS for Essay
citations or references as sidenotes. The CSS and markup are also cleaner and clearer. The techniques outlined here are, frankly, most useful for modern, CSS capable browsers—IE 7 Beta 2 (Win), IE 6 (Win), IE 5.2 (Mac), Safari 2.x (Mac), Firefox 1.5 (Win & Mac), and Opera 8.5 (Win & Mac). As a result, these examples will fail in older browsers, particularly NN 4.x, (Win & Mac), IE 4 (Mac & Win) and, sometimes, even in 5.x (Mac) and IE 5.x (Win) because these browsers do not honor several of the CSS (Cascading Style Sheets) properties or interpret them in non-standard ways. Even among modern browsers, there is considerable variation. Consequently, results will not be identical across browsers, especially the results of print stylesheets. Readers are advised to consult the documentation accompanying their (X)HTML editing software for CSS styling use and test work with different browsers and printers.

These examples are intended not only for my students but also for academics, particularly in the humanities, who wish to put their research on the web. As such, the examples employ CSS class selectors in combination with descendant selectors, for the most part, as well as a simple, CSS tableless design. To be sure, this is not the most elementary approach, but it is the most accessible and amenable to visual HTML/XHTML editors. Knowledge of (X)HTML and CSS is helpful, although novices will get along with copy and paste. All the CSS and (X)HTML referred to in the examples are drawn from the markup and CSS that govern the structure and presentation of this mini-site. Choosing “View Source” or its equivalent will reveal all the relevant information not addressed explicitly in the essay regarding the HTML markup, and clicking the View CSS button on each page will access the CSS for either the screen or print stylesheets.

Nothing on the web is a solo venture. This project has benefited from practices adapted from projectseven’s, QuickDrawMacFly, Charles Wyke-Smith’s Stylin’ with CSS, Dan Cederholm’s Bulletproof Web Design, Jeffrey Zeldman’s AListApart, Jeremy Boggs’ ClioWeb, Andy Budd’s CSS Mastery, MaxDesign’s Listutorial and Floatutorial as well as discussions on WSG, and CSS-Discuss, among others.

background

The superscripted footnote/endnote reference mark and its accompanying footnote/endnote text and reference mark are the hallmark of scholarship in the humanities. It is the “breadcrumb trail” that allows scholars to gauge the quality of the evidence underpinning research and to follow the evidentiary path. Annotation, whether in the form of footnotes or endnotes, should be something that the Web should do well, given its linking capability. Readers, if they so desire, can immediately see the nature and source of the researcher's evidence.

Yet, superscripting a footnote/endnote reference mark in the text on a web page is not as straightforward as it might appear. When authors first approached footnoting/endnoting, they used HTML superscript element <sup>. The <sup> element, however, did not (and does not) take into account line leading (the space between lines). As a result, the line spacing becomes unsightly and aggravates the already difficult task of reading or scanning on the Web. Disappointed, early authors turned to the inline, bracketed number and linked the reference marks to their corresponding textual notes with anchors. Nonetheless, some humanists sought to preserve the traditional superscripted reference and line spacing. One major academic press went so far as to concatenate annotation information into a single paragraph reference and subscript the reference mark to accommodate the line leading.

Such an approach, albeit extreme and wrong-headed, reflects the challenges inherent in the problem and the scarcity of resources. While online queries and examples always provoke a flurry of interest, except for Jean Baptiste Piggin's Macro-Typography: A Style Guide and Jukka Kopela’s Footnotes (or Endnotes) on Web Pages, discussions of endnote/footnote presentation are few and far between. For example, “From Footnote to Sidenotes” (2003) uses CSS3 attributes to display the reference text, and comments regarding the Webgraphics piece elicted other responses and approaches. John Gruber's “About the Footnotes” (2005) prompted a number of demonstrations of both footnotes and sidenotes: “CSS Footnotes Revisited: Sidenotes” (2005–2006), “Footnotes vs. Sidenotes” (2005), and “Footnotes on the Web.” Joe Clark’s “There’s No Such Thing as a Footnote” (2005) chided both Gruber and the W3C “standardistas.” “A markup language invented to present physics papers online,” he observed, “was deficient for that purpose [footnoting] in the first place and will never be fixed.”

The W3C, the governing standards body for the web, has debated the endnote/footnote problem from time to time, however. An early version of HTML, circa 1995, included both a <note> and <fn> element intended for endnotes or glosses; vendors were not interested in developing the former, and both disappeared from the HTML 3.2 specification. The W3C’s “Paged Media Properties for CSS3” (1999) working draft includes an excellent outline of requirements for displaying footnotes/endnotes, but the extended discussion is limited to a single word: placeholder. More recently, the W3C working draft, “CSS3 Module: The Box Model” (2002) offered a partial solution to displaying endnotes in its discussion of additions to the float property. On another front, the W3C XHTML group has considered in its public discussions the inclusion of a <footnote> element in the XHTML 2.0 (2003) specification. All of these discussions, unfortunately, have produced no tangible results.

Aside from these observations, there is a more basic consideration. Web mandarins argue about whether or not footnote/endnote reference marks should appear superscripted on the web. As one W3C expert put it, “Again and again, why do you people need a special element to markup such cases?” Superscripting is, after all, some argue, a print-based standard, and the web is a different medium with its own evolving canon. Why superscript at all? There are three rationales:

In this light, the question is not why but how annotation should appear and function on the web. Scholarship on the web should:

This project explores several solutions for the problem of annotation on the Web on both the screen and print. It also approaches the problem utilizing common XHTML and CSS strategies. Although annotation for the web is possible in authoring programs such as Flash and Director, for most projects, the time and dollars involved illustrate the law of diminishing returns.

basics

The page layout comprises five structural components or div IDs: #header, #nav, #maincontant, #footnotes, and #footer. These are laid out in a standard two-column arrangement. While the page includes a number of CSS declarations, there is one that is critical: defining the base font size for the page.

Although there is heated debate about the best way to approach font sizing, these examples use a percentage/ems font-sizing scheme to achieve relatively consistent appearance across browsers and platforms. The body declarations create a baseline font size for the web page at 101% and aligns the text to the center so that the page will float to the center of the page in IE 5.x (Win). The #wrapper describes the font-size, font color, and font-family for the page. It also specifies the text alignment to the left for modern browsers and sets the margins, allowing the page to float to the center of the computer screen, again, for modern browsers. To deal with the “box model” problem inherent in IE 5.x (Win), there is a separate stylesheet called from each page with a conditional statement. The font-family declaration specifies several fonts, all of them standard web-centric fonts that are similar in x-height.

body {

text-align: center;

background-color: #FFF2BF;

font-size: 101%;

}

 

#wrapper {

width: 740px;

text-align:left;

margin-left: auto;

margin-right: auto;

margin-top: 3em;

border: 12px double #BFAC60;

font-family: verdana, lucida,
arial, helvetica, sans-serif;

font-size: .82em; color: #333;

background-color: #FFFAE6;

}

example #1: css basic

example #1: css basic—Academic web designers have approached scholarly annotation by avoiding the <sup> element, using the more scientific form of the reference mark—a number enclosed in brackets, and linking the reference mark to the note with anchors. This iteration begins with the basic inline “bracket” with a twist. Instead of brackets, this strategy uses CSS to create a colored box around the reference number in the main text and a change in box color when the mouse rolls over the reference mark box. Clicking on the reference mark takes the visitor to the corresponding footnote and clicking on the footnote reference mark returns the visitor to the text.

The first step involves creating a class style for the #maincontent’s standard links. These declarations will render the link brown with a subtle, dotted underline, an orange on rollover, and a pale orange after a visit.

#maincontent a.text {

text-decoration: none;

color: #997A00;

border-bottom:1px dotted #997A00;

}

 

#maincontent a.text:visited

text-decoration: none;

color:#E6B873;

border-bottom:1px dotted #E6B873;

}

 

#maincontent a.text:hover,
#maincontent a.text:active
{

text-decoration: none;

color: #FF9900;

border-bottom:1px dotted #FF9900;

}

The second step defines a smaller style for the reference marks within #maincontent. The CSS describes here will place a small yellow box around the reference mark that will turn orange on rollover, and pale orange after a visit—on some browsers.

#maincontent a.note {

background-color: #FFE680;

color: #333;

margin-right: .2em;

padding: .1em .2em .1em .2em;

text-decoration: none;

border: none;

line-height: 0em;

font-size: smaller;

}

 

#maincontent a.note:visited {

background-color: #E6B873;

color: #333;

}

 

#maincontent a.note:hover,
#maincontent a.note:active
{

background-color: #FF9900;

color: #333;

}

The third step involves declarations creating, first, a container for the footnotes, second, specifying styles for the footnote paragraphs and, third, designating a class style defining the link, hover, and visited states with the same color palette as the #maincontent reference marks. The result: “single-spaced” footnotes in a slightly smaller font size, space after each note to improve readability, and a reference mark with three states with some exceptions to guide the visitor through the text. (Note that the line-height adds a bit more leading to the endnote text.)

#footnotes {

font-size: .94em;

margin: 0 0 0 1em;

width: 570px;

float: right;

}

 

#footnotes p {

margin-top: .2em;

padding: 0 3em 0 2em;

line-height: 130%;

}

 

#footnotes a.note {

background-color: #FFE680;

font-weight: normal;

text-decoration: none;

color: #333;

padding: .1em .2em .1em .2em;

margin-right: .2em;

border: none;

font-size: smaller;

}

 

#footnotes a.note:visited {

background-color: #E6B873;

}

 

#footnotes a.note:hover,
#footnotes a.note:active
{

background-color: #FF9900;

}

What remains is adding anchors both to the text reference marks and the footnote reference marks. The code for the reference mark in the text will look like the following:

<a href="#fn1text" class="note">1</a>
<a name="fn1ref" id="fn1ref"></a>

And the corresponding code for a footnote reference mark, depending on the naming regimen, will look like the following:

<a href="#fn1ref" class="note">1</a>
<a name="fn1text" id="fn1text"></a>

Advantages: To implement this strategy is fairly straight forward, using the anchor element in an HTML editor. In that sense, the endnotes are readily available. The text is tidy, bereft of unsightly line leading disruptions and the awkward (and ugly) [1]; the body text and endnote text are proportional to one another; and the note box provides a larger “click zone.” Anchors allow access both to and from the endnote reference mark and endnote text. Disadvantages: While this strategy tidies up the body text, it creates several other problems. First, the reader must jump back and forth between the main text and endnote. As a result, the reader may become disoriented. Although this approach is fairly easy, anchors are also often problematic. Too often designers forget to link the return anchor and, in consequence, the reader is left at the bottom of the page and must scroll to his or her initial position. Second, the baseline reference mark format does not correspond to the standard common to the humanities. Finally, different fonts possess different default font sizes and baseline orientations. Using a different font—Georgia, for example—will cause problems. Georgia uses old-style numbers. Because certain digits in old style figures drop below the font baseline, the reference mark boxes become misaligned. The solution is to use a similar serif font family, such as Times or Time New Roman, that rest on the baseline for any footnote references. The change in font will be virtually undetectable.

example #2: css super

example #2: css super—This example superscripts the reference marks in both the main text and in the endnote/footnote text by making two changes—one in the CSS and one in the HTML markup. (Both changes are highlighted in green). In this iteration, the reference style for the body text specifies the superscripting of the reference mark by combining the <sup> element with a zero line-height . (Normally, zero is zero in CSS, but the W3C validator will throw an error if no length is specified.) Essentially, the <sup> element superscripts the number while the line-height property “pushes down” the vertical elements baseline. As a result, the superscripted endnote reference mark does not disturb the line leading. The link definition and its kin furnish the rollover effect as they did in the previous example. By default, browsers reduce the size of text enclosed by the <sup> element by one-third to one-half, depending on the font, so it is necessary to remove the font-size declaration from the basic css a.note style.

#maincontent sup a.note {

background-color: #FFE680;

color: #333;

margin-right: .2em;

padding: .1em .2em .1em .2em;

text-decoration: none;

border: none;

line-height: 0em;

}

 

#maincontent sup a.note:visited {

background-color: #E6B873;

}

 

#maincontent sup a.note:hover,
#maincontent sup a.note:active
{

background-color: #FF9900;

}

 

#footnotes sup a.note {

background-color: #FFE680;

text-decoration: none;

color: #333;

padding: .1em .2em .1em .2em;

margin-right: .2em;

border: none;

line-height: 0em;

}

 

#footnotes sup a.note:visited {

background-color: #E6B873;

}

 

#footnotes sup a.note:hover,
#footnotes sup a.note:active
{

background-color: #FF9900;

}

The HTML must be changed to by enclosing the link with <sup> elements. The HTML markup for a reference mark in the text will look like the following:

<sup><a href="#fn1text" class="note">1</a>
</sup><a name="fn1ref" id="fn1ref"></a>

And the corresponding HTML markup for a footnote reference mark will resemble the following:

<sup><a href="#fn1ref" class="note">1</a>
</sup><a name="fn1text" id="fn1text"></a>

Advantages: Implementing this strategy is fairly straightforward, and easily accomplished with a commercial HTML editor. Readers have access to the notes, and the reference marks are superscripted. Enclosing the reference number in <sup> elements is critically important for print stylesheets. Browsers and print devices, apparently, interpret the <sup> element by reducing the size of the font. This modification contributes to a much more effective and attractive print version by providing some space between the reference mark and preceding line. Disadvantages: Despite considerable ease of use, this strategy does not solve the problem of the reader's having to bounce back and forth between endnote and main text. There is also a problem with the IE (Win) family. For some reason, the browser pushes down the line containing a superscript in the footnotes, reducing the space between it and the following line. The effect of this can be reduced by a reasonable leading, but the discerning eye will note the difference.

example #3: css popup

example #3: css popup—This version combines gambits outlined by Eric Meyer, Jean Baptiste Piggen, and others but works a variation on their approaches. The popup uses absolute positioning to center—or thereabouts—the footnote text within the relatively positioned #maincontent paragraphs and a dummy links to prevent moving to the anchor element at the page bottom. The citations are enclosed by span elements in the HTML markup. Roll over the reference marks, and the citation pops up in the middle of the paragraph.

sup a span {

display:none;

}

 

sup a:hover span {

display: block;

background-color: #fff2bf;

font-weight: normal;

font-size: 110%;

color: #333;

line-height: 120%;

position: absolute;

margin: auto;

padding: 10px;

left: 33%;

top: 40%;

width: 25%;

z-index: 200;

}

 

.relativeparagraph {

position: relative;

}

Again, in addition to editing the CSS, some changes are necessary in the HTML. The citation material must be copied inside the <span> elements and placed accordingly. The HTML markup for a reference mark in the text will look like the following:

<sup><id="fn1" href="#" class="note">1<span>
<em>Mother&#8217;s Journal</em>,
May 1846, 142; see also <em>Mother&#8217;s
Monthly Journal</em>,April 1839, 56</span>
</a></sup>

There are no changes in the HTML for the footnote references. The corresponding HTML markup for a footnote reference mark remains the same as that in the previous example:

<sup><a href="#fn1ref" class="note">1</a></sup>
<a name="fn1text" id="fn1text"></a>

Advantages: This strategy obviates the need for scrolling or jumping back and forth between the endnote reference and the endnote text. The endnotes still appear at the bottom of the page, however, and the notes can be printed along with the text. Whether this approach is readily available to a screen reader remains to be seen. Disadvantages: Despite its sophistication, the pop-up method can be tedious; much of the heavy lifting is in the HTML markup, and nesting the various elements demands extraordinary attention to detail. The technique is also limited to modern browsers. The most CSS compliant of the older browsers, IE 5.x (Mac), will not display the footnote text on rollover and utterly destroys the line leading. Similarly, the italics and other text embellishments disappear in versions of Opera 7.x (Mac). Centering the note in the paragraph also represents a compromise. Browsers will interpret the default position for an absolutely positioned note differently, depending on the agent’s choice of parent element. Firefox and Opera interpret use the span elements as the parent element; Safari uses the top of the containing paragraph. In practice, this means that the popup note will appear snugly near the reference mark in Firefox and Opera but at the top of the paragraph and, perhaps, out of sight in Safari. Similarly, the span, apparently, inherits the font-size from the reference mark, so the span font-size is increased in the example. The font size in IE 6 (Win), however, still remains almost uncomfortably small, while the font size in Safari grows almost too large.

example #4: sidenote 1

example #4: css sidenote 1—A popup variant, sidenote #1 moves the citations to the left side by means of a negative margin. Like the popup technique, the strategy uses absolute positioning to place the sidenote and relative positioning for the citation’s paragraphs so that the sidenote stays with its parent. Since the font size takes on the size of the span which, in turn, takes on the size of the reference mark, the font-size is often best at a slightly larger size.

sup a span {

display:none;

}

 

sup a:hover span {

display: block;

background-color: #fff2bf;

font-size: 110%;

color: #333;

line-height: 130%;

position: absolute;

margin: auto;

padding: 10px;

left: -27%;

top: 40%;

width: 25%;

z-index: 200;

}

 

.relativeparagraph {

position: relative;

}

There are no changes in the HTML markup from the PopUp markup; Sidenote #1 simply changes the presentation of PopUp.

Advantages: Again, this strategy avoids hopping up and down the page. The references are available immediately adjacent to their paragraphs when the reader wishes to consult them. Otherwise, they are out of sight. Some developers have approached sidenotes in imitation of Edward Tufte whose sidenotes appear in the right margins of in his books. Absolute positioning is absolute, and placing sidenotes in a static location invites trouble; they will grow as a visitor bumps up the text-size and overwrite one another. The popup sidenote sidesteps this limitation. Disadvantages: Shorter line lengths spell longer paragraphs online. Although an absolutely positioned sidenote with stay with its parent, a long paragraph may push it outside the boundaries of the view port. This technique is also confined to modern browsers, excluding IE 5.x (Mac) but including IE 5.x (Win) after a fashion.

example #5: sidenote 2

example #5: css sidenote 2—This example is yet another variation on the sidenote, although it might be better be described as cut-in. In this technique, the citation is floated to the right side of the paragraph, its containing box, rather than entirely outside the paragraph. On rollover, the note appears, pushing aside some paragraph text.

Removing the class style .relativeparagraph from the paragraph in #maincontent is advisable, albeit not entirely necessary.

sup a span {

display:none;

}

 

sup a:hover span {

display: block;

background-color: #FFf2bf;

width:30%;

float: right;

font-size: 110%;

color: #333;

line-height: 130%;

padding: 10px;

margin: .2em 0 0 .5em;

}

Advantages: Like sidenote #1, the note is “on call” and is not subject to one note’s overwriting another, a condition inherent to static sidenotes. Disadvantages: Opera 8.5 will fail to close up the space on notes that occur at the end of paragraph and before a heading. Moving over another note in the same paragraph will close the gap, but the gap can be disconcerting. With the exception of IE 5.x (Mac), the technique works wells in modern browsers as well as the IE 5.x (Win) family; it is also more dependable than techniques using absolute positioning.

printing

The pages in the site use the Thierry Image Replacement (TIP) to maintain both the graphic heading and the h1. In addition, the pages all include a high-resolution image, “Boss Tweed,” that appears in the print version but not on screen. Consequently, a much crisper version of Tweed appears on the printed page. While the “Scholarship on the Web” print stylesheets mimic the form of countless online stylesheets, there are a few considerations that are important to scholarly printing.

Browser default browser print margins vary. Firefox’s default is generous; Opera’s and Safari’s are less so. All this spells caution in applying percentage or absolute margins via a stylesheet. Too large a margin will push the text in Firefox too far toward the center of the page; no margin will create very dense pages in the other browsers. Browsers also deal with font-size differently. Safari’s will be larger; IE 5.x (Mac)’s will be much smaller, and Firefox and Opera somewhere in between. Titles or sections headings may, as a result, wrap in odd ways. (Opera turns on “Print Background” by default, so Opera fans will have to use Print Options to disable background printing or invest in ink supplies.)

By and large, print stylesheets produce consistent results across browsers on the Mac platform, including IE 5.x (Mac). Printing scholarship that includes superscripted references on IE 5.x (Win) and IE 6 is, however, unpredictable and, generally, unattractive. The major problem is IE’s idiosyncratic handling of superscripts. Invariably, IE (Win) pushes a superscript reference’s line down or otherwise muddles the leading. The best results derive from Opera 8.5 (Win) and, to a lesser degree, from Firefox 1.5. (Firefox produces a large white space between the text and the reference mark for no discernible reason.) As an experiment, try printing this essay in both Opera 8.5 (Win) and IE 6 (Win) and note the differences.

Successful printing of superscripted reference marks requires a text line-height large enough to allow the superscripts to “breathe,” and the reference marks themselves need a vertical-alignment of super in the stylesheet or in the HTML markup and a concomitant line-height of 0. Attending to all of these details will produce relatively consistent print versions across modern browsers, except for the IE (Win) family.

conclusion

It should be clear that there are a good many ways to achieve proper, well-formed, typographical correct annotation without resorting to bracketed numbers. Some, to be sure, are more difficult than others. Of the available options, the most well-rounded and versatile is Example #2, the combination of CSS and anchors to achieve superscripting. Any intermediate web designer can manage the CSS; the trick is to style the endnote reference mark with both vertical alignment (super) and line height (0em). For those who have the expertise and who can count on visitors with modern browsers, both CSS Pop-Up and Sidenote #2 furnish elegant solutions.

Many designers argue that long text pieces or text that cannot be broken into small chunks not appear on the web at all but be in a form that can be downloaded and printed. In their opinion, Adobe PDF technology offers the best solution. In a PDF, text and notes appear in typographically correct form, and there are limited browser compatibility worries. Not so long ago, a scholar had to own Adobe Acrobat to produce a PDF. Such is no longer the case. MS Word, Apple’s Pages, and a host of other applications can export to PDF. A succinct abstract accompanied by a PDF is, perhaps, the best solution to putting a long scholarly piece online. In any case, a scholar or designer should always furnish a version that can be printed either via PDF or a print style sheet. Information revolution or not, scholars are still “people of the text”—the printed text.