Re: [Lynx-dev] lynx and interactive parts of css

[Chuck Houpt]

I think an important point when designing gracefully degrading (and 
lynx compatible) web pages is to design from the bottom up. Start 
with plain text, then add HTML markup, then CSS and/or JavaScript.

For your design, the critical question is whether you are creating 
in-line notes or footnotes.

Below is how you might approach a design for either in-line or 
footnotes (some of which has already been described by hsv at 
tbbs.net).

In-line Notes:

For example, start with plain text with a parenthetical note:

|| Lynx (note 1: a text web browser) is hosted by the ISC.

Next, add semantic markup to identify the note, and its sub-parts:

|| Lynx
|| <span class="note">
||     (note
||     <span class="note-index">
||         1
||     </span>:
||     <span class="note-content">
||         a text web browser
||     </span>
||     )
|| </span>

This markup doesn't change the plain text, it just adds meta-information.

Now use CSS magic to display the note as desired. For example, by 
default hide everything except the note-index. On hover, show the 
note-content. The print style sheet would display the full note - 
just like Lynx. Note, I'm not a CSS wizard, so I'm sure there are 
lots of details I'm missing.

Foot Notes:

Start with the plain text and the note:

|| Lynx^1 is hosted by the ISC.
|| ...
|| 1: a text web browser.

Add markup to link the item and its footnote. Since this is HTML, you 
can link the two with anchors (and remove the index mark).

|| <a href="#footnote-1">Lynx</a> is hosted by the ISC.
|| ...
|| <p class="footnote"><a name="footnote-1">1</a>: a text web browser</p>

One way to get pop-up descriptions of the foot note (in most 
browsers), is to add it as a title for the anchor:

|| <a href="#footnote-1" title="a text web browser">Lynx</a> is hosted ...

Adding the title also opens the possibility of using the CSS 
"content" property to display the title attribute in various ways. 
You can find a good description of this technique in A-List-Apart's 
CSS printing article, in the "printing links" section:

http://alistapart.com/articles/goingtoprint

If CSS isn't powerful enough to design the appearance you want, you 
can probably use JavaScript to close the gap. The important thing is 
to avoid changing the original plain text.

Hope this helps - Chuck