sharpener pencil
slanted W3C logo

Slidy - a web-based alternative to PowerPoint

Dave Raggett <>

wispy clouds in a blue sky

XTech, Amsterdam
19th May 2006

A little history . . .

Web Presentations

The promise . . .


HTML Slidy

HTML Slidy Features

Incremental display of slide contents

For incremental display, use class="incremental", for instance:

which is marked up as follows:

<ul class="incremental"> 
  <li>First bullet point</li> 
  <li>Second bullet point</li> 
  <li>Third bullet point</li> 

You can also set class="incremental" or "non-incremental" on individual elements (except for <br />)

Use Pg Up and Pg Dn keys to skip over incremental content for faster navigation between slides

Incremental display of layered images

These can be marked up using CSS relative positioning, e.g.

<div class="incremental" 
 style="margin-left: 10em; position: relative"> 
  <img src="face1.gif" alt="face" 
   style="position: static; vertical-align: bottom"/> 
  <img src="face2.gif" alt="eyes" 
    style="position: absolute; left: 0; top: 0" /> 
  <img src="face3.gif" alt="nose" 
    style="position: absolute; left: 0; top: 0" /> 
  <img src="face4.gif" alt="mouth" 
    style="position: absolute; left: 0; top: 0" /> 
face eyes nose mouth

Create outline lists with hidden content

You can make your bullet points or numbered list items into outlines that you can expand or collapse

Slide Backgrounds

Slide Backgrounds

The background for this presentation is defined as:

<div class="background">
  <div class="margin">
    <div class="header">
    <!-- sized and colored via CSS -->
    <img class="sharpener" src="sharpener.gif" alt="sharpener" />
    <img class="pencil" src="pencil3.gif" alt="pencil" />

with the following CSS rules

div.margin {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("binding.gif") transparent top left repeat-y;
div.background img.pencil {
  position: absolute;
  bottom: 0.5em;
  right: 0;
  z-index: 21;
div.background img.sharpener {
  position: absolute;
  bottom: 0.4em;
  left: 0.8em;
  z-index: 21;

Slide Backgrounds

Slidy also allows you to subclass background div's

<div class="background foo">
   ... background content ...


<div class="slide foo">
   ... slide content ...

This slide combines a specific background (W3C logo) with the presentation background (notebook).

Include SVG Content

Inclusion of SVG content can be done using the object element, for example:

Indian Office logo

has been achieved by:

<object data="example.svg" type="image/svg+xml" 
  width="50%" height="10%" title="Indian Office logo"> 
    <img src="example.png" width="50%" 
          alt="Indian Office logo" /> 

This ensures that the enclosed png is displayed when the browser has no plugin installed or can't display SVG directly.

However, there are caveats, see the next slide!

Caveats with SVG+object

There is a serious bug in IE6+Adobe Plugin that can create problems. Namely:

On Windows, the Adobe SVG plugin doesn't respect the CSS z-index property, and if used on backgrounds will always show through other content.

Most browsers only support SVG Tiny, which doesn't support external style sheets or style elements within SVG.

Are there any tools for downgrading SVG to SVG Tiny?

Miscellaneous Features


Slidy now includes support for localization

// for each language there is an associative array
var strings_es = {
  "table of contents":"tabla de contenidos",
  "restart presentation":"Reiniciar presentación",

Slidy implementation notes

Slidy implementation notes

Further work

Browser-based editing

Plain Text Editors

Wysirwyg Editing

Implementation challenges

Wysiwyg Editing

Implementation Challenges

Template based editing

Screen shots for IE6 and Firefox 1.5

Adding an audio feed to Slidy

The following components are under consideration:

Adding an audio feed to Slidy

For replay the following occurs:

Integration as part of Web meetings

Your opportunity to help

Jon Udell, Infoworld, May 17, 2006, Web-based alternatives to PowerPoint

Online tools can deliver presentations that
are just as rich, but a little less evil