W3C home > Mailing lists > Public > www-annotation@w3.org > July to December 2002

CSS2 to show annotations

From: Joseph Reagle <reagle@w3.org>
Date: Tue, 26 Nov 2002 09:57:51 -0500
To: www-annotation@w3.org
Message-Id: <200211260957.51250.reagle@w3.org>

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 GMT

This archive was generated by hypermail 2.2.0 + w3c-0.30 : Friday, 25 March 2005 11:19:18 GMT