Manual of the b6+ slide framework

Author: Bert Bos <bert@w3.org>

Created: 8 March 2019
Updated: $Date: 2019/03/13 14:26:01 $ by $Author: bbos $

This is a note, not a slide.

What is b6+? (1/2)

b6+.js is 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.

B6+ handles the keyboard, mouse and gesture navigation.

What is B6+? (2/2)

Below is the manual for the functionality provided by b6+.js. The script will work without any style sheet (unlike Shower), but a style sheet may provide additional features. See the The W3C slide style (b6+) for the functions provided by the style sheet used by this manual.

Document structure

The b6+.js script works with document 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 b6+.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+.js implements a subset of Shower's functionality:

Fixed aspect ratio (1/2)

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

Advantage is that the layout is independent of the projector: if the content of a slide fits during testing, it fits in the projection as well. Another advantage is that absolute positioning things on a slide is easier, because you know the exact size of the slide in the chosen units.

Disadvantage is that the chosen aspect ratio may not match the projector and there will 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 elements with a class of ‘slide’ does not trigger the scaling.

Progress bar

Any element with a 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 b6+.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.

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 b6+.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 b6+.css style does nothing with such elements.

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: