Leaving presentation mode.

Manual of the b6+ slide framework

Author: Bert Bos <bert@w3.org>

Created: 8 March 2019
Updated: $Date: 2021/09/03 10:06:02 $ by $Author: bbos $

One way to get started writing slides with the b6+ framework is to download the zip file ‘slides.zip’. It contains everything you need, in particular the ‘b6plus.js’ JavaScript file, two different style sheets, ‘simple’ and ‘style2’, this manual (which uses the simple style) and a sampler of style2. You can use the manual and the sampler as examples, or make a copy of one or the other and change the contents to your liking.

What is b6+? (1/2)

b6plus.js is a script (JavaScript) to show slides in a browser that does not have a paged mode. It is the successor to b6 and backwards compatible with it, and also provides some compatibility with Shower. With some restrictions, style sheets written for Shower can be used with b6+.

Slides can be elements with class=slide, but can also just start with an <h1>, as in the old Slidemaker.

The script handles the keyboard, mouse and gesture navigation.

What is B6+? (2/2)

The first part below is the manual for the functionality provided by the script.

The script will work without any style sheet, but a style sheet may provide additional features.

The second part of the manual describes the features of the simple.css style sheet (which is used for this manual).

Document structure

B6+ works with documents in which slides are marked up in one of two ways:

  1. each slide starts with an <h1>, or
  2. each slide is enclosed in an element with class=slide

The b6plus.js script

The script offers the following functions:

Screen and projection styles

Different styles can be applied in slide mode and in index mode. The media attribute determines what each style sheet is for.

Compatibility with Shower

B6+ implements a subset of Shower's functionality:

And on the URL:

Fixed aspect ratio (1/2)

Slides can either have a fixed aspect ratio or adapt to the projector. If the <body> element has a fixed width & height (in em, px, or other unit), b6+ will linearly scale it to fit the projector.

Advantage: The layout is independent of the projector. If the content fits in the preview, it fits during projection as well. Also absolute positioning on a slide is easier, because you know the size of the slide in the chosen units.

Disadvantage: The aspect ratio may not match the projector and there may be some unused space either on the sides or above and below the slide.

Fixed aspect ratio (2/2)

E.g., if you set the <body> to 40em by 30em (a 4:3 aspect ratio), but the projector is widescreen (16:9), there will be black bands on the left and right.

Note that it is the size of the body that counts. Setting a width and height on individual slides does not trigger the scaling.

Progress bar

Any element with class=progress will get a style attribute ‘width’ with a value between 0 and 100% corresponding to the advancement of the slide show: When there are m slides and slide n is displayed, the value is n/m * 100%.

There may be any number of such elements.

That is all the script does. It is up to the style sheet to set other properties (height, location, color…) The simple.css style sheet makes the progress element into a thin red line along the top of the slide.

Current slide number

If there are elements with class=slidenum, their content will be set to the number of the slide that is currently displayed, as a decimal number:

Currently showing slide ▶(none)

There may be any number of such elements. All of them will have the same content.

It is up to the style sheet to style and position such elements. The simple.css style does nothing with them. (It uses CSS counters to number slides instead.)

Total number of slides

Any elements with class=numslides will have their content replaced by the total number of slides, as a decimal number.

E.g., this slide show has ▶??◀ slides.

There may any number of such elements.

It is up to the style sheet to style and postion such elements. The simple.css style does nothing with such elements.

Note: The slides are not counted until you enter slide mode.

Incremental display with class=incremental

If an element has class=incremental or class=overlay, its children will be displayed one at a time. The keys (space, arrow keys), clicks or gestures that normally advance to the next slide instead cause the next child to be displayed, until all of them are visible, after which the navigation continues to the next slide. Example:

Other features

The simple.css style sheet

The simple.css style sheet

simple.css contains style rules for slide mode, index mode and for printing.

Here are examples and a manual.


An example of a numbered list:

  1. Potatoes
  2. Onions and olives

An example of an unordered list:

Some elements

Words can be given a strong emphasis, which makes them appear in bold

The normal emphasis has a highlighter effect.

Code looks like this: if (a) return b;

This is an example of a note, in a smaller font

