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.
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.
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.
![[Top view of four pairs of hand holding each other crosswise]](https://www.w3.org/2018/Talks/TPAC-2018/ceo-update/diversity.jpg)
Adding class cover to the image makes it stretch to
the edges of the slide.
And also on the right side…
Hint: Add class=clear on the slide to omit the banner and slide number.
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.
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. On a Cicero by the text, it seems the ‘ipsum lorem’ is famous based with lines but mixed up.
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.
And on the right side…
The description of the pie chart, here as a table:
| Name | Percentage |
|---|---|
| Andy | 16% |
| Chloe | 21% |
| Daniel | 13% |
| Grace | 20% |
| Sophia | 30% |
Careful, some images make the text hard to read!
Careful, some images make the text hard to read!
![[photo with a beach, cliffs, buildings, dark clouds and a surfer]](https://www.w3.org/2020/Talks/ac-slides/template/coast.jpg)
slide darkmode for
white-on-black(Photo ‘Surfer and the stormy sea’ by Xavier Nohet)
This is a template for slides using the Shower framework (version 3.2) with a W3C style. The Shower 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 b6+ framework. Look in the HTML source for how to change the script.
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 shower3-2-humaaans.html (this file) from https://www.w3.org/Talks/Tools/ into your directory and edit the content, or just use it as an example.
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:
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 shower3-2-humaaans.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/2021/ or https://www.w3.org/2021/Talks/ (replace 2021 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.)
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.
You can add additional text, such as speaker notes or explanations, between the slides. They will be visible in index mode but not in presentation mode. Use elements with a class of comment:
<section class="comment"> ... text here... </section>
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.
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>
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>
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, 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.)
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.)
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). E.g.,
<section class="slide" data-timing="1:03">
This slide will remain on screen no longer than 1 minute and 3 seconds, after which the next slide will be shown.
(This feature is only available with the Shower script, not with b6+.)
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.
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. Three alternative styles are available: emerge makes the elements fade in, strong makes the most recent element red, 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">...
The elements that are not yet visible can also be replaced by a gray bar (useful to show how many elements are still invisible) by adding the class greeked. Like the animation, this can be set on the incremental element itself or on an ancestor, e.g.:
<ul class="emerge greeked"> <li class="next">...
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>
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>
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.)
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?
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.)
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.
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.
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 (blue 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.
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.
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.
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.
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.
To present the slides, load them into a browser that supports JavaScript and CSS and then press Shift+F5 (or Command+Enter on Mac) or click on the first slide. (If you are using b6+ instead of Shower, double-click or press the ‘A’ key to start the slide show.)
Navigate though the slides by pressing the spacebar, the arrow keys or Page-up/Page-Down. The Home and End keys jump to the first, resp. last slide.
To exit the presentation, press the Esc key.
The complete list of key strokes is in the Shower documentation. (For b6+, see the b6+ navigation keys & gestures.)
This is a template for slides using the Shower JavaScript framework (version 3.2) with a style based on Humaaans. For usage instructions, see at the end.
To start the slide show, turn on JavaScript and press Shift+F5 (or Command+Enter on Mac) or click on a slide. Return to the index by pressing the Esc key.