<!DOCTYPE html>

<html lang="en-us">
 <head>
  <meta charset=UTF-8>
  <meta content="width=device-width" name="viewport">
  <title>%%Title%%</title>
  <link rel="stylesheet" href="../Templates/slides.css">
  <!-- To use the b6+ framework, include this: -->
  <script src="../Templates/b6plus.js"></script>
  <!-- To use the Shower framework, remove b6plus above and add these two:
  <script src="../Templates/shower.js"></script>
  <script src="../Templates/iframe-fixup.js"></script> -->
  <style>
   /* For the tic-tac-toe example: */
   .game td {border: thin solid; height: 1.2em}
   .game {border: hidden; table-layout: fixed; border-collapse: collapse;
     width: 5em; margin: 1em auto; text-align: center}
  </style>
 </head>
 <body class="shower fade-in duration=15 hidemouse">

  <section class=comment>
   <p>This is a template for slides for <a
   href="https://www.w3.org/news-events/w3c-ac/ac-2026/">AC 2026</a>.</p>

   <p><strong>Author(s):</strong> The <strong><a href="#manual"
   >user manual</a></strong> at the end has setup information and
   instructions. To write slides, look at the slides in this
   template.</p>

   <p><strong>Reader(s):</strong>
   <!-- For b6plus: -->
   <span class=if-b6plus>To start the slide show, press ‘A’. Return to
   the index with ‘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.</span>
   <!-- For Shower: -->
   <span class=if-not-b6plus>To start the slide show, press Shift+F5
   (Command+Enter on Mac). Return to the index by pressing ‘Esc’. You
   can also click to open a specific slide.</span></p>

   <p><strong>If it doesn't work:</strong> Slide mode requires a
   recent browser with JavaScript. If you are using the <a
   href="https://noscript.net/" >‘NoScript’</a> add-on (Firefox or the
   Tor Browser), or changed the <a
   href="https://support.google.com/chrome/answer/114662?hl=en&amp;co=GENIE.Platform=Desktop"
   >‘site settings’</a> (Chrome, Vivaldi, Opera, Brave and some other
   browsers), or the ‘permissions for this site’ (Edge), you may have
   to explicitly allow JavaScript on these slides. Internet Explorer
   is not supported.</p>
  </section>

  <!--=============================================================
			    Example slides
  ==============================================================-->

  <!-- Remove this element if you don't want a progress bar: -->
  <div class=progress></div>

  <!-- Remove this element if you don't want the remaining time in
       index mode and on the 2nd screen. If you keep it, you may want
       to add the class "duration=n" on BODY, where n is the initial
       number of minutes on the clock. Default is 30. -->
  <div class=clock></div>

  <!-- Alternative: Show also real time and elapsed time. -->
  <!-- <div class=fullclock></div> -->

  <!-- What a screen reader should say on leaving slide mode,
       instead of the default ‘Stopped.’ -->
  <div role=region aria-live=assertive>
    Leaving slide mode.
  </div>

  <section class="slide cover clear" id="cover">
   <h1>%%Title%%</h1>
   <address>%%Author%%<br></address>
   <p class=event>W3C AC meeting 2026<br>
     Hangzhou, China<br>
     20-22 April 2026</p>
  </section>

  <section class=comment>
   <p>Notes for slide 1 can be put here.</p>
  </section>


  <section class="slide" id="lists">
   <h2>Lists</h2>
   <h3>This is an H3</h3>
   <ol>
    <li>Potatoes</li>
    <li>Onions and olives</li>
   </ol>
   <h3>Another H3</h3>
   <ul>
    <li>North pole</li>
    <li>East pole</li>
   </ul>
  </section>

  <section class=comment>
   <p>Notes for slide 2 can be put here.</p>
  </section>


  <section class="slide slide-in">
   <h2>Lists with icons</h2>
   <ul class=with-icons>
    <li><span>♪</span> North pole</li>
    <li><span>🍉</span> East pole</li>
    <li><img src="../Templates/piechart.png" alt="pie chart"> Metro pole</li>
    <li><img src="../Templates/simple-car-icon.svg" alt="car"> Straw pole</li>
    <li><span>🐥</span> Pole tree</li>
   </ul>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide">
   <h2>Some elements</h2>
   <p>Words can be given a <strong>strong emphasis</strong>, which
   makes them appear in bold</p>
   <p>The <em>normal emphasis</em> has a highlighter effect.</p>
   <p>Code looks like this: <code>if (a) return b;</code></p>
   <p>This link goes
   to <a href="https://docs.google.com/presentation/d/19UbOTXtXmAf0vjt0s-jJ_WBjwlBhRlMdE6L71cEPkmg/edit?usp=sharing">the Google Slides template</a></p>
   <p class="note">This is an example of a note, in a smaller font</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide">
   <h2>Incremental display (1/3)</h2>
   <div class=columns>
    <div>
     <p>Unfold (default style)</p>
     <ul>
      <li>This item is shown right away</li>
      <li class="next">This one appears on a key press</li>
      <li class="next">The 2nd key press reveals this</li>
      <li class="next">And then this</li>
     </ul>
    </div>
    <div>
     <p>Fade in (<code>class=emerge</code>)</p>
     <ul class=emerge>
      <li>This item is shown right away</li>
      <li class="next">This one appears on a key press</li>
      <li class="next">The 2nd key press reveals this</li>
      <li class="next">And then this</li>
     </ul>
    </div>
   </div>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide cut-in">
   <h2>Incremental display (2/3)</h2>
   <div class=columns>
    <div>
     <p>Quick<br> (<code>class=quick</code>)</p>
     <ul class=quick>
      <li class="next">This one appears on a key press</li>
      <li class="next">The 2nd key press reveals this</li>
      <li class="next">And then this</li>
     </ul>
    </div>
    <div>
     <p>Fade in + red items<br> (<code>class="emerge strong"</code>)</p>
     <ul class="emerge strong">
      <li class="next">This one appears on a key press</li>
      <li class="next">The 2nd key press reveals this</li>
      <li class="next">And then this</li>
     </ul>
    </div>
   </div>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide">
   <h2>Incremental display (3/3)</h2>
   <div class=columns>
    <div>
     <p>Quick + greeked<br> (<code>class="quick greeked"</code>)</p>
     <ul class="quick greeked">
      <li class="next">The first item</li>
      <li class="next">Another item</li>
      <li class="next">The third item</li>
     </ul>
    </div>
    <div>
     <p>Fade in + red + dim (<code>class= "emerge strong dim"</code>)</p>
     <ul class="emerge strong dim">
      <li class="next">This one appears on a key press</li>
      <li class="next">The 2nd key press reveals this</li>
      <li class="next">And then this</li>
     </ul>
    </div>
   </div>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide" id="in-place">
   <h2>Elements updated in-place</h2>
   <p>[B6+ only.] Combining class=incremental with class=in-place
     yields elements that are displayed one by one, with each one
     replacing the previous. Example:
   <div class="incremental in-place quick">
    <table class=game>
     <tr><td> <td> <td> 
     <tr><td> <td>X<td> 
     <tr><td> <td> <td> 
    </table>
    <table class=game>
     <tr><td> <td> <td>O
     <tr><td> <td>X<td> 
     <tr><td> <td> <td> 
    </table>
    <table class=game>
     <tr><td> <td>X<td>O
     <tr><td> <td>X<td> 
     <tr><td> <td> <td> 
    </table>
    <table class=game>
     <tr><td> <td>X<td>O
     <tr><td> <td>X<td> 
     <tr><td> <td>O<td> 
    </table>
    <table class=game>
     <tr><td>X<td>X<td>O
     <tr><td> <td>X<td> 
     <tr><td> <td>O<td> 
    </table>
    <table class=game>
     <tr><td>X<td>X<td>O
     <tr><td> <td>X<td>O
     <tr><td> <td>O<td> 
    </table>
    <table class=game>
     <tr><td><b>X</b><td>X<td>O
     <tr><td> <td><b>X</b><td>O
     <tr><td> <td>O<td><b>X</b>
    </table>
   </div>
   <p class=note>(class=overlay is an alias for class=incremental.)
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide move-up quick">
   <h1>‘Slipshow’ presentations</h1>
   <p>[B6+ only.] A <em>slipshow</em> 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.</p>
   <p class=note>The idea is by Paul-Elliot Anglès d'Auriac, see
    his <a href="https://github.com/panglesd/slipshow">program on
    GitHub</a>.</p>
   <p>B6+ supports a simple version.</p>
   <p>This slide is an example.</p>
   <p>Just progress (with space, arrow, click or swipe) to display
    additional topics.</p>
   <article class=next>
    <h2>A topic</h2>
    <p>This new topic is added…</p>
   </article>
   <article class=next>
    <h2>Another topic</h2>
    <p>When there is no more space, old content moves up…</p>
   </article>
   <table class=next>
    <thead>
     <tr><th>Column head A</th><th>Column head B</th></tr>
    </thead>
    <tbody>
     <tr><td>A table</td><td>Just as an example…</td></tr>
     <tr><td>A2</td><td>B2</td></tr>
     <tr><td>A3</td><td>B3…</td></tr>
    </tbody>
   </table>
   <article class=next>
    <h2>A topic with a list</h2>
    <p>The space for the list is reserved…</p>
    <ol class=next>
    <li>… but the list</li>
    <li>is added separately…</li>
    </ol>
   </article>
   <p class=next>One more bit of content…</p>
   <p class=next>And a final one.</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide part">
   <h1>An example of a part title</h1>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide side">
   <h2>An image on the side</h2>
   <img class="side" width=498 height=575
	src="https://www.w3.org/Talks/2017/0520-CSS-Sud-Web/CSS_color_tree3t"
	alt="[Picture of a stylized tree with colorful, square leaves]">
   <p>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.</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide side right">
   <h2>An image on the side</h2>
   <img class="side" width=498 height=575
	src="https://www.w3.org/Talks/2017/0520-CSS-Sud-Web/CSS_color_tree3t"
	alt="[Picture of a stylized tree with colorful, square
	     leaves]">
   <p>And again, with class <code>slide side right</code>.</p>
   <p>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.</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide side">
   <h2>A ‘bleeding’ image</h2>
   <img class="side cover" width=550 height=451
	src="https://www.w3.org/2018/Talks/TPAC-2018/ceo-update/diversity.jpg"
	alt="[Top view of four pairs of hand holding each other crosswise]">
   <p>Adding class <code>cover</code> to the image makes it stretch to
   the edges of the slide.</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide side right">
   <h2>A ‘bleeding’ image</h2>
   <img class="side cover" width=550 height=451
	src="https://www.w3.org/2018/Talks/TPAC-2018/ceo-update/diversity.jpg"
	alt="[Top view of four pairs of hand holding each other crosswise]">
   <p>And also on the right side…</p>
   <p class=note>Hint: Add class=clear on the slide to omit the banner
   and slide number.</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide side big">
   <h2>A big image on the side</h2>
   <img class="side" width=498 height=575
	src="https://www.w3.org/Talks/2017/0520-CSS-Sud-Web/CSS_color_tree3t"
	alt="[Picture of a stylized tree with colorful, square leaves]">
   <p>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.</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide side right big">
   <h2>A big image on the side</h2>
   <img class="side" width=498 height=575
	src="https://www.w3.org/Talks/2017/0520-CSS-Sud-Web/CSS_color_tree3t"
	alt="[Picture of a stylized tree with colorful, square leaves]">
   <p>And again, with class ‘slide side right big’.</p>
   <p>It seems the famous ‘lorem ipsum’ is based on a text by Cicero,
   but with the lines mixed up…</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide side big">
   <h2>A big, ‘bleeding’ image</h2>
   <img class="side cover" width=550 height=451
	src="https://www.w3.org/2018/Talks/TPAC-2018/ceo-update/diversity.jpg"
	alt="[Top view of four pairs of hand holding each other crosswise]">
   <p>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.</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide side right big">
   <h2>A big, ‘bleeding’ image</h2>
   <img class="side cover" width=550 height=451
	src="https://www.w3.org/2018/Talks/TPAC-2018/ceo-update/diversity.jpg"
	alt="[Top view of four pairs of hand holding each other crosswise]">
   <p>And on the right side…</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide" id="figures">
   <h2>A figure</h2>
   <details>
    <summary>
     <img src="../Templates/piechart.png" alt="pie chart"
	  class="can-invert autosize">
    </summary>
    <p>The description of the pie chart, here as a table:
    <table class="striped note">
     <thead>
      <tr><th>Name <th>Percentage
     <tbody>
      <tr><td>Andy <td>16%
      <tr><td>Chloe <td>21%
      <tr><td>Daniel <td>13%
      <tr><td>Grace <td>20%
      <tr><td>Sophia <td>30%
    </table>
   </details>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide" id="columns">
   <h2>In columns</h2>
   <div class="columns">
    <section>
     <h3>Title</h3>
     <p>Children of an element with a class of <code>columns</code> are
      distributed over two columns</p>
    </section>
    <section>
     <h3>Title</h3>
     <p>This is the second child, which goes into the right
      column</p>
    </section>
    <section>
     <h3>Title</h3>
     <p>And this is the third one. Left column again.</p>
    </section>
    <p>Etc.</p>
   </div>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide two-panes">
   <div>
    <h2>A slide with two panes</h2>
    <p>There are a lot of words on this slide, no need to add
     more.</p>
   </div>
   <ul class=emerge>
    <li class=next>First really great reason</li>
    <li class=next>Second amazing reason</li>
    <li class=next>Third undeniable reason</li>
   </ul>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide" id="place">
   <div class="place t l"><strong>place t l</strong></div>
   <div class="place t"><strong>place t</strong></div>
   <div class="place t r"><strong>place t r</strong></div>
   <div class="place l">Here is something for the left
   side, with class <strong>place l</strong></div>
   <div class="place">class <strong>place</strong> puts an element
   centered in a 3×3 grid</div>
   <div class="place r"><strong>place r</strong></div>
   <div class="place b l"><strong>place b l</strong></div>
   <div class="place b"><strong>place b</strong></div>
   <div class="place b r">combine <strong>place</strong> with
   <strong>top</strong> (or <strong>t</strong>),
   <strong>right</strong> (or <strong>r</strong>),
   <strong>bottom</strong> (or <strong>b</strong>) and
   <strong>left</strong> (or <strong>l</strong>)</div>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide">
   <h2>Numbered lines of code</h2>
   <pre class="numbered">
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</pre>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide">
    <h2>Striped tables</h2>
    <table class="striped">
      <tr><td>row 1</td><td>has no background</td></tr>
      <tr><td>row 2</td><td>has a gray background</td></tr>
      <tr><td>row 3</td><td>has no background</td></tr>
      <tr><td>row 4</td><td>has a gray background</td></tr>
      <tr><td>etc.</td><td></td></tr>
      <tr><td>etc.</td><td></td></tr>
    </table>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide lightmode">
   <h2>Image overlay: cover</h2>
   <!-- Photo by AleRimoldi, source: https://commons.wikimedia.org/wiki/File:Statue_de_Gutenberg_%C3%A0_Strasbourg.jpg -->
   <img width=500 height=667
	src="../Templates/gutenberg_f9f9f9.jpg"
	alt="Image: Statue of Gutenberg"
	class="cover">
   <p class="place bottom right">Careful, some images make the text hard to
   read!</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide lightmode">
   <h2>Image overlay: fit</h2>
   <!-- Photo by AleRimoldi, source: https://commons.wikimedia.org/wiki/File:Statue_de_Gutenberg_%C3%A0_Strasbourg.jpg -->
   <img width=500 height=667
	src="../Templates/gutenberg_f9f9f9.jpg"
	alt="Image: Statue of Gutenberg"
	class="fit">
   <p class="place l">Careful, some images make the text
   hard to read!</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide darkmode">
    <h2>White text</h2>
    <img width=505 height=353
	 src="https://www.w3.org/2020/Talks/ac-slides/template/coast.jpg"
	 class="cover" style="object-position: 94% 100%"
	 alt="[photo with a beach, cliffs, buildings, dark clouds and a surfer]" >
    <ul>
      <li>Use a class of <code>slide darkmode</code> for
      white-on-black</li>
      <li>Useful for text on a dark background</li>
    </ul>
    <p class="note">(Photo <a
    href="https://unsplash.com/photos/XBbX5PYOvC0/info" >‘Surfer and
    the stormy sea’</a> by <a href="https://unsplash.com/@xavifuji"
    >Xavier Nohet</a>)</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide assemble">
   <h2>Shout and grow!</h2>
   <p>Shout:</p>
   <p class="shout">Takahashi method!</p>
   <p>Shout &amp; Grow:</p>
   <p class="shout grow">Animated</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide">
   <h2>Slide transitions</h2>
   <p>The style sheet predefines several transitions:
   <ul>
    <li>fade-in,
    <li>slide-in,
    <li>move-left, etc.
   </ul>
   <p>A transition can be set globally, applying to all slides;
   <p>or
   locally, applying only to the transition between this slide and the
   next.</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide textfit" id=textfit-example>
   <h2>Automatically scale text down</h2>
   <p>[B6+ only.] 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.</p>
   <p>To do this, add class <code>textfit</code> to the slide.</p>
   <p>Too much text…<br>
   Too much text…<br>
   Too much text…<br>
   Too much text…<br>
   Too much text…<br>
   Too much text…<br>
   Too much text…<br>
   Too much text…<br>
   Too much text…<br>
   Too much text…<br>
   Too much text…<br>
   Too much text…<br>
   The last line.</p>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide">
   <h2>Convert to PDF</h2>

   <svg style="display: none">
    <symbol id="page-with-curl" viewBox="-10 0 2610 2048">
     <path fill="currentColor" d="M2395 1533q-39 67 -86 104t-55 37l-977 228q-14 3 -23.5 3t-20.5 1q-177 0 -300 -203t-183 -542l-17 -95q-24 -139 -51 -338t-42 -257l-380 83l-12 1q-40 0 -61 -54t-21 -140q0 -87 38 -152t98 -99t79 -34q6 -2 43 -10l94 -19l132 -25l154 -30l160 -30l152 -29q141 -26 211 -37t126 -11q174 0 268.5 90t129.5 255t62.5 290t50.5 258l29 156q14 79 33 157l210 -43h11q53 0 120 107t67 226q0 85 -39 152zM807 765l32 229q18 132 72.5 342.5t138 331t183.5 120.5l12 -2q18 -4 39.5 -31.5t31.5 -81.5q-24 11 -54 19t-47 8q-25 0 -38.5 -18.5t-13.5 -38.5q0 -37 31 -47.5t121 -34.5q-4 -30 -13 -54t-20 -44q-40 11 -75 17l-77 14l-20 2q-25 0 -38 -17t-13 -38q0 -43 62.5 -55t67.5 -13q-20 -6 -32 -21t-12 -35q0 -22 13.5 -38.5t33.5 -20.5l719 -144q-27 -112 -54 -265t-48 -254l-45 -207l-35 -149q-26 -114 -86.5 -175.5t-186.5 -61.5q-25 0 -50.5 2.5t-53.5 6.5l-80 14q-52 9 -118 21l-294 56l-150 29l-132 27q64 50 108.5 123.5t65.5 152.5t43 237zM2204 1566q51 -29 82 -79t31 -106q0 -52 -22 -105t-66 -106l-887 177q50 58 73 128t23 149q0 24 -6 71.5t-13 52.5zM988.5 1154.5q-11.5 -15.5 -11.5 -35.5q0 -39 43 -52.5t333 -73.5t319 -68l33 -10q16 -5 29.5 -8.5t20.5 -3.5q23 0 37.5 17.5t14.5 37.5q0 21 -16.5 34t-182.5 49.5t-367.5 82.5t-218.5 46q-22 0 -33.5 -15.5zM984 844q-28 0 -43 -16.5t-15 -38.5q0 -46 59 -47.5t194 -35.5l103 -25q90 -23 205 -39.5t156 -29.5t50 -13q21 0 34.5 15.5t13.5 33.5q0 28 -44.5 43.5t-138.5 32.5l-80 15q-81 14 -234.5 55.5t-259.5 49.5zM962 543q-21 0 -32 -14t-11 -31q0 -41 44 -45.5t163 -28.5l170 -33q84 -16 168.5 -31.5t169.5 -27.5h7q19 0 28.5 12.5t9.5 28.5q0 36 -37 43t-255.5 52.5t-418.5 74.5h-6zM847 295.5q-11 -14.5 -11 -33.5q0 -25 15.5 -41.5t188.5 -53t463 -72.5h7q20 0 31 12.5t11 29.5q0 37 -39 48t-192 29t-292 57t-151 39q-20 0 -31 -14.5z" />
   </svg>

   <div class="columns">
    <div>
     <p>Print in <em>portrait</em> mode to get:
     <ul>
      <li>multiple slides per page
      <li>notes between the slides
     </ul>
     <div style="border: thin solid; padding: 0.6em 0.6em 0">
      <p><svg class=icon><use xlink:href="#page-with-curl"></use></svg>
       Try it! [W3C team only]</p>
      <p><a href="Overview.html,pdf" title="slides + notes"
       >A4</a>
       or <a href="Overview.html,pdfl" title="slides + nodes"
       >Letter</a></p>
     </div>
    </div>
    <div>
     <p>Print in <em>landscape</em> mode to get:</p>
     <ul>
      <li>one slide = one page
      <li>no notes
     </ul>
     <div style="border: thin solid; padding: 0.6em 0.6em 0">
      <p><svg class=icon><use xlink:href="#page-with-curl"></use></svg>
       Try it! [W3C team only]</p>
      <p><a href="Overview.html,pdf?size=A4+landscape" >PDF
       slides</a></p>
     </div>
    </div>
   </div>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <section class="slide final">
   <h2>Conclusion</h2>
   <ol>
    <li>Making slides is easy</li>
    <li>Questions?</li>
   </ol>
  </section>

  <section class=comment>
   <p>Notes.</p>
  </section>


  <!--=============================================================
			     User manual
  ==============================================================-->

  <section class="long comment" id="manual">
   <h1>User manual</h1>

   <h2 id="setting-up">Setting up your slides</h2>

   <p>This is a template for slides
   for <a href="https://www.w3.org/news-events/w3c-ac/ac-2026/" >AC
   2026</a>. It uses either the <a href="http://shwr.me/" >Shower</a>
   script (version 3.2) or
   the <a href="https://www.w3.org/Talks/Tools/b6plus/" >b6+</a>
   script for the presentation. (To enable Shower, uncomment the
   <strong>script</strong> tag in the HTML source.)</p>

   <p>If you cannot put them
   online yourself, you can download a zip (see below) with everything
   needed to develop slides offline and ask <a
   href="mailto:bert@w3.org">Bert Bos</a> for help uploading the
   slides once they are ready.</p>

   <p>If you cannot use HTML, there is
   a <a href="https://docs.google.com/presentation/d/19UbOTXtXmAf0vjt0s-jJ_WBjwlBhRlMdE6L71cEPkmg/edit?usp=sharing"
   >template available on Google Slides</a> (thanks to Coralie) for
   making slides in the Google Slides format. That template can also
   be downloaded in Powerpoint (.pptx) format and used in Powerpoint,
   Keynote and LibreOffice.</p>

   <h3>Developing slides online (W3C team)</h3>

   <p>Writing slides <strong>online</strong> (with JigEdit, WebDav or
   CVS) is only available to the W3C team. Make a directory under <a
   href="https://www.w3.org/2026/Talks/AC/"
   >https://www.w3.org/2026/Talks/AC/</a>. Copy the <a
   href="https://www.w3.org/2026/Talks/AC/Templates/Overview.html"
   >Overview.html</a> from <a
   href="https://www.w3.org/2026/Talks/AC/Templates/"
   >https://www.w3.org/2026/Talks/AC/Templates/</a> into your
   directory and edit the content, or just use it as an example.</p>

   <p><em>Experimental: If you prefer writing slides in Markdown,
   try <a href="https://www.w3.org/Talks/Tools/b6plus/md-editor.html?stylesheet=https://www.w3.org/2026/Talks/AC/Templates/slides.css&amp;manual=https://www.w3.org/2026/Talks/AC/Templates/Overview.html%23manual"
   >this dedicated editor</a>. (It does not automatically put slides
   online. Use the ‘Export HTML’ button to export your slides to a
   file and then put that file online.)</em>

   <h3>Developing slides offline</h3>

   <p>If you develop your slides <strong>offline</strong> (or plan to
   present them without a network), then download this <a
   href="https://www.w3.org/2026/Talks/AC/Templates/AC-2026-slides-template.zip"
   >zip file</a>. Unpacking it creates the following directories and
   files:</p>

   <ul class="tree">
     <li><strong>AC-2026/</strong>
      <ul>
       <li><strong>Templates/</strong>
	<ul>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/NotoSans-Italic-VariableFont_wdth,wght.woff2">NotoSans-Italic-VariableFont_wdth,wght.woff2</a> (a font)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/NotoSans-VariableFont_wdth,wght.woff2">NotoSans-VariableFont_wdth,wght.woff2</a> (a font)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/Overview.html">Overview.html</a> (this file)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/b6plus.js">b6plus.js</a> (a JavaScript file)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/banner1.webp">banner1.webp</a> (an image)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/bg-dark.svg">bg-dark.svg</a> (a background image)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/bg-light.svg">bg-light.svg</a> (a background image)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/gutenberg_f9f9f9.jpg">gutenberg_f9f9f9.jpg</a> (an image)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/iframe-fixup.js">iframe-fixup.js</a> (a JavaScript file)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/linen.png">linen.png</a> (an image)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/part-dark.svg">part-dark.svg</a> (a background image)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/part-light.svg">part-light.svg</a> (a background image)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/piechart.png">piechart.png</a> (an image)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/shower.js">shower.js</a> (a JavaScript file)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/simple-car-icon.svg">simple-car-icon.svg</a> (an image)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/slides.css">slides.css</a> (a style sheet)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/slides.json">slides.json</a> (a JSON file)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/two-panes-dark.svg">two-panes-dark.svg</a> (a background image)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/two-panes-light.svg">two-panes-light.svg</a> (a background file)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/w3c-black.svg">w3c-black.svg</a> (the W3C logo in black)</li>
	 <li><a href="https://www.w3.org/2026/Talks/AC/Templates/w3c-white.svg">w3c-white.svg</a> (the W3C logo in white)</li>
	</ul>
       </li>
      </ul>
     </li>
   </ul>

   <p>Make a directory for your own slides under
   <strong>AC-2026</strong>. You can copy the
   <strong>Overview.html</strong> 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.</p>

   <p><em>Experimental: If you prefer writing slides in Markdown,
   try <a href="https://www.w3.org/Talks/Tools/b6plus/md-editor.html?stylesheet=https://www.w3.org/2026/Talks/AC/Templates/slides.css&amp;manual=https://www.w3.org/2026/Talks/AC/Templates/Overview.html%23manual"
   >this dedicated editor</a> and use the ‘Export HTML’ button to
   create your slide deck.</em></p>

   <p>If you are able to upload your slides, put your directory with
   all that it contains under <a
   href="https://www.w3.org/2026/Talks/AC/"
   >https://www.w3.org/2026/Talks/AC/</a>. There is no need to
   upload the <strong>Templates</strong> directory. It is is already
   there.</p>

   <h2 id="features">Writing slides</h2>

   <h3>Slides</h3>

   <p>Each slide is a <strong>section</strong>
   element<sup><a href="#note1" >*</a></sup> with a class
   of <strong >slide</strong>:</p>

   <pre>&lt;section class="slide">
  ... slide content here...
