This is a template for slides using the b6+ JavaScript framework with a style based on W3C's 2025 logo and brand guidelines. For usage instructions, see at the end.

To start the slide show, turn on JavaScript and press ‘A’. Return to the index by pressing ‘A’ or ‘Esc’. On a touch screen, use a 3-finger touch. Double click to open a specific slide. In slide mode, press ‘?’ (question mark) to get a list of available commands.

Leaving slide mode.

# The W3C slide style 2025

… for the b6+ framework

March 2025

Notes for slide 1 can be put here.

## Lists

### This is an H3

1. Potatoes
2. Onions and olives

### Another H3

- North pole
- East pole

Notes for slide 2 can be put here.

## Lists with icons

- ♪ North pole
- 🍉 East pole
- Metro pole
- Straw pole
- 🐥 Pole tree

Notes for slide 3 can be put here.

## 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 2

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

Notes.

## Incremental display (1/3)

Unfold (default style)

- This item is shown right away
- This one appears on a key press
- The second key press reveals this
- And then this

Fade in (`class=emerge`)

- This item is shown right away
- This one appears on a key press
- The second key press reveals this
- And then this

Notes.

## Incremental display (2/3)

Quick
(`class=quick`)

- This one appears on a key press
- The second key press reveals this
- And then this

Fade in + red items
(`class="emerge strong"`)

- This one appears on a key press
- The second key press reveals this
- And then this

Notes.

## Incremental display (3/3)

Quick + greeked
(`class="quick greeked"`)

- This one appears on a key press
- The second key press reveals this
- And then this

Fade in + red + dim (`class= "emerge strong dim"`)

- This one appears on a key press
- The second key press reveals this
- And then this

Notes.

## 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 |

| X | O
| X |

| X | O
| X |
| O |

X | X | O
| X |
| O |

X | X | O
| X | O
| O |

X | X | O
| X | O
| O | X

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

Notes.

# ‘Slipshow’ presentations

A slipshow presentation is one where you don't put each topic on a separate slide, but add it to a long scroll, which automatically moves up to display it.

The idea is by Paul-Elliot Anglès d'Auriac, see his program on GitHub.

B6+ supports a simple version.

This slide is an example.

Just progress (with space, arrow, click or swipe) to display additional topics.

## A topic

This new topic is added…

## Another topic

When there is no more space, old content moves up…

Column head A | Column head B
--- | ---
A table | Just as an example…
A2 | B2
A3 | B3…

## A topic with a list

The space for the list is reserved…

1. … but the list
2. is added separately…

One more bit of content…

And a final one.

# An example of a part title

## An image on the side

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

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.

## A ‘bleeding’ image

Adding class `cover` to the image makes it stretch to the edges of the slide.

## A ‘bleeding’ image

And also on the right side…

Hint: Add class=clear on the slide to omit the banner and slide number.

## A big image on the side

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.

## A big image on the side

And again, with class ‘slide side right big’.

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

## A big, ‘bleeding’ image

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 ‘ipsum lorem’ is famous based with lines but mixed up.

## A big, ‘bleeding’ image

And on the right side…

## A figure

The description of the pie chart, here as a table:

Name | Percentage
--- | ---
Andy | 16%
Chloe | 21%
Daniel | 13%
Grace | 20%
Sophia | 30%

## In columns

### Title

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

### Title

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

### Title

And this is the third one. Left column again.

Etc.

## Another simple text slide

There are a lot of words on this slide, no need to add more.

- First really great reason
- Second amazing reason
- Third undeniable reason

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

## Striped tables

row 1 | has no background
row 2 | has a gray background
row 3 | has no background
row 4 | has a gray background
etc. |
etc. |

## Image overlay: cover

Careful, some images make the text hard to read!

## Image overlay: fit

Careful, some images make the text hard to read!

## White text

- Use a class of `slide darkmode` for white-on-black
- Useful for text on a dark background

(Photo ‘Surfer and the stormy sea’ by Xavier Nohet)

## Shout and grow!

Shout:

Takahashi method!

Shout & Grow:

Animated

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

## Automatically scale text down

If the text doesn't fit, and you really cannot reduce it nor split the slide, you can ask b6+ to scale the text down until it does fit.

To do this, add class `textfit` to the slide.

Too much text…
Too much text…
Too much text…
Too much text…
Too much text…
Too much text…
Too much text…
Too much text…
Too much text…
Too much text…
Too much text…
Too much text…
The last line.

## Convert to PDF

Print in portrait mode to get:

- multiple slides per page
- notes between the slides

📃︎ Try it! [W3C team only]

A4 or Letter

Print in landscape mode to get:

- one slide = one page
- no notes

📃︎ Try it! [W3C team only]

PDF slides

## Conclusion

1. Making slides is easy

## Thank you!

Questions?

- me@example.com
- @me@w3c.social
- @me-on-github

## Support us

Your support makes a huge difference to our operations as a public-interest non-profit and to make the web work – for everyone.

Learn more at: https://www.w3.org/support-us/

[Please, if you can, keep the ‘support us’ block on your last slide. It may be useful to translate it if the talk is not in English.]

## Gracias!

Tienes preguntas?

- me@example.com
- @me@w3c.social
- @me-on-github

## Apóyanos!

Tu contribución hace una gran diferencia en nuestras actividades como organización sin ánimo de lucro al servicio del interés público y para que la web funcione para todos. Más información disponible en https://www.w3.org/support-us/

## Bedankt!

Vragen?

- me@example.com
- @me@w3c.social
- @me-on-github

## Help ons!

Jouw hulp maakt een enorm verschil voor onze activiteiten als ideële non-profitorganisatie en om het web – voor iedereen – te laten werken.

Kijk voor meer op: https://www.w3.org/support-us/

# User manual

This is a template for slides using the b6+ framework with a W3C style. The b6+ JavaScript code manages the slide progression, while the style sheet provides the W3C look and some useful predefined layout styles.

If you write slides with this style, you can either put them online or download a zip with everything needed to present offline, as explained below.

Note: The same slides and the same style can also be used with the Shower framework. Look in the HTML source for how to change the script.

### Developing slides online

If you develop your slides on the W3C web site (with HTTP PUT, WebDav or CVS), then make a directory under https://www.w3.org/Talks/2021/ or https://www.w3.org/2021/Talks/ (or whatever the current year is). The former will be public, the latter requires setting an ACL. Copy b6plus-style-2025.html (this file) from https://www.w3.org/Talks/Tools/ into your directory and edit the content, or just use it as an example.

### Developing slides offline

If you develop your slides offline (or plan to present them without a network), then download this zip file. Unpacking it creates the following directories and files:

- slides/
  - Icons/
    - blueright.png (a PNG image)
    - linen.png (a PNG image)
    - toc.png (a PNG image)
  - Tools/
    - Shower3-2/
      - iframe-fixup.js (a JavaScript file)
      - shower.js (a JavaScript file)
    - b6plus/
      - b6plus.js (a JavaScript file)
    - style-2025/
      - NotoSans-Italic-VariableFont_wdth,wght.woff2 (a web font)
      - NotoSans-VariableFont_wdth,wght.woff2 (a web font)
      - cover-light.svg (an SVG image)
      - final-dark.svg (an SVG image)
      - icons.svg (an SVG image)
      - part-light.svg (an SVG image)
      - side-dark.svg (an SVG image)
      - side-light.svg (an SVG image)
      - slides.css (a CSS file)
    - b6plus-style-2025.html (this file)
    - shower3-2-style-2025.html (an HTML file)
  - README.html (an HTML file)

Make a directory for your own slides under slides. (A good name is MMDD-Theme, where MM is the month in which you give the talk, DD the date and Theme the topic, e.g., ‘Legal’, ‘W3C’ or ‘SVG’.) You can copy the b6plus-style-2025.html file there as a starting point, or just use it as an example. If you make any images, put them in that directory as well.

