CSS2 to show annotations

I've implemented the CSS part of what I've been thinking about with respect 
to creating  HTML documents whereby non-anntae documents can still view 
annotations. This is demonstrated on:
  http://www.w3.org/2002/11/kft-annotated.html
(Works well with Mozilla 1.0+, not sure about  other browsers)

First, some script would have to including the annotations in-line as such:
  <p>This <a id="foo0" class="annot">document<span>a silly 
  document at that</span></a> briefly introduces the topic
  of trusted semantic web

Then the following CSS hides the annotation except when you move your mouse 
over the annotated text, and it pops up (without javascript).

    a.annot:before { content: "["; text-decoration: underline; }
    a.annot:after { content: "]"; text-decoration: underline; }
    a.annot             { text-decoration: none; background: #ff9;}
    a.annot>span        { display: none; text-decoration: none; }
    a.annot:hover>span  { display: block; font-size: 80%;
                          padding: 3px; border-width: 1px; 
                          border-style: solid;
                          background: #ff9;
                          text-decoration: none;
                          position: absolute;
                          right: 2%; width: 30% }

I think this only works on Mozilla so far, depending on one's base-line of 
CSS support, one can do more changes via the XSLT...

Received on Tuesday, 26 November 2002 09:57:52 UTC