&lt;/section></pre>

   <p>Inside the slides, use normal HTML elements (<strong>p, ul,
   em,</strong> etc.).</p>

   <p class="note" id="note1">*) Note for advanced users: Although not
   shown in this template, it is in fact possible to use other
   elements than <strong>section</strong>. One common choice
   is <strong>div.</strong></p>

   <h3>Speaker notes or comments</h3>

   <p>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 <strong>comment</strong>:</p>

   <pre>&lt;section class="comment">
  ... text here...
&lt;/section></pre>

   <h3 id=clear>Slide numbers</h3>

   <p>If a slide should <em>not</em> have a slide number and an image banner,
   add the class <strong>clear</strong>:</p>

   <pre>&lt;section class="slide clear">
  ... slide content here...
&lt;/section></pre>

   <p>On <a href="#title-slides">title slides</a>, this only
   removes the number, not the banner.</p>

   <p>Adding the class <strong>clear</strong> on
   the <strong>body</strong> element omits the slide number and the
   side banner from <em>all</em> slides.

   <h3 id="title-slides">Title slides (cover slides)</h3>

   <p>For cover slides (the title slide or separator slides between
   parts of a presentation), add a class <strong>cover</strong>. You
   can combine <strong>cover</strong> and <strong>clear</strong>.
   E.g.:</p>

   <pre>&lt;section class="slide cover clear">
  &lt;h1>My presentations&lt;h1>
  &lt;address>Peter W. Slidemaker&lt;/address>
