How to use the b6 slide style?

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

A small JavaScript script that emulates projection mode on browsers that do not support it natively, and
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
 rel=stylesheet>
<script src="../Tools/b6/b6.js"
 type="text/javascript"></script>

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

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)"
 rel=stylesheet>
...

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

Extras

●●●●●●●●●●●●●

Optionally, you can also

Add a line (“signature”) at the bottom of every slide:

<p class=signature><a href="mailto:bert@w3.org"
 >Bert Bos</a> | How to use b6?

Change the background image:

<style type="text/css" media=projection>
html {background-image: url(...)
</style>

Special classes (1/3)

●●●●●●●●●●●●●

b6 predefines a few classes:

comment: 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.
callout: Call out something important: <div class=callout>…</div>

This is a callout!

Special classes (2/3)

●●●●●●●●●●●●●

sidebar

A note on the right side:

<div class=sidebar>…</div>

col

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)

●●●●●●●●●●●●●

hide: 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>...
extensive: If a code example is big: <pre class=extensive>

Useful tools

●●●●●●●●●●●●●

Show a progress bar cum navigation bar:

Include  just after every H1
Run the following (where Overview.html is the file with your slides):
```
../Tools/mkminitoc Overview.html
```

If necessary, remove it again with