[Top][All Lists]

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

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

From: Chuck Houpt
Subject: Re: [Lynx-dev] lynx and interactive parts of css
Date: Fri, 27 Oct 2006 08:56:01 -0400

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

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:

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

reply via email to

[Prev in Thread] Current Thread [Next in Thread]