&lt;/section></pre>

   <h3 id="final-slides">Final slide</h3>

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

   <pre>&lt;section class="slide final clear">
  &lt;h2>Conclusions&lt;h2>
  …
&lt;/section></pre>

   <h3 id="part-slides">Part titles</h3>

   <p>A slide with a class of <code>part</code> 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.

   <h3 id=side-image>Illustrations on the left or right</h3>

   <p>Slides with narrower text and an illustration on the left or
   right can be made by adding the class <strong>side</strong> to the
   slide. Inside the slide there should be exactly one element that
   also has a class of <strong>side</strong> (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).</p>

   <p>To put an image on the left:</p>

   <pre>&lt;section class="slide side">
  &lt;img src="..." alt="..." class="side">
  ... slide content here...
&lt;/section></pre>

   <p>To put the image on the right instead, add class <strong>right</strong>
   (which may be abbreviated to <strong>r</strong>):</p>

   <pre>&lt;section class="slide side <b>r</b>">
  &lt;img src="..." alt="..." class="side">
  ... slide content here...
&lt;/section></pre>

   <p>Add class <strong>big</strong> to the slide for a bigger image.
   To put the image on the left:</p>

   <pre>&lt;section class="slide side <b>big</b>">
  &lt;img src="..." alt="..." class="side">
  ... slide content here...