Elements updated in-place

Combining class=incremental with class=in-place yields elements that are displayed one by one, with each one replacing the previous. Example:

  1. First element
  2. The second replaces the first
    until it itself is replaced
  3. The third replaces the second.

(class=overlay is an alias for class=incremental.)

An image on the side

[Picture of a stylized tree with colorful, square leaves]

It seems the famous ‘lorem ipsum’ is based on a text by Cicero, but with the lines mixed up. On a Cicero by the text, it seems the ‘ipsum lorem’ is famous based with lines but mixed up.

An image on the side

[Picture of a stylized tree with colorful, square leaves]

And again, with class ‘slide side right’.

It seems the famous ‘lorem ipsum’ is based on a text by Cicero, but with the lines mixed up. On a Cicero by the text, it seems the ‘ipsum lorem’ is famous based with lines but mixed up.

In columns

Children of an element with a class of ‘columns’ are distributed over two columns

This is the second child, which goes into the right column

And this is the third one. Left column again.


place t l
place t
place t r
Here is something for the left side, with class place l
class place puts an element centered in a 3×3 grid
place r
place b l
place b
combine place with top (or t), right (or r), bottom (or b) and left (or l)

Numbered lines of code

Lines in a PRE can be numbered
  * Give the PRE a class of "numbered"
  * Works for up to 20 lines
                       (depending on font size)

Image overlay: cover

A bridge over the Rhone in Lyon

Careful, some images make the text hard to read!

Image overlay: fit

A bridge over the Rhone in Lyon

Careful, some images make the text hard to read!


Takahashi method



Don't use this too often!

Shout and grow!


Don't use this too often!

Slide transitions

The style sheet predefines several transitions: fade-in, slide-in, move-left, etc.

A transition can be set globally, applying to all slides; or locally, applying only to the transtion between this slide and the next.

Thank you!

Writing slides

Here are some instructions for writing slides with the simple.css style sheet.


Each slide is a div element* with a class of slide:

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

Inside the slides, use normal HTML elements (p, ul, em, etc.).

*) Note for advanced users: Although not shown in this template, it is in fact possible to use other elements than div. One common choice is section.

Slide numbers

If a slide should not show the slide number, add the class clear:

<div class="slide clear">
  ... slide content here...

Title slides (cover slides)

For cover slides (the title slide or separator slides between parts of a presentation), add a class cover. You can combine cover and clear. E.g.:

<div class="slide cover clear">
  <h1>My presentations<h1>
  <address>Peter W. Slidemaker</address>

Illustrations on the left or right

Slides with narrower text and an illustration on the left can be made by adding the class side to the slide. Inside the slide there should be exactly one element that also has a class of side (an image or some other element):

<div class="slide side">
  <img src="..." alt="..." class="side">
  ... slide content here...

The side element will occupy the left 1/3 of the slide and the rest of the content the right 2/3.

To put the image on the right instead, add class right (which may be abbreviated to r):

<div class="slide side r">
  <img src="..." alt="..." class="side">
  ... slide content here...

Progress bar

If you want a progress bar during the slide presentation, add an empty div with a class of progress. It can be put before the first slide or after the last, but there should be at most one such element in the file:

<div class="progress"></div>

The progress bar will show as a thin red line along the top of the slides. Its length increases from zero on the first slide to 100% on the last.

Incremental display

To progressively reveal elements on a slide, put a class of next on all elements that should not be visible right away. They will become visible one by one as you press the spacebar or an arrow key. E.g.:

  <li>This item is visible when the slide appears</li>
  <li class="next">This item is not immediately visible</li>
  <li class="next">This is the third item to appear</li>
<p class="next">This is the last element to appear</p>

Two columns

To put elements side by side in two columns, make an element (a div, ul or any other element) with class columns. The first child of that element will be put in the left column, the second child in the right column. If there are more children, the third will be in the left column again, the fourth in the right, etc.

<ul class="columns">
  <li>First goes on the left</li>
  <li>Second goes on the right</li>

Small text

Less important text can be shown in a smaller font by giving it a class of note:

<p class="note">Note that this is harder to read</p>

Automatic line numbering

