At 09:08 AM 7/28/2005, Beau Hartshorne wrote:
I thought of a way to build sidenotes in well-supported and valid
CSS. I posted details on my log:
<http://hartshorne.ca/2005/07/27/footnotes_v_sidenotes/>
Basically, I'm using absolute positioning to take a <span> (or a
<small>) out of flow, and to move it outside of some containing block
where it can read as a sidenote. I'd appreciate feedback on the
technique, and to know if anyone has any trouble with it in any browser.
Beau,
This is an interesting topic. A body of text with footnotes* seems like a
perfect application for hypertext, but as you know arriving at a layout
that presents both in the viewport simultaneously is a challenge.
* The different expressions footnote, endnote, and sidenote merely refer to
their cosmetic layout; I see them as the same semantic animal.
Your technique of always displaying sidenotes beside their in-text
references works well on your sample page because your sidenotes are sparse
and brief. I'll echo Ben that your technique will fail whenever sidenotes
overlap due to their frequency in the text in relation to their
length. Your technique will work as long as the vertical distance between
any two in-text references is greater than the length of the first of the
two corresponding sidenotes. If there are two references on the same line
of the text, their difference is zero and your technique fails
instantly. To complicate things, the distance criteria vary not just with
the text itself but also with text-resizing which can affect word-wrap
unless all the container widths are sized in ems. A layout that might work
at "normal" text zoom can fail when enlarged as word-wrap increases the
number of lines of text that a sidenote requires.
You say, "I don't use numbering because the sidenotes appear next to
relevant parts of text." This works only for texts in which the
reference-sidenote relationship is sufficiently vague. If your text
contains specific references, say book authors or titles for which you want
to sidenote the full bibliographic entry, or words for which you want to
display definitions, or others in which it's crucial to map explicitly
between each text reference and its corresponding sidenote, then your
technique will frustrate the reader.
I'm preparing a book on the history of genetics for the web with endnotes
that are too frequent, lengthy, and specific for your technique to
work. The solution I'm implementing is something like this:
- References (words and phrases in the main text) are hyperlinks.
I've chosen to style them with a dotted border-bottom to be easily
identifiable but minimally intrusive for someone merely wishing to read on
through.
- Activating a link displays the corresponding sidenote.
I'm still debating what "activating" entails: hover or click. I
don't like using hover because among other things it means you have to
leave the mouse-pointer on the in-text reference while you read the
sidenote, awkward at best and impossible if the sidenote is long enough to
require scrolling. At present I'm using click as the interface.
The hover interface can be accomplished entirely with CSS,
cross-browser, if the sidenote markup can be nested inside the link, e.g.:
/* default = hide */
a span.sidenote
{
margin-left: -1000em;
}
/* active = display */
a:hover span.sidenote
{
margin-left: 400em;
}
Otherwise, if the sidenote can't be nested inside an anchor or if the user
interface is click, javascript is necessary to toggle sidenote visibility
and position and to attach the behavior.
- In the absence of scripting, when the user clicks on a link, they are
navigated to the corresponding entry in the index or bibliography, be that
at the bottom of the current page or on a separate page.
- Tagging the in-text references as anchors or spans provides the
opportunity to give each one a unique id and implement bi-directional
navigation from the text to the footnote and back again. This is helpful
if, say, you're reading through the footnotes and want to jump from a note
into the text from which it came. Or in an interface more like yours, if
you hover over a sidenote the corresponding in-text reference can highlight.
The method I'm exploring depends on scripting so I'm not completely happy
with it, but I haven't yet seen a better solution for a footnote-dense
text. If anyone can refer me to a better solution, I'd appreciate it!
Regards,
Paul
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