&lt;/section></pre>

   <p>And on the right:</p>

   <pre>&lt;section class="slide side <b>r</b> big">
  &lt;img src="..." alt="..." class="side">
  ... slide content here...
&lt;/section></pre>

   <p>The image can be stretched to the edges of the slide by adding a
   class <strong>cover</strong>. 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<sup><a href="#note2">*</a></sup>.</p>

   <pre>&lt;section class="slide side big">
  &lt;img src="..." alt="..." class="side <b>cover</b>">
  ... slide content here...
&lt;/section></pre>

   <p class="note" id="note2">*) Note for advanced users: It is
   possible to indicate which sides should be cropped: add an
   attribute like <strong>style="object-position: 20% 60%"</strong> 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.)</p>

   <p>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 <code>float</code>, resp. <code>float left</code>
   (or <code>float l</code>). 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.</p>

   <p>Sometimes it looks better to give such images a thin border.
   Adding the class <code>border</code> will do that.</p>

   <h3>Figures</h3>

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

   <pre>&lt;figure&gt;&lt;img src="..." alt="..."&gt;&lt;figure&gt;</pre>

   <p>If the image is not accessible, use a <strong>details</strong>
   element instead and add a description, like this:</p>

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

   <p>The description becomes visible when the user clicks on the
   image. (The <a href="#figures">slide above</a> shows an image of a
   pie chart that is described by a table with the same data.)</p>

   <h3 id=autosize>Automatic sizing of images</h3>

   <p>Setting the class <strong>autosize</strong> on an image
   instructs b6+ (but not Shower) to scale down the image if the
   slide's content is
   otherwise too tall:</p>

   <pre>&lt;img src="my-image.png" alt="..." class=autosize&gt;</pre>

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

   <h3>Progress bar</h3>

   <p>If you want a progress bar during the slide presentation, add an
   empty <strong>div</strong> with a class
   of <strong>progress</strong>. (This only works with b6+.) It can be
   put before the first slide
   or after the last, but there should be at most one such element in
   the file:</p>

   <pre>&lt;div class="progress">&lt;/div></pre>

   <p>The progress bar will show as a small square moving along a line
   at the bottom of the slides. Its position indicates the position of
   the current slide in the slide deck.</p>

   <p>B6+ also sets two custom style
   variables <strong>--progress</strong>
   and <strong>--progress0</strong> with values between 0 and 1 on
   the <strong>body</strong>. These may be useful if you write your
   own style rules for a progress indicator. The difference between
   them is that the former has a value of 1/N (where N is the number
   of slides) when the first slide is shown, while the latter is 0 in
   that case. Both increase linearly to reach 1.0 when the last slide
   is shown.</p>

   <h3 id=incremental-display>Incremental display</h3>

   <p>To progressively reveal elements on a slide, put a class
   of <strong>next</strong> 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.:</p>

   <pre>&lt;ul>
  &lt;li>This item is visible when the slide appears
  &lt;li class="next">This item is not immediately visible
  &lt;li class="next">This is the third item to appear