Pre-formatted text (in a pre) can be given line numbers by adding the class numbered:

<pre class="numbered">

No more than 20 lines will be numbered. (In the normal font size, a slide fits 13 lines.)

3×3 Grid

It is possible to treat the slide as a 3×3 grid and put elements in the four corners, in the middle of each edge, or in the center of the slide. This is done by giving the elements a class of place. On its own, place puts the element in the center. By adding classes top, right, bottom and left the element can be placed in one of the eight other positions.

<div class="place">Put this in the center</div>
<div class="place bottom">Put this bottom center</div>
<div class="place top right">In the top right corner</div>

The direction classes can also be abbreviated to t, r, b and l.

Image overlays (background images)

To put an image behind the text of a slide, use an img with a class of cover:

<img class="cover" src="..." alt="...">

The image will be stretched to fill the whole of the text area. If the image doesn't fit exactly (wrong aspect ratio), the image will be cropped.

With a class of fit instead of cover, the image will be scaled but without cropping. Instead there may be white bands on the sides or above/below the image, if it doesn't fit exactly.

<img class="fit" src="..." alt="...">

This works both for normal slides and title slides (slides with a class of cover). The logo on the right is not obscured by the image.

Slide transitions

By default, each slide just replaces the previous one, but there are several predefined slide transitions. You can set a transition on the body element to apply it to all slides:

<body class="fade-in">

Or you can set it on individual slides, to apply only to the transition between that slide and the next. (I.e., it doesn't determine how the slide appears, but how it disappears.)

<div class="slide wipe-left">

You can set both a global transition and local ones. The global transition applies to slides that do not have an explicit transition set locally.

The new slide appears faint at first and gets more opaque until it completely obscures the previous slide.
The new slide moves in from the left, while the previous slide moves back to the left.
The new slides move in from the right while the old slide moves out to the left.
The old slide moves up and the new slide moves in from the bottom.
A 3D effect: the bottom of the old slide is lifted up and the slide is turned over to reveal the new slide on its back side.
Another 3D effect, but in this case the right side of the slide is lifted up and the slide is flipped over to the left, revealing the new slide on the back side.
A small circle appears in the middle of the old slide that reveals the new slide. The circle grows until it covers the whole slide.
The new slide moves in from the right, until it covers the old slide.
A zigzag pattern moves in from the right. To the left is the old slide, to the right the new one.
A zigzag pattern moves in from the left. To the left is the new slide, to the right the old one.
The new slide moves in from the top left and covers the old slide.


When you present while using a screen reader, you cannot use the screen reader's usual keystrokes to navigate, only the keystrokes defined by the b6+ script. However, the screen reader will speak each slide as soon as it appears. The script creates an element with attributes role=region and aria-live=assertive for that purpose.

When you leave leave presentation mode, the screen reader will say ‘stopped’. To make it say something else (e.g., because you want a different language than English), create an element with role=region and aria-live=assertive yourself and put the text to speak in it. E.g.:

<div role="region" aria-live="assertive">


To present the slides, load them into a browser that supports JavaScript and CSS and then click on the first slide.

Navigate though the slides by pressing the spacebar, the arrow keys or Page-up/Page-Down. The Home and End keys jump to the first, resp. last slide.

To exit the presentation, press the Esc key.

See the slide ‘Navigation’ for a list of key strokes.

Starting in slide mode

Add ‘?full’ at the end of the URL (but before any fragment ID) to open the slides in slide mode instead of index mode.

To open in slide mode at a specific slide, add ‘?full’ and the ID of the slide, e.g., Overview.html?full#place.

Embedding slides in other documents

You can embed a single slide in another document with the help of an <object> or <iframe> element. To avoid that a keypress or click on that slide accidentally changes the slide, you can disable navigation between slides and switching to index mode: add ‘?full&static’ at the end of the URL, followed by the ID of the desired slide. E.g.: <object data="Overview.html?full&static#place">…</object>

Adding ‘?static’ on its own to the URL is also possible: It shows all slides in index mode and disables switching to slide mode.

Created 4 March 2019 by Bert Bos. Last modified $Date: 2021/09/03 10:06:02 $ by $Author: bbos $.