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.

Writing slides

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

Slides

Each slide is a section element^* with a class of slide:

<section class="slide">
  ... slide content here...
</section>

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 section. One common choice is div.

Slides in alternative formats

Instead of enclosing every slide in an element with a class of slide, it is also possible to use the old convention from Slidemaker and just start each slide with an h1. Everything until the next h1 will make up one slide.

And another alternative is to set the CSS property ‘page-break-before: always’ on each element that starts a new slide.

Slide numbers

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

<section class="slide clear">
  ... slide content here...
</section>

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

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

Illustrations on the left or right

Slides with narrower text and an illustration on the left or right 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):

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

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

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

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.

B6+ also sets a custom style variable --progress with a value between 0 and 1 on the body. This may be useful if you write your own style rules for a progress indicator.

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 space bar or an arrow key. E.g.:

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

If all children of an element should be revealed individually (e.g., all items in a list), you can also put class incremental on their parent:

<ol class=incremental>
   <li>This appears first</li>
  <li>This appears next</li>
  <li>And then this</li>
</ol>

Two columns

To put elements side by side in two columns, make an element (a section, 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>
</ul>

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

White text (dark mode)

If the overlay image is dark, it may be better to use white text. That can be done by adding the class darkmode to the slide:

<section class="slide darkmode">

Other colors (titles, list bullets, links, etc.) are also lighter on such slides.

To make all slides white on black, set the class darkmode on the body element. In that case you can use the class lightmode on individual slides to give them black-on-white text.

Forcing black text (light mode)

The simple.css style supports dark mode: If the slides are displayed on a computer that is set to dark mode, the slides will use white on black text. (The same colors as when the class darkmode is set on a slide or on the body.)

To force black-on-white text even in dark mode, set the class lightmode on a slide or on the body.

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

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

fade-in

The new slide appears faint at first and gets more opaque until it completely obscures the previous slide.

slide-in

The new slide moves in from the left, while the previous slide moves back to the left.

slide-out

The current slide moves out to the left, revealing the new slide.

move-left

The new slides move in from the right while the old slide moves out to the left.

move-up

The old slide moves up and the new slide moves in from the bottom.

flip-up

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.

flip-left

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.

center-out

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.

wipe-left

The new slide moves in from the right, until it covers the old slide.

zigzag-left

A zigzag pattern moves in from the right. To the left is the old slide, to the right the new one.

zigzag-right

A zigzag pattern moves in from the left. To the left is the new slide, to the right the old one.

cut-in

The new slide moves in from the top left and covers the old slide.

Accessibility

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 slide 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.:

<section role="region" aria-live="assertive">
  Terminé.
</section>

Experimental: different behaviors for going backwards

When you leave a slide with incremental elements, the elements currently displayed are ‘frozen’. When you go back to that slide later, the slide looks the way you left it, but the frozen elements can no longer be removed (unless you reload the whole slide show). Elements that were not yet displayed can still be displayed (by going forward).

But it is under discussion whether that is the best behavior. It might be better if the slide is always set back to its initial state (all incremental elements hidden), or that already displayed elements are still there but can be removed one by one by going backwards.

Especially for elements updated in-place, being able to go back, in one way or another, to intermediate states might be needed.

As an experimental feature, there are currently four different behaviors available, selected with a class on the body element:

freeze

When you leave a slide, the incremental elements that are currently displayed become frozen. When going back to that slide, those elements are still displayed but can no longer be removed by pressing the left arrow. This is currently the default.

reset

Every time you enter a slide, all incremental elements are in their hidden state. E.g., if you leave a slide with all elements visible and then go back, all elements are hidden again.

symmetric

When you return to a slide, the slide is exactly as you left it. Incremental elements that were displayed when you left the slide are still displayed and can be hidden one by one by pressing the left arrow.

forwardonly

When you enter a slide, all incremental elements are in their hidden state (as with ‘reset’). In addition, pressing the left arrow when some incremental elements are displayed, resets the whole slide to its initial state (i.e., all elements hidden).

E.g.,

<body class="forwardonly">

Presenting

Mouse gestures and keystrokes

To present the slides, load them into a browser that supports JavaScript and CSS and then either click the play (▶) button, press the A key, double-click on a slide or touch the screen with three fingers (on certain devices).

Navigate though the slides by clicking the left mouse button, pressing the spacebar, the arrow keys or Page-up/Page-Down. The Home and End keys jump to the first, resp. last slide. F1 or F toggles full screen mode. The ? (question mark) key shows a list of available commands.

To exit the presentation, press the A key or the Esc key.

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

Dark mode

While in slide mode, you can press the D key to switch between black-on-white and white-on-black. (This temporarily adds or removes the darkmode class, see ‘White text (dark mode)’.) When the computer is already in dark mode, the key has no effect.

Using two screens or two windows

B6+ can show the slides in a second window. The first window can then be used to control the slide show and view notes and next slides. If you have two screens that can show different content (e.g., your computer's screen and a projector), you can thus present the slides on one screen, and see the current and next slides, and any notes, on the other.

Open the second window by pressing the 2 key or the ⧉ button in index mode.

Clocks to show remaining time

When using a second screen, it is possible to show clocks on that screen with the remaining time, the time used so far, and the real (wall clock) time. (The clocks are normally only shown on the second screen, but they can be included in slides or overlaid on slides, with suitable CSS rules.)

By default, the clocks will count down from 30 minutes and show a warning 5 minutes before the end. (In the simple.css style used for this document, the clock turns from green to orange.) You can set different times with the following classes:

duration=...

To set the duration to, e.g., 45 minutes, add duration=45 to the class attribute of the body. Example:

<body class="duration=45">

warn=...

To set the warning to, e.g., one minute, put this in the class of the body:

<body class="warn=1">

B6+ has two kinds of clocks built-in, but also provides primitive elements with which to build your own clock.

To get one of the built-in clocks, make an empty element with a class of either fullclock or clock. The former will display the real (wall clock) time, the number of minutes so far, the number of minutes left, a small ‘pie-chart’ showing the proportion of time used, and four buttons: subtract one minute, add one minute, pause the clock, and reset the clock. The simple clock will display the pie chart and the four buttons (somewhat smaller) and the remaining minutes.

When you make your own clock, you can make use of the following classes and attributes:

hours-real, minutes-real, seconds-real

B6+ will fill all elements with a class of hours-real with the current hour (wall-clock time) and keep them up to date. The hour will always be two digits and use a 24-hour clock: 00 to 23.

Similarly, all elements with a class of minutes-real or seconds-real will contain the current minutes or seconds, respectively, also always as two digits, 00 to 59. E.g.:

<b class=hours-real>00</b>:<b class=minutes-real>00</b>

hours-used, minutes-used, seconds-used

Elements with these classes will contain the time since the slides where loaded (or since the clock was reset, see timereset below). E.g.:

<b class=minutes-used>00</b>'<b class=seconds-used>00</b>"

hours-remaining, minutes-remaining, seconds-remaining

Ditto, but for the time still remaining. If the used time exceeds the duration, these times will be shown as 00.

timeinc, timedec

An element with a class of timeinc will act as a button that increments the duration, and thus the remaining time, by one minute. timedec decrements the duration by one minute. E.g.:

<button class=timeinc>+1 min</button>
<button class=timedec>−1 min</button>

timepause

An element with this class acts as a toggle to pause & resume the clocks. When the clocks are paused, the used time does not progress and the remaining time does not diminish. (The real time clocks continue, of course.) When the element is clicked again, the clocks resume. E.g.:

<button class=timepause>pause</button>

timereset

An element with this class acts as a button to restart the clocks, i.e., to set the used time to zero. Example:

<button class=timereset>reset</button>

In addition to setting the time in elements with the classes mentioned above, b6+ also updates the style property, the class and a data- attribute on the body. This is useful for style rules to change the styles of elements based on the progress of the slide show. In particular, b6+ sets the following:

--time-factor

This custom style property on the body will be set to a value between 0.0 and 1.0, representing what fraction of the duration has been used.

data-time-factor

This attribute on body will be set to the percentage of the duration already used. This will be a whole number with two digits between 00 and 99, or 100.

time-warning

When the remaining time is less than the warn time, b6+ will add this class to the classes on body.

Styling the play and help buttons

B6+ adds buttons at the start of the index screen: a play button (▶) to start slide mode, a second-screen button (⧉) to start the slide show in a separate window, buttons to move backwards (❮) and forwards (❯) through the slides if the slides are shown in a 2nd window, a button to toggle dark mode (◑) (only if the style sheet provides light and dark styles) and a help button (?) to show the list of available keystrokes and gestures.

The buttons have class attributes and their look can be changed with CSS rules. The markup of the buttons is as follows:

<div class="b6-ui">
 <button class="b6-playbutton">
  <span>▶︎</span> <span>play/<wbr>stop</span>
 </button>
 <button class="b6-secondwindowbutton">
  <span>⧉</span> <span>play in 2nd window</span>
 </button>
 <button class="b6-prevbutton">
  <span>❮</span> <span>back</span>
 </button>
 <button class="b6-nextbutton">
  <span>❯</span> <span>forward</span>
 </button>
 <button class="b6-darkmodebutton">
  <span>◑</span> <span>dark mode</span>
 </button>
 <button class="b6-helpbutton">
  <span>?</span> <span>help</span>
 </button>
</div>

(The precise text can differ based on the language of the slides.)

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 or the number of the slide, e.g., Overview.html?full#place or Overview.html?full#25.

Hiding the mouse pointer

When you don't want the mouse pointer to remain on the screen in slide mode, add the class hidemouse on the body element. If the mouse does not move for 5 seconds, the pointer is made invisible. It comes back as soon as the mouse is moved.

<body class="hidemouse">

You can also set a different timeout in seconds. E.g, to set a short timeout of 1.5 seconds:

<body class="hidemouse=1.5">

Ignore mouse clicks

Normally, a mouse click anywhere on a slide (other than on a hyperlink or form element) has the effect of advancing to the next slide or incremental element. If you don't want that, add the class noclick on the body element.

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 accidentally changes the slide, you can disable navigation and index mode: add ‘?full&static’ at the end of the URL, followed by ‘#’ and the ID or number of the desired slide. E.g.:

<object data="Overview.html?full&static#18">...</object>

or

<iframe src="Overview.html?full&static#18"></iframe>

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

Synchronized display / remote control

It is possible to synchronize the slide display to a remote server. In synchronized mode, local navigation is disabled and the remote server determines the slide progress.

The remote server must be capable of sending Server-Sent Events (SSE). The server is specified by adding ‘?sync=’ to the end of the URL, followed by the URL of the remote server. E.g.:

.../Overview.html?sync=https://example.org/sse

If the URL contains any ‘&’, they must be escaped as ‘%26’.

(Suitable servers include hasses, in which case the URL would look something like ‘?sync=https://example.org/sse?subscribe=mychannel’; and SSE-Server, in which case the URL would look something like ‘?sync=https://example.org/sse/mychannel’.)

B6+ expects either ‘message’ events or ‘page’ events from the server. Which means, technically, that the server must send either

data: instruction
		← this is an empty line

or

event: page
data: instruction

		← this is an empty line

An instruction is the number or ID of a slide (causing the corresponding slide to be displayed), or one of the following: + (advance to the next incremental element or slide), ++ (display the next slide), - or -- (display the preceding slide), ^ (display the first slide), $ (display the last slide), 0 (exit slide mode to index mode), :dark-on (turn dark mode on, if the slide's style sheet supports it), :dark-off (turn dark mode off).

To disconnect from the sync server, press the S key. To reconnect press S again.