&lt;/ul>
&lt;p class="next">This is the last element to appear</pre>

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

   <pre>&lt;li class="next emerge">...</pre>

   <p>or on an ancestor, e.g.:</p>

   <pre>&lt;ul class="emerge">
  &lt;li class="next">...</pre>

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

   <p>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.:</p>

   <pre>&lt;ul class="emerge strong dim">
  &lt;li class="next">...</pre>

   <h3 id=slipshow>‘Slipshow’ presentations</h3>

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

   <p>This mode of presentation is called a ‘slipshow’ by its
   inventor, Paul-Elliot Anglès d'Auriac.
   (His <a href="https://github.com/panglesd/slipshow" >program is on
   GitHub</a>.) B6+ only implements a simple variant.</p>

   <p>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 <a href="#in-place">updating elements in
   place</a>.)</p>

   <h3 id=automatic>Automatic slide shows</h3>

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

   <pre>&lt;section class="slide" data-timing="1:03">
&lt;section class="slide" data-timing="20.5s">
&lt;section class="slide" data-timing="0.33m"></pre>

   <p>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.)</p>

   <p>If the slide contains <a href="#incremental-display">incremental
   elements</a>, 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.:</p>

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

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

   <p>You can set a default time on the <strong>body</strong> element,
   e.g.:</p>

   <pre>&lt;body data-timing="20.2s"&gt;</pre>

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

   <p>Setting the <strong>data-timing</strong> attribute to 0
   indicates that the slide or element does <em>not</em> automatically
   advance.</p>

   <p>The slide show can also run in a loop,
   see <a href="#loop">‘Slide show in an endless loop’</a>.

   <h3>Two columns</h3>

   <p>To put elements side by side in two columns, make an element
   (a <strong>div, ul</strong> or any other element) with
   class <strong>columns</strong>. 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.</p>

   <pre>&lt;ul class="columns">
  &lt;li>First goes on the left&lt;/li>
  &lt;li>Second goes on the right&lt;/li>
