Bert Bos | How to use b6?

How to use the b6 slide style?

Bert Bos (W3C) <bert@w3.org>

September 2012

B6 provides a style sheet for slide presentations based on a style made for some W3C brochures. It also provides a small script in JavaScript to help with presentations on browsers that do not support the projection media type. (Currently, 2012, only Opera's full-screen mode correctly selects the projection style sheets. On other browsers, you can emulate that mode by turning JavaScript on and pressing the A key to start the b6 script.)

What is b6?

b6 is

  1. A small JavaScript script that emulates projection mode on browsers that do not support it natively, and
  2. A particular style sheet for (W3C) slide presentations.

Slide sets based on b6 allow multiple slides in a single HTML file. Each slide starts with an H1 and the b6 style sheet (or the b6 JavaScript, on certain browsers) makes sure that only a single slide is shown at a time.

When the slides are not being projected, i.e., they rendered in screen, print or some other mode, all the slides are shown on a single page.

How do you use b6? (traditional)

Include this code before the first slide:

<link href="../Tools/b6/b6.css" media=projection
<script src="../Tools/b6/b6.js"

<p class=letterhead><a href="http://www.w3.org/"
 ><img alt="W3C" src="../Icons/w3c_home.png"></a>

And mark-up every slide as

<div class=slide>
<h1>Title of the slide</h1>

How do you use b6? (2018)

As above, but replace projection with (overflow-block: optional-paged)

<link href="../Tools/b6/b6.css"
 media="(overflow-block: optional-paged)"

('projection' became deprecated in 2017, when Media Queries level 4 replaced it with the 'overflow-block' feature.)


Optionally, you can also

Special classes (1/3)

b6 predefines a few classes:

Use <div class=comment><…</div> after a slide to add comments that will be visible in screen mode or when printed, but not during a presentation.
Call out something important: <div class=callout>…</div>

This is a callout!

Special classes (2/3)

A note on the right side:
<div class=sidebar>…</div>
Put two things next to each other:
<div class=col>…</div>
<div class=col>…</div>

Something on the left.

Something on the right.

Special classes (3/3)

Things that should not be projected.
veryshort, short, long, verylong
Takahashi Method: slides with one or two words (<p class=veryshort) or a bit more (<p class=verylong).
keyword, comment, string, dim
Colors for code examples: <pre>... <span class=keyword>...
If a code example is big: <pre class=extensive>

Useful tools

Show a progress bar cum navigation bar:

  1. Include <!--minitoc--><!--/minitoc--> just after every H1
  2. Run the following (where Overview.html is the file with your slides):
    ../Tools/mkminitoc Overview.html

If necessary, remove it again with

../Tools/rmminitoc Overview.html

Useful snippets

You might want to include Bernard's advertisement. (See also French and Dutch on the next slides):


To Lead the Web to its full potential

To Anticipate the Trends

To Increase your company value

Join W3C


or contact: Bernard Gidon <bgidon@w3.org>

Useful snippets (French)


Pour Développer le potentiel du Web

Pour Anticiper les évolutions technologiques

Pour Augmenter la valeur et visibilité de votre organisation

Rejoigner le W3C


ou contacter : Bernard Gidon <bgidon@w3.org>

Useful snippets (Dutch)


Om het volle potentieel van het Web te ontwikkelen

Om de trends voor te zijn

Om de waarde van uw bedrijf te vergroten

Word lid van W3C


of neem contact op: Bernard Gidon <bgidon@w3.org>