slanted W3C logo
Cover page images (keys)

HTML Slidy: Slide Shows in HTML and XHTML

Dave Raggett, <dsr@w3.org>




Hit the space bar or swipe left for next slide

Slide Shows in HTML and XHTML

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

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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, print" 
   href="http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css" /> 
  <script src="http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js" 
   charset="utf-8" type="text/javascript"></script> 
  <style type="text/css"> 
    <!-- your custom style rules --> 
  </style> 
</head>
<body>
   ... your slides marked up in XHTML ...
</body>
</html>

To get the W3C Blue Style

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

<link rel="stylesheet" type="text/css" media="screen, projection, print"
 href="http://www.w3.org/Talks/Tools/Slidy2/styles/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/Slidy2/graphics/icon-blue.png" /> 
  <object id="head-logo" title="W3C logo" type="image/svg+xml"
    data="http://www.w3.org/Talks/Tools/Slidy2/graphics/w3c-logo-white.svg"><img
   src="http://www.w3.org/Talks/Tools/Slidy2/graphics/w3c-logo-white.gif" 
   alt="W3C logo" id="head-logo-fallback" /></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. You can provide different styles and backgrounds for different slides (more details later).

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

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

Upgrading from previous versions of Slidy

To use it off-line

Timing Your Presentation

Generate a Title Page

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

<div class="slide cover"> 
 <img src="http://www.w3.org/Talks/Tools/Slidy2/graphics/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 w3c-blue.css style sheet looks for the classes "slide" and "cover" on div and img elements using the CSS selector div.slide.cover

This technique can be used to assign your slides to different classes with a different appearence for each such class.

Slidy also allows you to use different background markup for different slides, based upon shared class names, as in "foo" below. Backgrounds without additional class names are always shown except when the slide isn't transparent. You may need to tweak your custom style sheet.

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

...

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

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> 
</ul> 
 
<p class="incremental">which is marked up as follows:</p> 
 
<pre class="incremental"> 
 ... 
</pre> 

An element is incrementally revealed if its parent element has class="incremental" or if itself has that attribute. Text nodes are not elements and are revealed when their parent element is revealed. You can use class="incremental" on any element except for <br />. Use class="non-incremental" to override the effect of setting the parent element's class to incremental.

Note: you will see a red asterisk on the left of the toolbar when there is still something more to reveal.

Create outline lists with hidden content

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

<ol class='outline'>
  <!-- topic 1 starts collapsed -->
  <li>Topic 1
    <ol>
        <li>subtopic a</li>
        <li>subtopic b</li>
    </ol>
  </li>
  <!-- topic 2 starts expanded -->
  <li class="expand">Topic 2
    <ol>
        <li>subtopic c</li>
        <li>subtopic d</li>
    </ol>
  </li>
</ol>

Make your images scale with the browser window size

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

<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> 

To work around a CSS rendering bug in IE relating to margins, you can set display:inline on floated elements.

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="graphics/face1.gif" alt="face" 
   style="position: static; vertical-align: bottom"/> 
  <img src="graphics/face2.gif" alt="eyes" 
    style="position: absolute; left: 0; top: 0" /> 
  <img src="graphics/face3.gif" alt="nose" 
    style="position: absolute; left: 0; top: 0" /> 
  <img src="graphics/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.

face eyes nose mouth

How to center content vertically and horizontally

Within the div element for your slide:

<div class="vbox"></div>
<div class="hbox">
Place the content here
</div>

and style it with the following:

div.vbox {
  float: left;
  height: 40%; width: 50%;
  margin-top: -220px;
}
div.hbox {
  width:60%;  margin-top: 0;
  margin-left:auto; margin-right:auto;
  height: 60%;
  border:1px solid silver;
  background:#F0F0F0;
  overflow:auto;
  text-align:left;
  clear:both;
}

The above styling is included in w3c-blue.css, which is designed to be used with slidy.css, but you are encouraged to develop your own style sheet with your own look and feel.

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="graphics/example.svg" type="image/svg+xml" 
  width="50%" height="10%" title="Indian Office logo"> 
    <img src="graphics/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. Providing such a fall back is very important! Don't forget the alt text for people who can't see the image.

However, there are caveats, see the next slide!

Caveats with SVG+object

Adobe has recently withdrawn support for its SVG Viewer, so you are recommended to consider alternatives. If you still using the Adobe SVG viewer you should be aware of bugs when using the it with IE, Namely:

Additional Remarks

Localization and automatic translation

Slidy now includes support for localization

"es":this.strings_es, "ca":this.strings_ca, "cs":this.strings_cs, "nl":this.strings_nl, "de":this.strings_de, "pl":this.strings_pl, "fr":this.strings_fr, "hu":this.strings_hu, "it":this.strings_it, "el":this.strings_el, "jp":this.strings_ja, "zh":this.strings_zh, "ru":this.strings_ru, "sv":this.strings_sv
// for each language there is an associative array
  strings_es: {
    "slide":"pág.",
    "help?":"Ayuda",
    "contents?":"Índice",
    "table of contents":"tabla de contenidos",
    "Table of Contents":"Tabla de Contenidos",
    "restart presentation":"Reiniciar presentación",
    "restart?":"Inicio"
  },
  help_es:
    "Utilice el ratón, barra espaciadora, teclas Izda/Dcha, " +
    "o Re pág y Av pág. Use S y B para cambiar el tamaño de fuente.",

Note: Slidy now works with current slides translated into French. Use right mouse button to open frame without Google header. To disable automatic translation of the content of particular elements add class="notranslate", see breaking the language barrier.

Future Plans

Recent additions have included a table of contents, and a way to hide and reveal content in the spirit of outline lists. The script has been rewritten to make it easier to combine with other scripts, e.g. for UI controls, and support swipes for navigation on touch screen devices. Further work is anticipated on the following:

If you have comments, suggestions for improvements, or would like to volunteer your help with further work on Slidy, please contact Dave Raggett <dsr@w3.org>

Acknowledgements

Note that while Slidy and S5 were developed independently, both support the use of the class values "slide" and "handout" for div elements. Slidy doesn't support the "layout" class featured in S5 and Opera Show, but instead provides a more flexible alternative with the "background" class, which enables different backgrounds on different slides.

Acknowledgements

The following people have contributed localizations:

The following people have contributed bug reports:

Douglas Crockford for jsmin which was used to minify the script before compressing it with gzip.