W3C slide tools

There are a bunch of tools in this directory and elsewhere for making slides. For a quick start, use the templates (‘,new’ tool).

Slidy
b5, b6 & b6+
Slidemaker/slideme
Shower
Reveal.js
Google slide template & PowerPoint

Slidy

From about 2005 to 2014, the recommendation was to use Dave Raggett's slideshow tool HTML Slidy, with its accompanying style sheet.

If you are a member of the W3C staff, you must add a W3C icon. Some reasons for doing it this way:

Only one file to edit and show - much less fuss than generating slides
either page up/down or left/right arrow for moving between slides backward/forward
Support for incrementally revealing slide content
< and > (or - and + ) keys allow easy font scaling
Good contrast between foreground and background, dark on light.

But…

Some browsers trap certain keystrokes, so that they are not available to the web page. This particularly applies to Safari and Konqueror, and to a lesser extent to Opera.
The back and forward buttons on the browser don't work reliably due to problems with how browsers expose history to web applications.
If the network is slow and you have a lot of graphics, there will be a wait until the first slide appears correctly formatted, be patient!

Some example talks of various vintages:

1. Edit the HEAD of your [x]HTML document

It should include the following:

<html xmlns="http://www.w3.org/1999/xhtml"
 lang="en" xml:lang="en">
<head>
  <title>your titleL</title>
  <link rel="stylesheet" href="show.css" type="text/css" media="
  screen, projection" />
  <link rel="stylesheet" href="print.css" type="text/css"
  media="print" />
  <script src="slidy.js" type="text/javascript">
  </script>
</head>

For W3C staff members, talks must include the W3C icon. The head of the document will therefore include altogether:

<html xmlns="http://www.w3.org/1999/xhtml"
 lang="en" xml:lang="en">
<head>
  <meta name="copyright"
  content="Copyright © 2005 W3C (MIT, ERCIM, Keio)" />
  <title>Slide Shows in XHTML</title>
  <link rel="stylesheet" href="show.css" type="text/css" media="
  screen, projection" />
  <link rel="stylesheet" href="print.css" type="text/css"
  media="print" />
  <link rel="stylesheet" href="w3c-blue.css" type="text/css" media="
  screen, projection" />
  <script src="slidy.js" type="text/javascript">
  </script>
</head>

There are more details on the HTML Slidy page.

If yours slides are on the www.w3.org server, make the paths relative such as ../../../2005/03 and so on, so they can be used in checked out CVS file space.

2. Put divisions around each slide

Each slide has to be wrapped in <div class="slide"> ... </div>

If you have an existing talk using the earlier slideme tools, then you use the ,slideme comma tool to convert it automatically. Just append ",slideme" after "all.htm" for your slideme base file. Alternatively, you can do a global change of all <h1> to </div><div class="slide"><h1> and then fix up the first and last slides by deleting the extra </div> at the top and putting in the missing one at the bottom.

Editing the slides with Amaya

This can be done. You just have to be careful to preserve the divs. You can move slides around, by pressing ESC until you have a whole slide selected, cutting it, and then pasting it in between two slides (i.e. not in a div). Note that if you accidentally put text in which is not in a slide division, it will appear in all slides!

The b5, b6 and b6+ scripts and styles

Cover slide and a slide with an image from the ‘The W3C slide style 2025 (b6+)’

The b6+ script can be used both on slide sets where each slide is enclosed in an element with class=slide (the format required by Slidy and Shower) and slide sets where each slide simply starts at an H1 element (the format of slidemaker & slideme).

To use the b6+ script, include something like the following:

<link href="../Tools/style-20252/slides.css"
  rel=stylesheet>

<script src="../Tools/b6plus/b6plus.js"></script>

This uses the generic W3C style of 2025, which is recommended by the Comm team since October 2025. You can use the same style also with Shower.

To start a presentation, press “A” (Only works if Javascript is turned on.)

The b6+ script is an enhanced version of the b6 script, which is in turn an improved version of b5. B5 works on older browsers (before 2012). b6 uses some newer CSS features. B6+ is like b6, but adds compatibility (within limits) with style sheets written for the Shower framework. It also adds the possibility to make slides with a fixed aspect ratio (i.e., independent of the projector).

Detailed documentation:

‘The W3C slide style 2025 (b6+)’ is a template and documentation on using the generic W3C style together with b6+
The b6+ documentation for more info on the b6+ script itself
Guide for writing new style sheets for b6+

Some examples with older styles:

Generic W3C template with humaaans (circa 2021).
Generic W3C template without humaans (circa 2019).
Style for W3C's MMI and Mobile activities (2012)