&lt;/ul></pre>

   <h3>Two panes</h3>

   <p>Setting the class <code>two-panes</code> 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.)</p>

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

   <h3>Small text</h3>

   <p>Less important text can be shown in a smaller font by giving it
   a class of <strong>note</strong>:</p>

   <pre>&lt;p class="note">Note that this is harder to read&lt;/p></pre>

   <h3>Extra big text: shout</h3>

   <p>To make text extra big, give it a class
   of <strong>shout</strong>, e.g.:</p>

   <pre>&lt;p class=shout>Hurray!</pre>

   <p>(Sometimes this is referred to as
   the <a href="https://en.wikipedia.org/wiki/Takahashi_method"
   >‘Takahashi method’</a>: Instead of sentences or graphics, a slide
   only contains one or two keywords. The narrative comes from the
   speaker.)</p>

   <h3>Animated text: grow</h3>

   <p>To draw extra attention to some text or an image, it can be
   animated. Adding a class of <strong>grow</strong> 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>

   <pre>&lt;p class=grow&gt;See?</pre>

   <h3 id=textfit>Automatic text fit</h3>

   <p>B6+ (but not Shower) can automatically reduce the font size of a
   slide to fit
   long text. To request this, add the class <strong>textfit</strong>
   on a slide (or on the <strong>body,</strong> if all slides need
   this). See the <a href="#textfit-example">example slide</a>.</p>

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

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

   <h3>Automatic line numbering</h3>

   <p>Pre-formatted text (in a <strong>pre</strong>) can be given line
   numbers by adding the class <strong>numbered</strong>:</p>

   <pre>&lt;pre class="numbered"></pre>

   <p>No more than 20 lines will be numbered. (In the normal font
   size, a slide fits 13 lines.)</p>

   <h3>Lists with icons</h3>

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

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

   <h3>3×3 Grid</h3>

   <p>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 <strong>place</strong>. On its own, <strong>place</strong> puts
   the element in the center. By adding classes <strong>top, right,
   bottom</strong> and <strong>left</strong> the element can be placed
   in one of the eight other positions.</p>

   <pre>&lt;div class="place">Put this in the center&lt;/div>
