HTML Slidy: Slide Shows in XHTML

You can now create accessible slide shows with ease
Works across browsers and is operated like PowerPoint
- Advance to next slide with mouse click
- Move forward/backward between slides with space bar, Pg Up and Pg Dn keys
- Home key for first slide, End key for last slide
- Function F11 to go full screen and back
- The "F" key toggles the display of the footer
- The "A" key toggles display of current vs all slides
  - Use the "A" key when you want to view or print all slides
  - Try it now to see how to include notes for handouts (this is explained in the notes following this slide)
- Font sizes automatically adapt to browser window size
  - use < and > keys for additional control (or - and + keys on number pad)
- Switching off JavaScript reveals all slides
Now move to next slide to see how it works

For handouts, its often useful to include extra notes using a div element with class="handout" following each slide, as in:

<div class="slide"> 
 ... your slide content ...
</div>

<div class="handout">
 ... stuff that only appears in the handouts ...
</div>

What you need to do

Each presentation is a single XHTML file
Each slide is enclosed in <div class="slide"> ... </div>
Use regular markup within each slide

The document head includes three links:

(required) to the slide show style sheet for presentations: http://www.w3.org/Talks/Tools/Slidy/show.css
(required) to the slide show script: http://www.w3.org/Talks/Tools/Slidy/slidy.js
(optional) to the slide show style sheet for printed handouts: http://www.w3.org/Talks/Tools/Slidy/print.css

<html xmlns="http://www.w3.org/1999/xhtml" 
 lang="en" xml:lang="en"> 
<head> 
  <title>Slide Shows in XHTML</title> 
  <meta name="copyright" 
   content="Copyright &#169; 2005 your copyright notice" /> 
  <link rel="stylesheet" type="text/css" media="screen, projection" 
   href="http://www.w3.org/Talks/Tools/Slidy/show.css" /> 
  <script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js" 
   type="text/javascript"></script> 
  <style type="text/css"> 
    <!-- your custom style rules --> 
  </style> 
  <link rel="stylesheet" type="text/css" media="print" 
  href="http://www.w3.org/Talks/Tools/Slidy/print.css" /> 
</head>

To get the W3C Style

The head element should include the following link to the style sheet:

<link rel="stylesheet" type="text/css" media="screen, projection"
 href="http://www.w3.org/Talks/Tools/Slidy/w3c-blue.css" />

The body element's content should start with the following markup:

<div class="background"> 
  <img id="head-icon" alt="graphic with four colored squares"
    src="http://www.w3.org/Talks/Tools/Slidy/icon-blue.png" align="left" /> 
  <object id="head-logo" title="W3C logo" type="image/svg+xml"
    data="http://www.w3.org/Talks/Tools/Slidy/w3c-logo.svg"><img
   alt="W3C logo" id="head-logo-fallback"
   src="http://www.w3.org/Talks/Tools/Slidy/w3c-logo-blue.gif" 
   align="right"/></object> 
</div>

This adds the logos on the top left and right corners of the slide.

You are of course welcome to create your own slide designs.

To use it off-line

The following files must be copied on your local machine in a folder/directory .../Slidy of your own choice:

slidy.js
show.css
print.css
If you use the W3C style, then you also need:

The simplest thing is to use cvs to check out the whole directory, but remember to periodically check for updates

You then have two choices:

Use relative URIs depending on your local setup to access the appropriate files. Use the same directory structure as on the W3C server, ie, ".../2005/Talks/...".
Run a Web server on your machine so that the directory above can be accessed via http://localhost/Talks/Tools/Slidy and use the URIs of the form "/Talks/Tools/Slidy/show.css", "/Talks/Tools/Slidy/slidy.js".

In both cases you can then publish your files on the W3C server unchanged.

Generate a Title Page

If you want a separate title page, the first slide should be as follows:

<div class="slide cover"> 
 <img src="http://www.w3.org/Talks/Tools/Slidy/keys.jpg" 
  alt="Cover page images (keys)" class="cover" /> 
 <br clear="all" />            
 <h1>HTML Slidy: Slide Shows in XHTML</h1> 
 <p><a href="http://www.w3.org/People/Raggett/">Dave Raggett,</a> 
 <a href="mailto:dsr@w3.org">dsr@w3.org</a></p> 
</div>

The style sheet looks for the class "cover" on div and img elements

Incremental display of slide contents

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

First bullet point
Second bullet point
Third bullet point

which is marked up as follows:

  <ul class="incremental"> 
    <li>First bullet point</li> 
    <li>Second bullet point</li> 
    <li>Third bullet point</li> 
  </ul> 
 
  <p class="incremental">which is marked up as follows:</p> 
 
  <pre class="incremental"> 
   ... 
  </pre>

You can use class="incremental" on the following elements

ul, ol, dl, div, p, pre, blockquote, li, dt, dd, span, img, object, address, table, tr, th, td and h2 to h6

Make your images scale with the browser window size

For adaptive layout, use percentage widths on images, together with CSS positioning:

CSS positioning is simpler and more reliable than using tables

  <div class="slide"> 
    <h1>Analysts - "Open standards programming will become 
    mainstream, focused around VoiceXML"</h1> 
    <!-- use CSS positioning and scaling for adaptive layout --> 
    <img src="trends.png" width="50%" style="float:left" 
     alt="projected growth of VoiceXML" /> 
 
    <blockquote style="float:right;width: 35%"> 
      VoiceXML will dominate the voice environment, due to its 
      flexibility and eventual multimodal capabilities 
    </blockquote><br clear="all" /> 
 
    <p style="text-align:center">Source Data Monitor, March 
    2004</p> 
  </div>

Incremental display of layered images

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

  <div class="incremental" 
   style="margin-left: 4em; 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" /> 
  </div>

You should also use transparent GIF images to avoid the IE/Win bug for alpha channel in PNG. A fix is expected in IE 7. A work around is available on skyzyx.com. My thanks to ACID2 for the graphics.

Include SVG Content

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

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" /> 
</object>

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:

IE6 makes a copy of the SVG file on the local disc when displaying it; but doesn't pass the original URI to the plugin
As a result relative references from within the SVG to external resources (scripts, CSS, images, other SVG) will break.
The work around is to use absolute references within your SVG.
This problem doesn't effect Mozilla/Firefox. No idea as to whether it will be fixed in IE7.

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.

Some browsers (e.g. Opera 8) only support SVG Tiny, which doesn't support external style sheets or style elements within SVG. The work around is to set the properties via style attributes on the corresponding elements. In principle, browsers should honor the version attribute and fall back to the alternative within the object element if they don't support the version used by a given SVG file.

Are there any tools for downgrading SVG to SVG Tiny?

Closing Remarks

Slides are auto-numbered on the slide show footer
You can link into the middle of a slide show:
- It works out which slide you want and hides the rest
- You can even link between slides in the same slide show
- Individual sides can be addressed with the syntax #[slide number],
  e.g. slide 3 of this presentation is: http://www.w3.org/Talks/Tools/Slidy#[3]
- Note that the browser's back/forward keys may not work as you might expect due to browser problems.

Use the meta element with name="copyright" for use in the slide show footer

<meta name="copyright" 
content="Copyright &#169; 2005 W3C (MIT, ERCIM, Keio)" />

You are encouraged to ensure your markup is valid. HTML Tidy can be used to find and correct common markup problems
The slide show script and style sheet can be used freely under W3C's software licensing and document use policies
Plan to add wysiwyg editing support via JavaScript and CSS wizardry
Please send comments to the author: Dave Raggett <dsr@w3.org>