Leaving presentation mode.

Manual of the b6+ slide framework

Author: Bert Bos <bert@w3.org>

Created: 4 March 2019
Updated: $Date: 2024/02/04 22:13:20 $ 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) or with an element with a page-break-before: always property (as for Opera until version 12).

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 three ways:

  1. each slide is enclosed in an element with class=slide, or
  2. an element with page-break-before: always starts a slide, or
  3. each slide starts with an <h1>

The b6plus.js script – features

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

Elements with class=progress get a style property ‘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.

It is up to the style sheet to set other properties. The simple.css style sheet makes the progress element into a thin red line along the top of the slide.

B6+ also sets a custom style variable ‘--progress’ with a value between 0 and 1 on <body>. Useful if you write your own style for a progress element.

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:

Incremental display with class=next

Incremental display can also be done by setting class=next on all elements that should be unveiled one by one. Example

In this case the elements don't have to be children of the same parent.

Incremental & going backwards

Experimental: Select how the key and incremental elements interact.

Other features

Second screen

Press ‘2’ to show the slide show in a second window.

The second window can be controlled from the current window.

Use the current window to see your notes and next slides.

Show a clock and remaining time

You can add a clock that will be on the second screen during a presentation. There are two predefined clocks, called clock and fullclock, or you can make your own.

This slide set demonstrates the default, ‘clock.’

Dark mode

If the style sheet supports it, the D key toggles dark mode.

It just adds or removes class=darkmode on <body>.

The style sheet must contain

.has-darkmode { --has-darkmode: 1 }

to signal that it supports this class.

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.

Lists

This is an H3

  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 link goes to slide 22

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:

   
 X 
   
  O
 X 
   
 XO
 X 
   
 XO
 X 
 O 
XXO
 X 
 O 
XXO
 XO
 O 
XXO
 XO
 OX

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

Etc.

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
                       (automatically)
  * Give the PRE a class of "numbered"
  * Works for up to 20 lines
                       (depending on font size)
  six
   seven
   eight
    nine
    ten
  eleven

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!

Shout!

Takahashi method

Grow!

Animated

Don't use this too often!

Shout and grow!

Animated

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 transition between this slide and the next.

Thank you!

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.

Created 4 March 2019 by Bert Bos. Last modified $Date: 2024/02/04 22:13:20 $ by $Author: bbos $.