If you are able to upload your slides, put your directory with all that it contains under https://www.w3.org/Talks/2025/ or https://www.w3.org/2025/Talks/ (replace 2025 by the current year). There is no need to upload the Tools directory. It is is already there.

(Uploading requires HTTP PUT, WebDav or CVS. To set an ACL, you will need ,access.)

## Writing slides

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

### Speaker notes or comments

You can add additional text, such as speaker notes or explanations, between the slides. They will be visible in index mode but not in slide mode. Use elements with a class of comment:

    <section class="comment">
      ... text here...
    </section>

### Slide numbers

If a slide should not have a slide number and an image banner, add the class clear:

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

On title slides and final slides (see below), this only removes the number, not the banner.

Adding the class clear on the body element omits the slide number and the side banner from all slides.

### 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>

### Final slide

The class final is meant for a last slide, e.g., for conclusions or thanks (but it may be used elsewhere, too):

    <section class="slide final clear">
      <h2>Conclusions<h2>
      …
    </section>

### Part titles

A slide with a class of `part` can be used as the title slide for a part of the slide deck, e.g., to indicate the beginning of a new topic. It typically contains a single H1 or H2.

### Adding an extra logo

If you want to include an extra logo (in addition to the W3C kogo that is already part of the style), you can do so by setting the CSS custom property --extra-logo in a style rule. E.g.:

    <style>
      html { --extra-logo: url(../b6plus/CSS_color_tree3t.png) }
    </style>

If the URL is relative, as in this example, it must be relative to the style sheet (i.e., relative to ../Tools/style-2025/slides.css in the case of this template), not relative to the slide set.

### 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). Two sizes are possible: normal (about 1/3 of the slide) and big (about 2/3 of the slide).

To put an image on the left:

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

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>

Add class big to the slide for a bigger image. To put the image on the left:

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

And on the right:

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

The image can be stretched to the edges of the slide by adding a class cover. The image is not deformed. It is scaled to be big enough to cover the image area and then either the sides are cropped (if it is too wide) or the top and bottom*.

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

*) Note for advanced users: It is possible to indicate which sides should be cropped: add an attribute like style="object-position: 20% 60%" to indicate that, of the amount to be cropped from the sides, 20% should be cropped on the left and the remaining 80% on the right; and of the amount to be cropped from the top and bottom, 60% should come from the top and the remaining 40% from the bottom. Thus, e.g., ‘0% 100%’ says never to crop anything from the left (0%) if the image is too wide, and only to crop from the top (100%) if the image is too tall. (The default corresponds to ‘50% 50%’, i.e., crop equal amounts from both sides.)

Smaller images that do no need to occupy the full height of the slide can be put on the right or left by giving them the class `float`, resp. `float left` (or `float l`). Their width will be 60% of the slide's width. Text next to the image will be narrower, but text before and after the image can still use the full width of the slide.

Sometimes it looks better to give such images a thin border. Adding the class `border` will do that.

### Figures

When information is in the form of an image (a diagram, a chart, a screenshot, etc.), put it inside a figure element. Add a figcaption if needed.

    <figure><img src="..." alt="..."><figure>

If the image is not accessible, use a details element instead and add a description, like this:

    <details>
     <summary><img src="..." alt="..."></summary>
     ... the same data as in the image, but as text...
    </details>

The description becomes visible when the user clicks on the image. (The slide above shows an image of a pie chart that is described by a table with the same data.)

### Automatic sizing of images

Setting the class autosize on an image instructs b6+ to scale down the image if the slide's content is otherwise too tall:

    <img src="my-image.png" alt="..." class=autosize>

You can have several images with class autosize on a slide and they are all scaled down by the same percentage.

### 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

By default, each new element appears with a short animation as if it unfolds from left to right. Two alternative animations are available: emerge makes the elements fade in and quick omits the animation. The class can be set on each incremental element:

    <li class="next emerge">...

or on an ancestor, e.g.:

    <ul class="emerge">
      <li class="next">...