&lt;div class="place bottom">Put this bottom center&lt;/div>
&lt;div class="place top right">In the top right&lt;/div></pre>

   <p>The direction classes can also be abbreviated to <strong>t, r,
   b</strong> and <strong>l</strong>.</p>

   <h3 id=background-images>Image overlays (background images)</h3>

   <p>To put an image behind the text of a slide, use
   an <strong>img</strong> with a class of <strong>cover</strong>:</p>

   <pre>&lt;img class="cover" src="..." alt="..."></pre>

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

   <p>With a class of <strong>fit</strong> instead
   of <strong>cover</strong>, 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.</p>

   <pre>&lt;img class="fit" src="..." alt="..."></pre>

   <p>This works both for normal slides and title slides (slides with
   a class of <strong>cover</strong>). The slide number
   is not obscured by the image. (But you can use <a href="#clear"
   ><strong >clear</strong></a> on the slide to hide it.)</p>

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

   <h3 id=darkmode>Forcing white text or black text</h3>

   <p>The colors of the slides depend on whether ‘dark mode’ is in
   effect in the operating system: slides have 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:
   <strong>darkmode</strong> (for white-on-black) or
   <strong>lightmode</strong> (for white-on-black). E.g.:</p>

   <pre>&lt;section class="slide darkmode"></pre>

   <p>Other colors (titles, list bullets, links, etc.) also
   become fixed on such slides.</p>

   <p>To make <em>all</em> slides white on black, set the
   class <strong>darkmode</strong> on the <strong>body</strong> element.
   In that case you can use the class <strong>lightmode</strong> on
   individual slides to give them black-on-white text.</p>

   <h3>Inverting image colors in dark mode</h3>

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

   <pre>&lt;img class="can-invert" src="..." alt="..."></pre>

   <p>This also works for SVG images and other things.</p>

   <h3>Video and audio</h3>

   <p>Videos (with the <strong>video</strong> element) and audios
   (with the <strong>audio</strong> element) on a slide can be made to
   play automatically when the slide opens, by giving them
   an <strong>autoplay</strong> attribute. (Only with b6+, not with
   Shower.) E.g.:</p>

   <pre>&lt;video src="myvideo.mp4" autoplay>&lt;/video></pre>

   <p>Videos can be used as background for the slide with
   the <strong>cover</strong> or <strong>fit</strong> classes. (See
   their description under <a href="#background-images" >‘Image
   overlays’</a>.) The class <strong>fit</strong> is also useful
   simply to make the video as large as possible if it is the only
   thing on the slide.</p>

   <p>However, if you do use one of those classes, it is best to use
   the <strong>autoplay</strong> attribute and to avoid
   the <strong>controls</strong> 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 <strong>controls</strong>, either present with
   a <a href="#second-window" >second window</a> (see below) or set
   a <a href="#automatic" ><strong>data-timing</strong></a> attribute
   on the slide, so that it advances to the next slide automatically
   after a given time.)</p>

   <h3>Slide transitions</h3>

   <p>By default, each slide just replaces the previous one, but there
   are several predefined slide transitions. You can set a transition
   on the <strong>body</strong> element to apply it to all slides:</p>

   <pre>&lt;body class="shower fade-in"&gt;</pre>

   <p>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 <em>disappears.</em>)</p>

   <pre>&lt;section class="slide wipe-left"&gt;</pre>

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

   <dl>
    <dt>fade-in</dt>
    <dd>The new slide appears faint at first and gets more opaque
    until it completely obscures the previous slide.</dd>

    <dt>slide-in</dt>
    <dd>The new slide moves in from the left, while the previous slide
    moves back to the left.</dd>

    <dt>slide-out</dt>
    <dd>The current slide moves out to the left, revealing the new
    slide.</dd>

    <dt>move-left</dt>
    <dd>The new slides move in from the right while the old slide
    moves out to the left.</dd>

    <dt>slide-up</dt>
    <dd>The old slide moves up, revealing the new slide.</dd>

    <dt>move-up</dt>
    <dd>The old slide moves up and the new slide moves in from the
    bottom.</dd>

    <dt>flip-up</dt>
    <dd>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.</dd>

    <dt>flip-left</dt>
    <dd>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.</dd>

    <dt>center-out</dt>
    <dd>A small circle appears in the middle of the old slide and
    reveals the new slide. The circle grows until it covers the whole
    slide.</dd>

    <dt>wipe-left</dt>
    <dd>The new slide moves in from the right, until it covers the old
    slide.</dd>

    <dt>zigzag-left</dt>
    <dd>A zigzag pattern moves in from the right. To the left is the
    old slide, to the right the new one.</dd>

    <dt>zigzag-right</dt>
    <dd>A zigzag pattern moves in from the left. To the left is the
    new slide, to the right the old one.</dd>

    <dt>cut-in</dt>
    <dd>The new slide moves in from the top left and covers the old
    slide.</dd>

    <dt>assemble</dt>
    <dd>The contents of the new slide fly in from all directions.</dd>
   </dl>

   <h3>Accessibility</h3>

   <p>When you present while using a screen reader, the screen reader
   will speak each slide as soon as it appears. (Shower 3.2 repeats
   the slide that just disappeared before it speaks the new slide. B6+
   only speaks the new slide.) On some browsers, the
   script creates an element with
   attributes <strong>role=region</strong>
   and <strong>aria-live=assertive</strong> for that purpose.</p>

   <p>Additionally, when using b6+, pressing the <strong>N</strong>
   makes the screen reader speak
   the speaker notes for the current slide. The next presses speak the
   next slide, the current incremental element, and the current slide
   (skipping any that don't exist).</p>

   <p>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.:</p>

   <pre>&lt;div role="region" aria-live="assertive"&gt;
  <span lang=fr>Terminé.</span>
&lt;/div&gt;</pre>

   <h3>Exporting to PDF</h3>

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

   <dl>
    <dt>portrait</dt> <dd>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.</dd>

    <dt>landscape</dt> <dd>When the output is in landscape mode, each
    page consists of one slide, without page margins, and without the
    comments between the slides.</dd>
   </dl>

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

   <h2 id="presenting">Presenting</h2>

   <h3 id="keystrokes">Mouse gestures and keystrokes</h3>

   <p>To present the slides, load them into a browser that supports
   JavaScript and CSS and, when using b6+, then either click the play
   (▶) button, press
   the <strong>A</strong> key, double-click on a slide or touch the
   screen with three fingers (on certain devices).</p>

   <p>If you are using Shower instead of b6+, press
   <strong>Shift+F5</strong> (<strong>Command+Enter</strong> on Mac)
   or click on a slide.</p>

   <p>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. With b6+, <strong>F1</strong> or <strong>F</strong> toggles
   full
   screen mode. <strong>C</strong> shows a clicakble table of
   contents. The <strong>? (question mark)</strong> key shows a list
   of available commands.</p>

   <p>If you have <a href="#automatic">automatically advancing
   slides</a>, you can pause the slide show with
   the <strong>P</strong> key or the <strong>Play/Pause</strong> key,
   if your keyboard has it. You can also navigate to a different slide
   and resume from there.</p>

   <p>To exit the presentation, press the <strong>A</strong> key (b6+
   only) or the <strong>Esc</strong> key.</p>

   <p>For more keys, see the documentation for
   <a href="https://www.w3.org/Talks/Tools/b6plus/#navigation" >keys
   &amp; gestures in b6+</a> or
   <a href="https://github.com/shower/shower/blob/main/docs/shortcuts.md"
   >keyboard shortcuts in Shower</a>.</p>

   <h3>Dark mode</h3>

   <p>While in slide mode, you can press the <strong>D</strong> (only
   with b6+) key to
   switch between black-on-white and white-on-black. (This temporarily
   adds or removes the <strong>darkmode</strong> class
   on <strong>body</strong>, see <a href="#darkmode" >‘Forcing white
   text or black text’</a>.) When the
   computer is already in dark mode, the key instead switches the
   slides to light mode (and adds the class <strong>lightmode</strong>
   on the <strong>body</strong>).</p>

   <h3 id="second-window">Using two screens or two windows</h3>

   <p>B6+ (but not Shower) 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 preview
   the next slide and any notes on the other.</p>

   <p>Open the second window by pressing the <strong>2</strong> key,
   or the <strong>⧉</strong> button in index mode.</p>

   <h3 id="drawing">Drawing on the slides</h3>

   <p>When using b6+, after pressing the <strong>W</strong> key, you
   can draw on the
   current slide with the mouse. Press <strong>W</strong> again to
   clear the drawing.</p>

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

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

   <pre>.b6-canvas {color: red}</pre>

   <h3 id="clocks">Clocks to show remaining time</h3>

   <p>When using a second screen (b6+ only), 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, by adding suitable markup and/or CSS rules.)</p>

   <p>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:</p>

   <dl>
    <dt>duration=...</dt>
    <dd>
     <p>To set the duration to, e.g., 45 minutes,
     add <code>duration=45</code> to the class attribute of
     the <strong>body</strong>. Example:</p>

     <pre>&lt;body class="duration=45"&gt;</pre>
    </dd>

    <dt>warn=...</dt>
    <dd>
     <p>To set the warning to, e.g., one minute, put this in the class
     of the <strong>body</strong>:</p>

     <pre>&lt;body class="warn=1"&gt;</pre>
    </dd>
   </dl>

   <p>The duration and warning time can be specified as a number of
   minutes (e.g., ‘15’), as hours and minutes (e.g., ‘1:15’), as a
   number with ‘h’, ‘m’ or ‘s’ (e.g., ‘15m’ for 15 minutes, ‘300s’ for
   300 seconds, or ‘1.5h’ for 1.5 hours). Note that this is slightly
   different from the <a href="#automatic">data-timing</a> attribute,
   where unitless numbers are in seconds and ‘1:15’ means minutes and
   seconds.</p>

   <p>B6+ has two kinds of clocks built-in, but also provides
   primitive elements with which to build your own clock.</p>

   <p>To get one of the built-in clocks, make an empty element with a
   class of either <strong>fullclock</strong>
   or <strong>clock</strong>. 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.</p>

   <p>When you make your own clock, you can make use of the following
   classes and attributes:</p>

   <dl>
    <dt>hours-real, minutes-real, seconds-real</dt>
    <dd>
     <p>B6+ will fill all elements with a class
     of <strong>hours-real</strong> 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: <strong>00</strong>
     to <strong>23</strong>.</p>

     <p>Similarly, all elements with a class
     of <strong>minutes-real</strong> or <strong>seconds-real</strong>
     will contain the current minutes or seconds, respectively, also
     always as two digits, <strong>00</strong> to <strong>59</strong>.
     E.g.:</p>

     <pre>&lt;b class=hours-real&gt;00&lt;/b&gt;:&lt;b class=minutes-real&gt;00&lt;/b&gt;</pre>
    </dd>

    <dt>hours-used, minutes-used, seconds-used</dt>
    <dd>
     <p>Elements with these classes will contain the time since the
     slides where loaded (or since the clock was reset,
     see <strong>timereset</strong> below). E.g.:</p>

     <pre>&lt;b class=minutes-used&gt;00&lt;/b&gt;'&lt;b class=seconds-used&gt;00&lt;/b&gt;"</pre>
    </dd>

    <dt>hours-remaining, minutes-remaining, seconds-remaining</dt>
    <dd>
     <p>Ditto, but for the time still remaining. If the used time
     exceeds the duration, these times will be shown as 00.</p>
    </dd>

    <dt>timeinc, timedec</dt>
    <dd>
     <p>An element with a class of <strong>timeinc</strong> will act as
     a button that increments the duration, and thus the remaining
     time, by one minute. <strong>timedec</strong> decrements the
     duration by one minute. E.g.:</p>

     <pre>&lt;button class=timeinc&gt;+1 min&lt;/button&gt;
