Scholarship on the Web: Print Stylesheets

Historians are happiest with printed documents, so I've been honing my print stylesheet CSS in the process of revising the endnote/footnote mini-site. Part of the project has been to work out how print stylesheets behave. One of my major insights is that the <sup> elements are crucial for the correct printing of scholarly citation. Last summer, I developed a quick and dirty footnote system for blogs; Jeremy Boggs at ClioWeb improved and simplified the technique, rendering it much more elegant. And so matters rested until the print stylesheet work.

Any given browser will also interpret a print stylesheet in a slightly different fashion, and printer devices will give their own spin to (X)HTML elements. One of the elements that printers apparently understand is the <sup> element and act accordingly. Printers normally make the font slightly smaller and raise its baseline. This is not entirely what a reader needs. Reducing the font size is beneficial since it keeps the numbers from bumping into the line above and creating small, distracting spots in the text. Raising the baseline is not beneficial, however. It disturbs the line leading, undermining both readability and legibility. Happily, the baseline issues can be resolved by setting the line-height to 0 in the style sheet. But both the browser and printer will not reduce the size of the font unless the reference mark is enclosed in <sup> elements. So, to create a screen stylesheet for a footnote reference mark would look like this:

#maincontent sup a.note {
background-color: #FFE680;
font-weight: bold;
color: #333;
margin-right: .2em;
padding: .1em .2em .1em .2em;
font-size: smaller;
text-decoration: none;
border: none;
line-height: 0;
}

And a the print version of the same would resemble the following:

#maincontent sup a.note {
background-color: none;
font-weight: normal;
color: black;
margin-right: 0;
padding: 0;
text-decoration: none;
border: none;
line-height: 0;
}


Without the <sup> element, the printed reference marks will inherit the basic text size with unpleasant results; without the line height property set to 0, the line spacing will squeeze open and shut like an accordion.

Add the print stylesheet insight to the fact that I've managed to include a logo illustration in the print sheet using absolute positioning, and t's been a great day in the neighborhood.

Update: The same effect can be achieved by setting the vertical-height to super and then setting the line-height to zero (0). A designer retains more control over the design in this fashion but at the expense of semantic exactness. And forget the absolute positioning gambit. Opera can't handle it, so it is a certainty that IE 6 will break. Thierry Replacement Technique and a hi-res image seem to be the best route.

Comments

[W. Turkell and Nicolas Quiroga]

October / 2006

We are interested in learning more about history blogs and in finding ways to promote them. To aid in this effort, we are circulating a small questionnaire and will make the results available in Tapera (in Spanish) and in Digital History Hacks (in English). If you wish to participate, please return the questionnaire to tapera@tapera.info
Thank you very much.

William Turkel - Digital History Hacks - http://digitalhistoryhacks.blogspot.com/
Nicolás Quiroga – Tapera – http://tapera.info

Blog:
URL:
Authors:
First post (mm/dd/Y):

Questions:
1. Which history-related blogs do you visit most frequently? (1-5)
2. What factors do you think are involved in your choice of blogs to read? (For example: quality of information, writing, institution, author profile, rankings, entertainment value...)
3. What factors characterize your own blog? Which are most important?
4. Have you changed the objectives of your blog since you created it?