Three optional modifiers change how elements look before, after or while they are the currently active element: Strong makes the currently active element red. Greeked replaces the elements that are not yet visible by a gray bar. (Useful to show how many elements are still invisible.) And dim grays out the elements that are no longer the active element.

Like the animation, these modifiers can be set on the incremental element itself or on an ancestor. The modifiers can also be combined, e.g.:

    <ul class="emerge strong dim">
      <li class="next">...

### ‘Slipshow’ presentations

With b6+ (but not with Shower) you can make slides that have more incremental elements than fit on the slide. To display them, the slide automatically scrolls to each element as it is revealed.

This mode of presentation is called a ‘slipshow’ by its inventor, Paul-Elliot Anglès d'Auriac. (His program is on GitHub.) B6+ only implements a simple variant.

Scrolling slides may be useful for long content or when you want to add content while keeping some of the preceding content on screen. (An alternative is updating elements in place.)

### Automatic slide shows

Slides can be made to advance automatically after a given time, by setting a data-timing attribute on them with a value of MM:SS (minutes and seconds), or a number followed by an s (seconds), m (minutes) or h (hours), e.g.:

    <section class="slide" data-timing="1:03">
    <section class="slide" data-timing="20.5s">
    <section class="slide" data-timing="0.33m">

E.g., the last one means that the slide is shown for a maximum of 0.33 minutes (about 20 seconds) before the next slide appears. (You can still advance the slide by hand before that.)

If the slide contains incremental elements, the time is distributed equally over those elements. E.g., if there are three incremental elements, the time is divided by four so that the first incremental appears after a quarter of the given time, the second after half the given time, and the last one after three quarters. You can also set a time on an individual incremental element, in which case that time is used for that element. E.g.:

    <section class=slide data-timing="8s">
      <p>This slide has 3 incremental elements.
      <ol>
        <li class=next data-timing="10s">Shown after 8/4 = 2 seconds
        <li class=next data-timing="15s">Shown 10 seconds later
        <li class=next>An additional 15 seconds later
      </ol>
    </section>

After 29 seconds (= 2 + 10 + 15 + 2), the next slide will appear.

You can set a default time on the body element, e.g.:

    <body data-timing="20.2s">

This sets the time for all slides that do not have a data-timing attribute of their own.

Setting the data-timing attribute to 0 indicates that the slide or element does not automatically advance.

### 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>
    </ul>

### Two panes

Setting the class `two-panes` on a slide divides the slide into a left and a right half, with different colors. The first element on the slide is put in the left half and the second one in the right half. Additional elements alternate between left and right. (I.e., all odd elements are put on the left and all even elements on the right.)

Additionally, all text will be vertically centered and any bullet lists will be styled with dashes instead of bullets.

### 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>

### Extra big text: shout

To make text extra big, give it a class of shout, e.g.:

    <p class=shout>Hurray!

(Sometimes this is referred to as the ‘Takahashi method’: Instead of sentences or graphics, a slide only contains one or two keywords. The narrative comes from the speaker.)

### Animated text: grow

To draw extra attention to some text or an image, it can be animated. Adding a class of grow to it will make it appear slowly. It will start small and one second after the slide appears it will begin to grow and reach its normal size three seconds later.

    <p class=grow>See?

### Automatic text fit

B6+ can automatically reduce the font size of a slide to fit long text. To request this, add the class textfit on a slide (or on the body, if all slides need this). See the example slide.

(The way this works is that b6+ wraps the contents of the slide in a div with the right font size. If you have added your own style rules, make sure they still work.)

Be careful! The textfit feature can easily result in text that is too small to read.

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

### Lists with icons

To replace the list bullets with icons, emojis, or images, make a ul with a class of with-icons. The first element of each li will be used instead of the list bullet.

    <ul class=with-icons>
     <li><span>♪</span> North pole</li>
     <li><img src="../Icons/toc.png" alt="toc button"> Metro pole</li>
    </ul>

### 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 and slide number on the right are not obscured by the image. (But you can use clear on the slide to hide them.)