&lt;button class=timedec&gt;−1 min&lt;/button&gt;</pre>
    </dd>

    <dt>timepause</dt>
    <dd>
     <p>An element with this class acts as a toggle to pause &amp;
     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.:</p>

     <pre>&lt;button class=timepause>pause&lt;/button&gt;</pre>
    </dd>

    <dt>timereset</dt>
    <dd>
     <p>An element with this class acts as a button to restart the
     clocks, i.e., to set the used time to zero. Example:</p>

     <pre>&lt;button class=timereset>reset&lt;/button&gt;</pre>
    </dd>
   </dl>

   <p>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 <strong>body</strong>. 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:</p>

   <dl>
    <dt>--time-factor</dt>
    <dd>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.</dd>

    <dt>data-time-factor</dt>
    <dd>This attribute on <strong>body</strong> 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.</dd>

    <dt>time-warning</dt>
    <dd>When the remaining time is less than the warn time, b6+ will
    add this class to the classes on <strong>body</strong>.</dd>
   </dl>

   <h3 id="full">Starting in slide mode</h3>

   <p>Add ‘?full’ at the end of the URL (but before any fragment ID)
   to open the slides in slide mode instead of index mode.</p>

   <p>To open in slide mode at a specific slide, add ‘?full’ and the
   ID or the number of the slide,
   e.g., <a href="?full#place">Overview.html?full#place</a>
   or <a href="?full#20">Overview.html?full#20</a>.</p>

   <h3 id="hidemouse">Hiding the mouse pointer</h3>

   <p>When you don't want the mouse pointer to remain on the screen in
   slide mode, add the class <strong>hidemouse</strong> on
   the <strong>body</strong> element. (B6+ only.) If the mouse does
   not move for
   5 seconds, the pointer is made invisible. It comes back as soon as
   the mouse is moved.</p>

   <pre>&lt;body class="hidemouse"&gt;</pre>

   <p>You can also set a different timeout in seconds. E.g, to set a
   short timeout of 1.5 seconds:</p>

   <pre>&lt;body class="hidemouse=1.5"&gt;</pre>

   <h3 id="noclick">Ignore mouse clicks</h3>

   <p>With b6+, 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 <strong>noclick</strong> on the <strong>body</strong>
   element.</p>

   <pre>&lt;body class="noclick"&gt;</pre>

   <h3 id=loop>Slide show in an endless loop</h3>

   <p>With b6+, if you add the class <strong>loop</strong> on
   the <strong>body</strong>, the slide show becomes a loop: On the
   last slide, any click, keypress or gesture that normally advances
   to the next slide, now wraps around and shows the first slide.</p>

   <p>This may be most useful with <a href="#automatic">automatic
   slide shows</a> (the <code>data-timing</code> attribute). And
   possibly with ‘?full&amp;static’ at the end of the URL.
   (See <a href="#full">Starting in slide mode</a>
   and <a href="#embedding">Embedding slides in other
   documents</a>.)</p>

   <h2 id="embedding">Embedding slides in other documents</h2>

   <p>You can embed a single slide in another document with the help
   of an <code>&lt;object&gt;</code> or <code>&lt;iframe&gt;</code>
   element. Just add ‘?full’ at the end of the URL, followed by ‘#’
   and the ID or number of the desired slide. With b6+, you can also
   avoid that a keypress or click accidentally changes the slide, by
   adding ‘&amp;static’.. E.g.:</p>

   <pre>&lt;object data="Overview.html?full&amp;static#18">...&lt;/object></pre>

   <p>or</p>

   <pre>&lt;iframe src="Overview.html?full&amp;static#18">&lt;/iframe></pre>

   <p>Adding ‘?static’ on its own to the URL is also possible: It
   shows all slides in index mode and disables switching to slide
   mode.</p>

   <p>Note that using ‘?full&amp;static’ on
   an <a href="#automatic">automatic slide show</a> plays the whole
   slide show without the possiblility to pause it.</p>

   <h2>Speaking guidelines</h2>

   <!-- @@ Is there a new page for AC 2026? -->
   <p>The page <a
   href="https://www.w3.org/2025/11/TPAC/speaking.html"
   >‘Speaking guidelines’</a> of the TPAC 2025 site contains
   recommendations for presenters.</p>
  </section>

  <footer class="long comment">
   <address>Template created 22 January 2026 by <a
   href="mailto:bert@w3.org">Bert Bos</a>.
   This file last modified
   $Date: 2026/02/18 02:14:58 $ by $Author: bbos $.</address>
  </footer>
 </body>
</html>
<!-- Local Variables: -->
<!-- sgml-basic-offset: 1 -->
<!-- End: -->
