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:

• First bullet point
• Second bullet point
• Third bullet point

which is marked up as follows:

 
 ... 

Create outline lists with hidden content

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

• Just add class="outline" to the ul or ol element. Click on this list item for more details.
  • The Slidy script will then treat the list as an outline list.
  • Clicking on outline list items will expand/collapse block-level elements within that list item.
  • Click on the above to make this list item collapse again.
• Users will then see expand/collapse icons as appropriate and may click anywhere on the list item to change its state. This particular list item can't be expanded or collapsed.
• Add class="expand" to any li elements that you want to start in an expanded state.
  • By default Slidy hides all the block level elements within the outline list items unless you have specified class="expand".
  • Such pre-expanded items can be collapsed by clicking on them.
• Note expand/collapse icon highlighting requires browser support for :hover which isn't supported by IE6.
  • Microsoft says it will be supported by IE7 along with many fixes for other CSS woes in IE6.

1. Topic 1
   1. subtopic a
   2. subtopic b
2. Topic 2
   1. subtopic c
   2. subtopic d

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

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.

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.

How to center content vertically and horizontally

Within the div element for your slide:

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:

has been achieved by:

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:

• Most modern browsers generally support SVG SVG Tiny 1.1 or better natively without the need for a plugin
• If you need to use Internet Explorer you are advised to upgrade to IE9 which includes native support for SVG.
• Patches to Internet Explorer mean that the Adobe SVG Viewer version 3.03 no longer works with IE6. You are therefore recommended to uninstall version 3.03 and instead install Adobe SVG Viewer 6.0 preview if this is available to to you.
• 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.
• 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

Additional 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)
    * Previous versions of Slidy used square brackets, which will also work.
  • Note that the browser's back/forward buttons may not work as you might expect due to browser problems.
• Adding "title" to the list of classes for div elements that serve as title pages will render the corresponding entry in the table of contents in bold italic text (press "C" now for an example)
• If your slides have more content than normal, use a meta element to request a smaller font
  • the following requests fonts to be one step smaller than the Slidy default for the current window width, and positive integers will make the fonts correspondingly larger
  • Slidy uses JavaScript to dynamically set the font size on the body element, but it is okay to specify relative font changes on other elements within your own style sheet, e.g.
    div.slide.large { font-size: 200% }
• 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
• At XTech2006I gave this presentationon Slidy (Paper).

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

• The tool bar is localized according to the language of the presentation
• This is taken from the xml:lang or lang attributes on the html element
• The help file is selected based upon your browser's language preferences
• As of 29th July 2010, the languages supported are: English, Spanish, Catalonian, Czech, Dutch, German, Polish, French, Hungarian, Italian, Greek, Japanese, Chinese, Russian and Swedish
• If you would like to contribute localizations for other languages, please get in touch with Dave Raggett dsr@w3.org
• The following illustrates what was used for Spanish

// 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 addclass="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:

• Collecting a gallery of good looking slide themes
  • Opportunities for graphics designers!
• Bob Ferris has worked on a number of UI extensions which could be incorporated into the W3C slidy script.
• Getting SVG Tiny to work on IE without need for SVG plugin
  • Using scripts to dynamically convert SVG Tiny to VML
  • Note that IE9 introduces native SVG support, so it may no longer be worth working on SVG to VML for rendering of SVG
• Pre-alpha version of wysiwyg slide editor (see screenshot)
  • Using contentEditable when available, otherwise falling back to textarea and plain text conventions
  • Using XMLHttpRequest to dynamically reflect changes to server
• Mechanism for remotely driving Slidy as part of distributed meetings
  • Using XMLHttpRequest to listen for navigation commands
  • Using VoIP for accompanying audio and teleconferencing
  • Synchronizing recorded spoken presentation with currently viewed slide
• Filters from PowerPoint and Open Office
  • and export to PDF via PrinceXML

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

• My thanks to everyone who sent in bug reports and feature requests
• Opera Software for implementing CSS @media projection and promoting the idea of using the Web for presentations withOpera Show
• Tantek Çelik for his pioneering work on applying JavaScript for slide presentations on other browsers
• Eric Meyer for taking this further with the excellent S5
• W3C's slidemaker tool, which uses a perl script to split an html file up into one file per slide with navigation buttons
• Early versions of HTML Tidy which supported a means to create presentations via splitting html files on h2 elements
• Many sites with advice on JavaScript work arounds for browser variations
• Microsoft for pioneering contentEditable and XMLHTTP which both provide tremendous opportunities for Web applications
• Microsoft Office which provided the impetus for creating Slidy as a Web-based alternative to the ubiquitous use of PowerPoint

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:

• Emmanuelle Gutiérrez y Restrepo, Spanish
• Joan V. Baz, Catalan
• Jakub Vrána, Czech
• Ruud Steltenpool, Dutch
• Beat Vontobel, German
• Krzysztof Kotowicz, Polish
• Tamas Horvath, Hungarian
• Creso Moraes, Brazilian Portuguese
• Giuseppe Scollo, Italian
• Konstantinos Koukopoulos, Greek
• Yoshikazu Sawa (澤 義和), Japanese
• Shelley Shyan, Chinese
• Andrew Pantyukhin, Russian
• Saasha Metsärantala, Swedish

The following people have contributed bug reports:

• Gerald Senarclens de Grancy
• Jared Duke
• Rick Byers
• Steve Robertson
• Ivan Herman
• Steve Bratt
• Peter Patel-Schneider
• Matthew Coller
• Rune Heggtveit
• Gopal Venkatesan
• Cay Horstmann
• Schuyler Duveen
• Matteo Nannini
• Ralph Swick
• Jakub Vrána
• Philip Bolt
• Jon Frost
• Jonathan Chetwynd
• Nicolas Frisby

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