[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
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