<!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> -->
 </head>
 <body class="shower fade-in duration=15">

  <section class="long comment">
   <p>This is a template for slides for <a
   href="https://www.w3.org/2025/04/AC/">AC 2025</a>.</p>

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

   <p><strong>Reader(s)</strong><br>
   <!-- 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%%</address>
   <p>AC 2025<br>
     Sophia-Antipolis, France &amp; online<br>
     20 March / 7–8 April 2025</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="#lists">slide 2</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>Combining class=incremental with class=in-place
     yields elements that are displayed one by one, with each one
     replacing the previous. Example:
   <ol class="incremental in-place">
     <li>First element
     <li>The second replaces the first<br>
       until it itself is replaced
     <li>The third replaces the second.
   </ol>
   <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>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 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 r">
   <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 clear">
   <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 clear">
   <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" height=405
	  class=can-invert>
    </summary>
    <p>The description of the pie chart, here as a table:
    <table class=striped>
     <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" 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">
   <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>
   <p class="grow">Grow: Don't use this too often!</p>
  </section>

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


  <section class="slide">
   <h2>Slide transitions</h2>
   <p>The style sheet predefines several transitions: fade-in, slide-in,
   move-left, etc.</p>
   <p>A transition can be set globally, applying to all slides; 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>If the text doesn't fit, and you really cannot reduce it nor
    split the slide, you can ask b6+ to shrink the font size until it
    fits.</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/2025/04/AC/" >AC 2025</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>All slides have to be online before</p>

   <ul>
    <li>12 March, for slides for the Intro session</li>
    <li>31 March, for slides for the AC days</li>
   </ul>

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

   <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/2025/Talks/AC/"
   >https://www.w3.org/2025/Talks/AC/</a>. Copy the <a
   href="https://www.w3.org/2025/Talks/AC/Templates/Overview.html"
   >Overview.html</a> from <a
   href="https://www.w3.org/2025/Talks/AC/Templates/"
   >https://www.w3.org/2025/Talks/AC/Templates/</a> into your
   directory and edit the content, or just use it as an example.</p>

   <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/2025/Talks/AC/Templates/AC-2025-slides-template.zip"
   >zip file</a>. Unpacking it creates the following directories and
   files:</p>

   <ul class="tree">
     <li><strong>AC-2025/</strong>
      <ul>
       <li><strong>Templates/</strong>
	<ul>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/b6plus.js"
	 >b6plus.js</a> (a JavaScript file)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/cover-dark.svg"
	 >cover-dark.svg</a> (an SVG image)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/cover.svg"
	 >cover.svg</a> (an SVG image)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/gutenberg_f9f9f9.jpg"
	 >gutenberg_f9f9f9.jpg</a> (a JPEG image)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/iframe-fixup.js"
	 >iframe-fixup.js</a> (a JavaScript file)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/Lato-BoldItalic.woff"
	 >Lato-BoldItalic.woff</a> (a Web font)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/Lato-Bold.woff"
	 >Lato-Bold.woff</a> (a Web font)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/Lato-Italic.woff"
	 >Lato-Italic.woff</a> (a Web font)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/Lato-Regular.woff"
	 >Lato-Regular.woff</a> (a Web font)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/linen.png"
	 >linen.png</a> (a PNG image)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/Montserrat-BlackItalic.woff"
	 >Montserrat-BlackItalic.woff</a> (a Web font)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/Montserrat-Black.woff"
	 >Montserrat-Black.woff</a> (a Web font)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/Montserrat-BoldItalic.woff"
	 >Montserrat-BoldItalic.woff</a> (a Web font)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/Montserrat-Bold.woff"
	 >Montserrat-Bold.woff</a> (a Web font)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/Overview.html"
	 >Overview.html</a> (this file)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/piechart.png"
	 >piechart.png</a> (a PNG image)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/shower.js"
	 >shower.js</a> (a JavaScript file)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/side-dark.svg"
	 >side-dark.svg</a> (an SVG image)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/side.svg"
	 >side.svg</a> (an SVG image)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/simple-car-icon.svg.svg"
	 >simple-car-icon.svg.svg</a> (an SVG image)</li>
	 <li><a href="https://www.w3.org/2025/Talks/AC/Templates/slides.css"
	 >slides.css</a> (a CSS file)</li>
	</ul>
       </li>
      </ul>
     </li>
   </ul>

   <p>Make a directory for your own slides under
   <strong>AC-2025</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>If you are able to upload your slides, put your directory with
   all that it contains under <a
   href="https://www.w3.org/2025/Talks/AC/"
   >https://www.w3.org/2025/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 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>

   <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>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>
   and <a href="#final-slides">final slides</a> (see below), 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=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>How big should images be? It actually depends on the size of the
   screen on which the slide is displayed. An image with too few
   pixels becomes blurry, but a big image takes long to load. It is
   actually possible to make images in several sizes and let the
   browser download the best one for the current screen, but that is
   too long to explain here. (Check out the <strong>picture</strong>
   element of HTML.) As a compromise, let's assume the slides are
   displayed full-screen on an <abbr title="High Definition">HD</abbr>
   projector (or an HDTV).</p>

   <p>An HD projector has 1920×1080 pixels. A side image on such a
   screen occupies a space of 982 pixels high and 463 pixels wide (or
   986 pixels wide with class <b>big</b>). So that leads to the
   following cases:</p>

   <ol>
     <li>A normal side image (without <b>big</b> and
     without <b>cover</b>): Make an image that is 463 pixels wide and
     no more than 982 pixels high; or an image that is 982 pixels high
     and no more than 463 pixels wide.</li>

     <li>A <b>big</b> side image (without <b>cover</b>): Make an image
     that is 986 pixels wide and no more than 982 pixels high; or an
     image that is 982 pixels high and no more than 986 pixels
     wide.</li>

     <li>A normal side image with <b>cover</b> (without <b>big</b>):
     Make an image that is exactly 463×982 pixels.</li>

     <li>A <b>big</b> side image with <b>cover</b>: Make an image that
     is exactly 986×982 pixels.</li>
   </ol>

   <p>But note that for many non-critical images, especially photos,
   it doesn't matter if they are a bit blurry. You can often make
   images half as wide and half as high without ill effects.</p>

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

   <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>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>. 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 thin red line along the top of
   the slides. Its length increases from zero on the first slide to
   100% on the last.</p>

   <p>B6+ also sets a custom style
   variable <strong>--progress</strong> with a value between 0 and 1
   on the <strong>body</strong>. This may be useful if you write your
   own style rules for a progress indicator.</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>

   <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>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+ 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 logo on the right is not
   obscured by the image.</p>

   <p>As explained above (see <a href="#side-image">‘Illustrations on
   the left or right’</a>), the optimal size of an image depends on
   the screen the slide is shown on. But as a compromise, you can
   assume the common case of an HD projector, i.e., 1920×1080
   pixels. The optimal image for <strong>cover</strong> is an image of
   exactly that size. The optimal image for <strong>fit</strong> is an
   image that is either 1920 pixels wide and at most 1080 pixels high,
   or an image that is exactly 1080 pixels high and at most 1920
   pixels wide.</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: 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>

   <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.</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) can be used as
   background for the slide, just like <a href="#background-images"
   >images</a>, with the <strong>cover</strong>
   or <strong>fit</strong> classes. <strong>cover</strong> is also
   useful simply to make the video as large as possible.</p>

   <p>Videos and audios (with the <strong>audio</strong> element) can
   be made to play automatically when the slide is opened, by giving
   them an <strong>autoplay</strong> attribute, e.g.:</p>

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

   <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 that
    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>
   </dl>

   <h3>Watermark overlay</h3>

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

   <pre>&lt;p class=watermark&gt;&lt;strong&gt;DRAFT!&lt;/strong&gt;</pre>

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

   <h3>Accessibility</h3>

   <p>When you present while using a screen reader, you cannot use the
   screen reader's usual keystrokes to navigate, only
   the <a href="#keystrokes">keystrokes defined by the b6+ script</a>.
   However, the screen reader will speak each slide as soon as it
   appears. The script creates an element with
   attributes <strong>role=region</strong>
   and <strong>aria-live=assertive</strong> for that purpose.</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 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. <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 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 has no effect.</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 see the current
   and next slides, 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>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, it is possible to show clocks on
   that screen with the remaining time, the time used so far, and the
   real (wall clock) time. (The clocks are normally only shown on
   the second screen, but they can be included in slides or overlaid
   on slides, with suitable 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>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. 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>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 <strong>noclick</strong> on the <strong>body</strong>
   element.</p>

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

   <p>The
   complete <a href="https://www.w3.org/Talks/Tools/b6plus/#navigation"
   >list of key strokes and gestures</a> is in
   the <a href="https://www.w3.org/Talks/Tools/b6plus/" >b6+
   documentation,</a> which also shows what else b6+ can do.</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. To avoid that a keypress or click
   accidentally changes the slide, you can disable navigation
   and index mode: add ‘?full&amp;static’ at the
   end of the URL, followed by ‘#’ and the ID or number of the desired
   slide. 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>

   <p>The page <a
   href="https://www.w3.org/2025/04/AC/speaking.html"
   >‘Speaking guidelines’</a> of the AC 2025 site contains
   recommendations for presenters.</p>
  </section>

  <footer class="long comment">
   <address>Template created 9 December 2025 by <a
   href="mailto:bert@w3.org">Bert Bos</a>.
   This file last modified
   $Date: 2025/04/24 15:07:10 $ by $Author: bbos $.</address>
  </footer>
 </body>
</html>
<!-- Local Variables: -->
<!-- sgml-basic-offset: 1 -->
<!-- End: -->
