Macro-Typography of Glosses

Summary: Place the gloss on a tooltip so that readers can see it close to the text it explains. Integrate glosses into the main flow of the text and employ CSS styles to control the appearance of glossed words.

The Gloss

When you use obscure terms that may require explanation, or abbreviations that some readers may not be familiar with, define them in some sort of glossary on the site.

The simplest way to achieve this is to compile a site-wide glossary, place it on a page of its own, and hyper-link all the difficult terms to it there. An alternative approach that may suit some sites is to put glosses in tool-tips, which usually show up as little yellow boxes at the end of the cursor. In the 1990s, Edwin Duncan created an Internet version of sections of the Canterbury Tales by Chaucer with pop-up glosses that used scripts. You can do the same thing much more easily with HTML and CSS.

The trick is to add an attribute "title" and assign it a gloss like this: <SPAN title="An artificial language devised in 1887">Esperanto</SPAN>

The advantage to this approach is not only that readers can see instant definitions without having to load a new page, but also that document management is much simplified: the glosses can be inserted directly in the original document. A notable disadvantage is that visual browsers only display the tool-tip for five seconds or so, so definitions of necessity have to be brief. Other media are likely to ignore the tool-tip definition altogether: printed versions certainly will not display it.

The copy should be marked up like this: <SPAN class="glossedword" title="this is the full gloss">obscure term</SPAN>

All that remains is to choose an appearance for the words that require explanation. One option is to give them a dashed underline, indicating a link that is not really a link. It is also possible to change the colour of the lettering. But it creates a cleaner page if the type itself remains the same, and instead a highlight is put on the background.

The appearance of the cursor when it hovers over these words should also be changed. It is usual to select a "help" cursor, which displays as a pointer-arrow with a question mark near it.
<STYLE> .glossedword { background-color: #eee; cursor: help;} </STYLE>

Have a look at the example, a few lines from Chaucer's Prologue to The Canterbury Tales.