And also:

‘CEO Overview’ [member only] (Jeff, 2018, design by Tanya Mandal)
‘A handful of typographic challenges’ (Bert, 2014, white on black)
‘Complex layouts’ (Bert, 2012, different colors)

Slidemaker, slideme and the old W3C style

[screendump of W3C style

The pre-2005 W3C style for slides consists of three style sheets:

w3ctalk-all.css – for screen mode.
w3ctalk-print.css – for print mode.
w3ctalk-proj.css – for projection mode (a.k.a. “OperaShow”).

There must be no DIV around the slides and each H1 starts a new slide. See “How to make slides with the W3C style” for documentation.

The last of these style sheets imports slide-1024.css, which is also the style used by slidemaker & slideme. Slidemaker and slideme are (Perl) scripts to split a slide file into multiple files, one slide per file, which is useful if you need to use a browser that doesn't support projection mode and you can't use the B5 or Slidy Javascript files either.

For more info, see the documentation on slidemaker and the documentation on slideme. (Slideme is a version of slidemaker that is only available to the W3C Team.)

Shower 2 (2019), Shower 3.0 (2020) and Shower 3.2 (2021)

Cover slide and a slide with an image from the ‘The W3C slide style 2025 (Shower 3.2)’

Shower is an HTML5 presentation engine made by Vadim Makeev (Opera Software). It comes with two built-in themes and was used for Jeff's presentations at the AC Meeting 2014 to a good response and later at TPAC 2018 with a style based on the TPAC 2018 pages.

We have a generic template for W3C presentations that uses Shower version 3.2. As of October 2025, this is the Comm team's recommended style. It includes some predefined classes for common types of slides, slide transitions, a user manual and a zip file for offline use.

You can also use the b6+ script (which has some extra features) with the same style sheet and the same HTML file.

Note: in Shower version 2, incremental display doesn't work when presenting slides from local files. Use a newer version of Shower or b6+.

Some older slide styles using Shower:

Generic W3C template with humaaans (circa 2021).
Generic W3C template without humaaans (circa 2019).

In case you need older versions, here is the generic style without humaaans using Shower 3.0 and Shower 2.

Shower 2014

Screenshot of Shower presentation engine with W3C theme

There is also an older style, based on the built-in ribbon style of Shower:

Steps for use

Download and unzip the main Shower template
(Optional) Use the W3C theme:
1. Download and unzip the W3C theme
2. Put the "w3c" folder in the "shower" -> "themes" folder (next to "bright" and "ribbon")
3. In the top of the Shower's index.html file, change "shower/themes/ribbon/styles/screen.css" to "shower/themes/w3c/styles/screen.css"
Edit the main index.html file with your content — each slide is a separate <section class="slide">
To present, just open index.html in a browser and go to fullscreen by pressing F11 or from the browser menu.

In fact, a copy of the shower code, including the W3C style, has also been placed into /2014/shower/, and the index-w3c.html has also been added to show the HTML code and as a starting point. That means another way of using shower is to use /2014/shower/shower/themes/w3c/styles/screen.css as a style file, and the javascript reference at the end has to be changed to <script src="/2014/shower/shower/shower.min.js"> (at the very end of the file). Using this approach means that one can save the trouble of copying the whole shower library all the time, although be aware that it may not be the latest version.

Reveal.js

Reveal.js is another HTML5 presentation engine, made by Hakim El Hattab. It comes with a selection of themes and has fancy slide transitions. It also allows you to move slides vertically rather than just horizontally. There are two W3C themes — light and dark.

Steps for use

Download and unzip the main reveal.js template
(Optional) Use the W3C themes:
1. Download and unzip the W3C themes
2. Put the w3c.css and w3c_dark.css in the "css" -> "theme" folder (next to default.css, etc.)
3. In the top of the main index.html file, change "css/theme/default.css" to "css/theme/w3c.css" or "css/theme/w3c.css", depending on which theme you prefer.
Edit the main index.html file with your content — each slide is a separate <section>
To present, just open index.html in a browser and go to fullscreen by pressing F11 or from the browser menu.

There is also a copy of reveal.js at /2013/06/revealjs/ which can be used to avoid re-uploading the core files, but be aware that it may not be the latest version.

Google slide template & PowerPoint

The 2021 W3C logo is available as a Google slide template, which can be "download"ed as .pptx, .pdf and other formats.

Last change $Id: Overview.html,v 1.64 2025/10/18 12:40:54 bbos Exp $

Sign me