[go: up one dir, main page]

Re: pause-before property for presentations

Dave Raggett wrote:
 >
 > I am currently using Linux and would very much like to be able to
 > use XHTML and CSS for presentations. The @media projection {...}
 > feature provides the basic mechanism for dividing an XHTML document
 > into slides when used with the page-break-before property. What's
 > missing is a means to hide sections until the presenter hits the
 > space bar or clicks the mouse etc.

This is an interesting idea.

Would your 'pause-before' property take an integer as a value, letting
all elements with a particular value switch from display:none to their
display value (or from visibility:hidden to their display value?) when
the space bar (or equivalent mechanism) is hit?

Maybe the property could also take a time value, thus allowing content
to be rendered at specific times after loading.

Unfortunately, a common effect wanted by authors of slides is an
animation. A simple property couldn't really provide for the wealth of
animation effects used by authors.

Might a better name for the property be 't-index' or 'pause-until'?


The following is a more comprehensive proposal based on the comments
above:

1. The 'wait-until' property

Elements can be in two states, 'waiting' and 'waited'.

            Name: wait-until
           Value: <integer> | <time>
         Initial: 0
      Applies to: all elements
       Inherited: no
     Percentages: N/A
           Media: all
  Computed value: specified value, except zero time computes to the
                  integer zero.

This property can be used to trigger changes after a specified amount
of time or after a number of user requests.

If the value is a <time> then the UA will delay that long before
switching the element's state from 'waited' to 'waiting'. A value of
zero time computes to a zero integer.

An <integer> value indicates to the UA that the element should wait
for that many user requests before switching the element from 'waited'
to 'waiting'. A user request would typically consist of uncaptured
mouse clicks or unhandled presses of the space bar, but the exact
interface used is user agent defined. A value of zero means that the
element starts in the 'waited' state.


2. The ':waiting' and ':waited' pseudo-classes

An element that has a zero 'wait-until' value starts in the 'waited'
state, all other elements start in the 'waiting' state. When the
'wait-until' time is reached, or after the user has sent the required
number of requests to the UA, the element switches to the 'waited'
state.

The :waited pseudo-class matches elements in the 'waited' state, and
the :waiting psueod-class matches elements in the 'waiting' state.


3. The 'CSSWaited' event

This event is dispatched to elements after their 'wait-until' time has
elapsed, or the user has notified the UA the requisite number of
times. The event fires before the element's state changes (and thus
before the pseudo-classes have changed).

    * Bubbles: Yes
    * Cancelable: No
    * Context Info: The time elapsed and the index, as appropriate

SMIL can be used with this event to declaratively key animations from
user requests, based on the 'wait-until' property.


4. Examples

These three together will cause a document to have three
user-triggered list items, which will fade in one at a time each time
the user hits the space bar (or whatever mechansim the UA uses).

Stylesheet:

    li:child(1) { wait-until: 1; }
    li:child(2) { wait-until: 2; }
    li:child(3) { wait-until: 3; }
    li:waiting { display: none; }
    li:waited { display: list-item; }


Markup:

    <ol>
     <li> The Separation of Style and Structure </li>
     <li> Declarative User Interaction </li>
     <li> Potential for Animation </li>
    </ol>


Script:

    document.documentElement.addEventListener('CSSWaited', handler, false);

    function handler(event) {
      // animateFloat is a (fictional) library routine which takes
      // four arguments:
      //  a CSSValue to animate
      //  the start value
      //  the end value
      //  the time over which to animate the property, in milliseconds
      // it returns straight away and performs the animation in the
      // background.
      animateFloat(document.getOverrideStyle(event.target,
                                  null).getPropertyCSSValue('opacity'),
                   0, 1, 1000);
    }

-- 
Ian Hickson                                      )\._.,--....,'``.    fL
"meow"                                          /,   _.. \   _\  ;`._ ,.
http://index.hixie.ch/                         `._.-(,_..'--(,_..'`-.;.'

Received on Wednesday, 10 July 2002 20:28:28 UTC