It is advisable to add a class of darkmode or lightmode to a slide with an image overlay. See the next section.

### Forcing white text or black text

The colors of the slides depend on whether ‘dark mode’ is in effect in the operating system: black text on a white background if dark mode is off and white on black if it is on. But when text is overlaid on an image, it may be better to force the text to always be white (if the image is dark) or black (on a lighter image). You do that by setting a class on the slide: darkmode (for white-on-black) or lightmode (for white-on-black). E.g.:

    <section class="slide darkmode">

Other colors (titles, list bullets, links, etc.) also become fixed 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.

### Inverting image colors in dark mode

Some images, such as diagrams, can be color-inverted and still look good. You can give such images a class can-invert and when the slides are displayed in dark mode, the image colors will be inverted. (Try it on the slide with a figure.)

    <img class="can-invert" src="..." alt="...">

This also works for SVG images and other things.

### Video and audio

Videos (with the video element) and audios (with the audio element) on a slide can be made to play automatically when the slide opens, by giving them an autoplay attribute, e.g.:

    <video src="myvideo.mp4" autoplay></video>

Videos can be used as background for the slide with the cover or fit classes. (See their description under ‘Image overlays’.) The class fit is also useful simply to make the video as large as possible if it is the only thing on the slide.

However, if you do use one of those classes, it is best to use the autoplay attribute and to avoid the controls attribute, because the video controls will capture all key presses and mouse clicks and thus you can't use those to advance to the next slide anymore. (If you do want to use controls, either present with a second window (see below) or set a data-timing attribute on the slide, so that it advances to the next slide automatically after a given time.)

### 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="shower 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.
slide-up
  The old slide moves up, revealing the new slide.
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.
assemble
  The contents of the new slide fly in from all directions.

### Watermark overlay

You can make a ‘watermark’, a text or an image that is overlaid on every slide, by making an element with a class of watermark. It can be placed before or after the slides.

    <p class=watermark><strong>DRAFT!</strong>

By default, the watermark is slightly rotated and placed in the center of each slide. Any text will be red.

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

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

### Exporting to PDF

The slides can be exported to PDF (or printed) in two ways: multiple slides per page with comments interleaved, or one slide per page without any comments. The latter may be useful to create a PDF suitable for presenting, when it is not possible to use an HTML browser.

portrait
  When printing in portrait mode, the output will contain as many slides per page as will fit and the comments are printed between the slides. This corresponds to viewing the slides in index mode.
landscape
  When the output is in landscape mode, each page consists of one slide, without page margins, and without the comments between the slides.

Note: In landscape mode, the style sheet tries to set the size of the output page to exactly the size of a slide, but not all user agents that produce PDF respect that. (And, obviously, a printer is limited to the available paper.) There may be some black margin to the right and below each slide. Prince does respect the size. W3C team can also use the ",pdfui" tool online.

## 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. C shows a clicakble table of contents. The ? (question mark) key shows a list of available commands.

If you have automatically advancing slides, you can pause the slide show with the P key or the Play/Pause key, if your keyboard has it. You can also navigate to a different slide and resume from there.

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

### 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 on body, see ‘Forcing white text or black text’.) 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.

### Drawing on the slides

After pressing the W key, you can draw on the current slide with the mouse. Press W again to clear the drawing.

The drawing is not permanent and there is always only one slide with a drawing: As soon as you start drawing on another slide, the previous slide is cleared.

The color of the drawing can be set with style rules, e.g., like this:

    .b6-canvas {color: red}

### Clocks to show remaining time

When using a second screen, it is possible to show clocks on the first screen with the remaining time, the time used so far, and the real (wall clock) time. (The clocks are normally only shown on the first 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 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.

### 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#20.

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

    <body class="noclick">

The complete list of key strokes and gestures is in the b6+ documentation, which also shows what else b6+ can do.

## Embedding slides in other documents

You can embed a single slide in another document with the help of an object, iframe or embed 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.

Note that using ‘?full&static’ on an automatic slide show plays the whole slide show without the possiblility to pause it.