docs/user/slide-shows.txt

   1 .. include:: <s5defs.txt>
   2
   3 =================================
   4  Easy Slide Shows With reST & S5
   5 =================================
   6
   7 :Authors: David Goodger & Chris Liechti
   8 :Date:    $Date$
   9
  10 .. This document has been placed in the public domain.
  11
  12 .. container:: handout
  13
  14    How to create quick, good-looking presentation slide shows with
  15    Docutils_/reStructuredText_ and S5_.
  16
  17    This document serves both as a user manual and as a usage example
  18    of the s5_html.py writer and the rst2s5.py front end.
  19
  20    To view this document as a slide show see
  21    http://docutils.sf.net/docs/user/slide-shows.s5.html (or `your
  22    local copy <slide-shows.s5.html>`__).
  23
  24 .. contents::
  25    :class: handout
  26
  27 .. class:: tiny
  28
  29 * S5 themes are designed for full-screen display areas with a 4:3
  30   aspect ratio.  If the slide text doesn't fit in your browser window,
  31   try decreasing the text size.
  32
  33 * Use the space bar to advance, Page Up/Down & arrow keys to navigate.
  34
  35 * Best viewed in Firefox_, Safari, and Konqueror.  Click the "|mode|"
  36   button to switch between presentation & handout/outline modes.  Hit
  37   the "C" key to display the navigation controls, or mouse over the
  38   lower right-hand corner.
  39
  40 * Functionality is limited in Opera.  Switch to full-screen mode (F11
  41   key) to activate Opera Show.
  42
  43 * S5 works in Internet Explorer, but it may look ugly.
  44
  45 .. container:: handout
  46
  47    The first slide of a presentation consists of all visible text up
  48    to the first section title.  The document title is also added to
  49    the footer of all slides.
  50
  51    The "footer" directive is used to specify part of the slide footer
  52    text.  It is currently limited to one short line (one paragraph).
  53
  54    There is no support for the "header" directive in the themes
  55    included with Docutils.
  56
  57 .. _Docutils: http://docutils.sourceforge.net/
  58 .. _reStructuredText: http://docutils.sourceforge.net/rst.html
  59 .. _S5: http://meyerweb.com/eric/tools/s5/
  60 .. _Firefox: http://www.mozilla.com/firefox/
  61 .. |bullet| unicode:: U+02022
  62 .. |mode| unicode:: U+00D8 .. capital o with stroke
  63
  64 .. footer:: Location |bullet| Date
  65
  66
  67 Introduction
  68 ============
  69
  70 .. class:: handout
  71
  72    ``rst2s5.py`` is a Docutils_ front end that outputs HTML for use
  73    with S5_, a "Simple Standards-based Slide Show System" by Eric
  74    Meyer.
  75
  76 .. topic:: Installation
  77    :class: handout
  78
  79    Prerequisites: Python and the Docutils_ package have to be
  80    installed.  See the `Docutils README`__ file for installation
  81    instructions.
  82
  83    __ http://docutils.sourceforge.net/README.html
  84
  85 * reStructuredText
  86
  87   .. class:: handout
  88
  89   Uses normal reStructuredText as input.
  90
  91 * One section per slide
  92
  93   .. class:: handout
  94
  95   Each first-level section is converted into a single slide.
  96
  97 * XHTML output
  98
  99   .. container:: handout
 100
 101      Presentations can be viewed using most modern graphical web
 102      browsers.  The browser must support CSS, JavaScript, and XHTML.
 103      S5 even works with IE!
 104
 105      S5 was designed to add the functionality of the `Opera Show`_
 106      standard (without Opera Show's limitations) to non-Opera
 107      browsers.  Unfortunately, most of S5's CSS and JavaScript
 108      extensions don't function in the Opera browser.
 109
 110   .. _Opera Show: http://www.opera.com/support/tutorials/operashow/
 111
 112 * Themes
 113
 114   .. class:: handout
 115
 116   A variety of themes are available.  See `Example Themes`_, below.
 117
 118 * ``rst2s5.py``
 119
 120   .. class:: handout
 121
 122   The front-end tool to generate S5 slide shows.
 123
 124 .. topic:: Keyboard Controls
 125    :class: handout
 126
 127    The following apply in any supporting browser besides Opera, which
 128    uses the default Opera Show controls instead.
 129
 130    .. list-table::
 131       :header-rows: 1
 132
 133       * - Action
 134         - Key(s)
 135       * - Go to the next slide
 136         - * [Space bar]
 137           * [Return]
 138           * [Enter]
 139           * [Right arrow]
 140           * [Down arrow]
 141           * [Page down]
 142           * Click the left mouse button outside of the control area,
 143             Flash object, or movie
 144       * - Go to the previous slide
 145         - * [Left arrow]
 146           * [Up arrow]
 147           * [Page up]
 148       * - Go to the title (first) slide
 149         - [Home]
 150       * - Go to the last slide
 151         - [End]
 152       * - Jump directly to a slide
 153         - Type the slide number, then hit [Return] or [Enter]
 154       * - Skip forward *n* slides
 155         - Type the number of slides to skip, then hit any "go to next"
 156           key (except [Return] or [Enter])
 157       * - Skip backward *n* slides
 158         - Type the number of slides to skip, then hit any "go to
 159           previous" key
 160       * - Switch between slideshow and outline view
 161         - * [T]
 162           * Click the |mode| button
 163       * - Show/hide slide controls
 164         - * [C]
 165           * Move the mouse pointer over the control area
 166
 167    Further details of the S5 user interface can be found at `Eric
 168    Meyer's S5 page`__.
 169
 170    __ S5_
 171
 172
 173 Features (1)
 174 ============
 175
 176 .. container:: handout
 177
 178    The S5/HTML Writer supports all the standard Docutils HTML
 179    features.  S5 has been released to the Public Domain.
 180
 181 S5-specific features:
 182
 183 .. class:: incremental
 184
 185 * The document title is duplicated on each slide in the S5 footer.
 186
 187 * The ``footer`` directive may be used to define additional text in
 188   the S5 footer.
 189
 190   .. container:: handout
 191
 192      But it is limited to one line of text.
 193
 194      This is useful for information such as the date of the
 195      presentation and/or the location.  The field in the footer is
 196      left blank if no ``footer`` directive is used.
 197
 198      Example::
 199
 200          .. footer:: Location - Date
 201
 202      There is also a progress indicator (slide counter) in the footer
 203      that can be enabled.  It's disabled by default.
 204
 205 * Incremental display.
 206
 207   .. class:: handout
 208
 209   An "incremental" class can be assigned to lists and other elements
 210   to get one-item-at-a-time behavior (like this list).  Incremental
 211   display does not work in the Opera browser.
 212
 213 * Text auto-scaling.
 214
 215   .. class:: handout
 216
 217   The text size adjusts relative to the size of your browser window
 218   automatically.  You may need to reload the document after resizing
 219   the window.  The browser and platform affect the font used; be sure
 220   to test the slide show on the presentation system.
 221
 222
 223 Features (2): Handouts
 224 ======================
 225
 226 .. container:: handout
 227
 228    The contents of any element with a "class" attribute value of
 229    "handout" are hidden in the slide presentation, and are only
 230    visible when the presentation is printed, or viewed in outline
 231    mode.  "Handout"-class elements can appear anywhere in the text, as
 232    often as needed.
 233
 234    This means that the slides and extra handout material can be
 235    combined in one document.  The handout can be printed directly from
 236    the browser, and it will contain more than just silly framed
 237    slides.  This can be used to provide more detailed information, or
 238    for speaker's notes.
 239
 240 .. class:: incremental
 241
 242 * Use the "class" directive::
 243
 244       .. class:: handout
 245
 246   .. container:: handout
 247
 248      The ``.. class:: handout`` directive can be used to tag
 249      individual paragraphs and other elements.  The "class" directive
 250      applies to the first element immediately following::
 251
 252          .. class:: handout
 253
 254          This paragraph will get a
 255          ``class="handout"`` attribute.
 256
 257          This paragraph will not be affected.
 258
 259      It also applies to multiple elements in the directive content::
 260
 261          .. class:: handout
 262
 263             These paragraphs are the content
 264             of the "class" directive.  And as such...
 265
 266             Both paragraphs will *individually* receive
 267             ``class="handout"`` attributes.
 268
 269 * Use the "container" directive::
 270
 271       .. container:: handout
 272
 273   .. container:: handout
 274
 275      Arbitrary handout blocks can be created using the ``container``
 276      directive.  The content is treated as one.
 277
 278 * Use the "class" option of directives that support it::
 279
 280       .. topic:: Extra Material For Handouts
 281          :class: handout
 282
 283 .. container:: handout
 284
 285    The following directives support "class" options:
 286
 287    * all admonition directives ("admonition", "note", "hint", etc.)
 288    * "image" & "figure"
 289    * "topic"
 290    * "sidebar"
 291    * "line-block"
 292    * "parsed-literal"
 293    * "rubric"
 294    * "compound"
 295    * "table", "csv-table", & "list-table"
 296    * "target-notes" (more about that below)
 297    * "role" (pre-defined; more below)
 298
 299    Handout contents are also visible on the screen if the S5 view mode
 300    is toggled from "slide show" to "outline" mode.
 301
 302
 303 Caveats
 304 =======
 305
 306 .. class:: incremental
 307
 308 1. Some Docutils features are not supported by some themes.
 309
 310    .. container:: handout
 311
 312       For example, header rendering is not supported by the themes
 313       supplied with Docutils.
 314
 315       The "header" directive is used to set header text.  S5
 316       automatically inserts section/slide titles into the "header"
 317       area of a slide.  If both Docutils headers and S5 headers (slide
 318       titles) exist simultaneously, they interfere with each other.
 319
 320 2. Care must be taken with the "contents" directive.
 321
 322    .. container:: handout
 323
 324       The ``--no-toc-backlinks`` option is the default for the S5/HTML
 325       writer (``toc_backlinks=0`` setting).  Other values for this
 326       setting will change the CSS class of headings such that they
 327       won't show up correctly in the slide show.
 328
 329       Use the ``:class: handout`` option on the "contents" directive
 330       to limit the table of contents to the handout/outline mode
 331       only::
 332
 333           .. contents::
 334              :class: handout
 335
 336
 337 .. class:: incremental
 338
 339 3. Subsections ...
 340 ------------------
 341
 342 ... may be used, sparingly.
 343
 344 .. container:: handout
 345
 346    Only first-level sections become slides.  Not many levels of
 347    subsections can fit on a slide.
 348
 349    Subsections (of any level) work normally in handouts though.  Add
 350    "``.. class:: handout``" before a subsection (or sub-subsection, or
 351    ...), and the entire subsection will only appear in the handout.
 352
 353
 354 Generating a Slide Show (1)
 355 ===========================
 356
 357 .. class:: incremental
 358
 359 1. Open a console (terminal, command shell) and go to the folder
 360    containing your file, ``slides.txt``.
 361
 362 2. Run the command::
 363
 364        rst2s5.py slides.txt slides.html
 365
 366 3. Specify an S5 theme with the ``--theme`` option.
 367
 368    .. class:: handout
 369
 370    Docutils will copy the S5 theme files into a ``ui/<theme>`` folder
 371    beside the output HTML file.  A slide show can also link to an
 372    existing theme using the ``--theme-url`` option.
 373
 374
 375 Generating a Slide Show (2)
 376 ===========================
 377
 378 .. class:: incremental
 379
 380 4. Include a copy of any linked stylesheet.
 381
 382    .. class:: handout
 383
 384    The default Docutils stylesheet, ``html4css1.css``, will normally
 385    be embedded in the output HTML.  If you choose to link to a
 386    stylesheet instead of embedding, you must include a copy (suggested
 387    location: in the ``ui/`` directory).
 388
 389 5. Open ``slides.html`` in a web browser.
 390
 391 6. Expand the browser window to full-screen mode, and speak.
 392
 393    .. class:: handout
 394
 395    The `Web Developer`__ extension for Firefox is very useful.  With
 396    it, you can resize your browser window to the exact dimensions of
 397    the projector you'll be using, so you can test beforehand.  There
 398    are many other useful features as well.
 399
 400    __ http://chrispederick.com/work/webdeveloper/
 401
 402 7. Profit!
 403
 404
 405 Examples (1)
 406 ============
 407
 408 .. sidebar:: Hint
 409
 410    Admonitions, tables, sidebars, and other elements can be used in
 411    on-screen presentations in handouts.  Images too!
 412
 413    .. image:: images/happy_monkey.png
 414        :alt: sample image
 415
 416 =====  =====  ======
 417   A      B    A or B
 418 =====  =====  ======
 419 False  False  False
 420 True   False  True
 421 False  True   True
 422 True   True   True
 423 =====  =====  ======
 424
 425
 426 Examples (2): Incremental Text
 427 ==============================
 428
 429 .. class:: incremental
 430
 431    Paragraphs can be displayed one at a time...
 432
 433    .. container::
 434
 435       ... or a bunch at a time.
 436
 437       This second paragraph is displayed together with the previous
 438       one by grouping them with the "container" directive.
 439
 440 `We can also display` `one` `word` `at` `a` `time,`
 441 `or a phrase` `at a time,`
 442 `or even` `o`\ `n`\ `e` `l`\ `e`\ `t`\ `t`\ `e`\ `r` `at a time!`
 443
 444 `(But the markup ain't pretty.)`
 445
 446
 447 Examples (3): Incr. Graphics
 448 ============================
 449
 450 Let's play... Rock, Scissors, Paper
 451
 452 .. container:: animation
 453
 454    .. image:: images/rsp-empty.png
 455       :class: hidden slide-display
 456
 457    .. class:: incremental hidden slide-display
 458
 459       .. image:: images/rsp-objects.png
 460       .. image:: images/rsp-cuts.png
 461       .. image:: images/rsp-covers.png
 462       .. image:: images/rsp-breaks.png
 463
 464    .. image:: images/rsp-all.png
 465       :class: incremental
 466
 467
 468 Themes
 469 ======
 470
 471 .. class:: incremental
 472
 473 * Several themes are available, and they're easy to adapt.
 474
 475   .. container:: handout
 476
 477      Themes from the `S5 tutorial`__ can be used.  These themes are in
 478      the public domain and may be redistributed freely.
 479
 480      __ http://meyerweb.com/eric/tools/s5/s5blank.zip
 481
 482      Sites with other S5 themes:
 483
 484      * http://meyerweb.com/eric/tools/s5/themes/
 485      * http://mozilla.wikicities.com/wiki/Firefox_S5:Designs
 486      * http://lachy.id.au/dev/mozilla/firefox/s5/
 487      * http://www.openlight.com/Python-S5-Theme.tar.gz
 488
 489      S5 is becoming more popular every day.  Do a web search for "S5
 490      theme" and you're bound to find plenty of choices.
 491
 492 * "``--theme``" option.
 493
 494   .. container:: handout
 495
 496      The theme can be specified with the "``--theme``" command-line
 497      option.
 498
 499      Example::
 500
 501          rst2s5 --theme big-black slides.txt slides.html
 502
 503      The default theme is "default".
 504
 505 * "``theme``" setting.
 506
 507   .. class:: handout
 508
 509   You can set the theme with the "``theme``" configuration file
 510   setting.
 511
 512 * Copied to ``./ui/<theme>/``.
 513
 514   .. class:: handout
 515
 516   Themes are copied into a ``ui/<theme>`` folder inside the folder
 517   containing the presentation.
 518
 519 * Link with "``--theme-url``" option.
 520
 521   .. class:: handout
 522
 523   Link to a theme on the same or another web site, using the
 524   "``--theme-url``" option or "``theme_url``" configuration file
 525   setting.
 526
 527
 528 Example Themes
 529 ==============
 530
 531 .. class:: handout
 532
 533    The default theme, "default", is a simplified version of S5's
 534    default theme.  It accommodates up to 13 lines of text.
 535
 536 .. class:: center
 537
 538    "default"
 539
 540    .. image:: images/default.png
 541       :align: center
 542
 543
 544 Example Themes: Small Text
 545 ==========================
 546
 547 .. class:: handout
 548
 549    The "small-white" and "small-black" themes are simplifications of
 550    the default theme (**small** black text on a **white** background,
 551    and **small** black text on a **white** background, respectively).
 552    They each accommodate up to 15 lines of text.
 553
 554 .. list-table::
 555    :class: borderless
 556
 557    * - "small-white"
 558
 559        .. image:: images/small-white.png
 560
 561      - "small-black"
 562
 563        .. image:: images/small-black.png
 564
 565
 566 Example Themes: Large Text
 567 ==========================
 568
 569 .. class:: handout
 570
 571    The "big-white" and "big-black" themes feature very large, bold
 572    text, with no footers.  Only five short lines fit in a slide.
 573
 574 .. list-table::
 575    :class: borderless
 576
 577    * - "big-white"
 578
 579        .. image:: images/big-white.png
 580
 581      - "big-black"
 582
 583        .. image:: images/big-black.png
 584
 585
 586 Example Themes: Medium Text
 587 ===========================
 588
 589 .. class:: handout
 590
 591    The "medium-white" and "medium-black" themes feature medium-sized
 592    text.  Up to 8 lines of text are accommodated.
 593
 594 .. list-table::
 595    :class: borderless
 596
 597    * - "medium-white"
 598
 599        .. image:: images/medium-white.png
 600
 601      - "medium-black"
 602
 603        .. image:: images/medium-black.png
 604
 605
 606 S5 Theme Files
 607 ==============
 608
 609 An S5 theme consists of a directory containing several files --
 610 stylesheets, JavaScript, and graphics:
 611
 612 .. image:: images/s5-files.png
 613    :align: center
 614
 615 .. container:: handout
 616
 617    The generated HTML contains the entire slide show text.  It also
 618    contains links to the following files:
 619
 620    * slides.css simply contains import links to:
 621
 622      - s5-core.css: Default styles critical to the proper functioning
 623        of the slide show; don't touch this!
 624
 625      - framing.css: Sets the basic layout of slide components (header,
 626        footer, controls, etc.  This file is the often edited.
 627
 628      - pretty.css: Presentation styles that give the slide show a
 629        unique look and feel.  This is the file that you're most likely
 630        to edit for a custom theme.  You can make a whole new theme
 631        just by editing this file, and not touching the others.
 632
 633    * outline.css: Styles for outline mode.
 634
 635    * print.css: Styles for printing; hides most layout elements, and
 636      may display others.
 637
 638    * opera.css: Styles necessary for the proper functioning of S5 in
 639      Opera Show.
 640
 641    * slides.js: the JavaScript that drives the dynamic side of the
 642      slide show (actions and navigation controls).  It automatically
 643      IDs the slides when the document loads, builds the navigation
 644      menu, handles the hiding and showing of slides, and so on.  The
 645      code also manages the fallback to Opera Show if you're using
 646      the Opera web browser.
 647
 648      Two files are included to support PNG transparency (alpha
 649      channels) in Internet Explorer:
 650
 651      - iepngfix.htc
 652      - blank.gif
 653
 654
 655 Making a Custom Theme
 656 =====================
 657
 658 .. class:: incremental
 659
 660 1. Run "``rst2s5.py --theme <base-theme> <doc>.txt <doc>.html``".
 661
 662    .. class:: handout
 663
 664    This initializes the ``ui`` directory with the base theme files.
 665
 666 2. Copy ``ui/<base-theme>`` to ``ui/<new-theme>``.
 667
 668 3. Edit the styles.
 669
 670    .. class:: handout
 671
 672    Start with ``pretty.css``; edit ``framing.css`` if you need to make
 673    layout changes.
 674
 675 4. Run "``rst2s5.py --theme-url ui/<new-theme> <doc>.txt <doc>.html``".
 676
 677    .. class:: handout
 678
 679    We use the ``--theme-url`` option to refer to the new theme.  Open
 680    your ``<doc>.html`` in a browser to test the new theme.
 681
 682 5. Rinse & repeat.
 683
 684    .. class:: handout
 685
 686    Repeat from step 3 until you're satisfied.
 687
 688 .. TODO: What to do next:
 689
 690    * add a ``__base__`` file
 691    * create a personal reusable theme (plugin)
 692    * submit the new theme to Docutils
 693
 694   ``docutils/writers/s5_html/themes/<theme>``
 695
 696 .. container:: handout
 697
 698    Resources:
 699
 700    * W3C's `Learning CSS <http://www.w3.org/Style/CSS/learning>`__
 701
 702    * `Creating An S5 Theme <http://home.cogeco.ca/~ve3ll/s5themes.htm>`__
 703
 704    * A short tutorial on how to create themes (in German):
 705      `Eigenes Theme erstellen <http://yatil.de/s5/dokumentation/9/>`__
 706
 707
 708 Classes: Incremental (1)
 709 ========================
 710
 711 .. class:: handout
 712
 713    Several "class" attribute values have built-in support in the
 714    themes supplied with Docutils.
 715
 716 .. class:: incremental
 717
 718    As described earlier,
 719
 720    * ``.. class:: incremental``
 721
 722    * ``.. container:: incremental``
 723
 724    * ::
 725
 726          .. sidebar:: title
 727             :class: incremental
 728
 729
 730 Classes: Incremental (2)
 731 ========================
 732
 733 The "incremental" interpreted text role is also supported:
 734
 735 .. class:: incremental
 736
 737    ::
 738
 739        :incremental:`This will appear first,` `and
 740        this will appear second.`:incremental:
 741
 742    Requires "``.. include:: <s5defs.txt>``".
 743
 744 .. container:: handout
 745
 746    As you can see, this markup is not very convenient.
 747
 748 .. class:: incremental
 749
 750    | But ``s5defs.txt`` includes this useful definition:
 751    | "``.. default-role:: incremental``".  So:
 752
 753    ::
 754
 755        `This` `is` `all` `we` `need`
 756
 757 `This` `is` `all` `we` `need` `to mark up incremental text.`
 758
 759
 760 Classes: Incremental (3)
 761 ========================
 762
 763 .. class:: small
 764
 765 ::
 766
 767     .. container:: animation
 768
 769        .. image:: images/empty.png
 770           :class: hidden slide-display
 771
 772        .. class:: incremental hidden slide-display
 773
 774           .. image:: images/1.png
 775           .. image:: images/2.png
 776
 777        .. image:: images/3.png
 778           :class: incremental
 779
 780 .. container:: handout
 781
 782    This is how the example works.
 783
 784    The animation effects are caused by placing successive images at
 785    the same location, laying each image over the last.  For best
 786    results, all images should be the same size, and the positions of
 787    image elements should be consistent.  Use image transparency (alpha
 788    channels) to get overlay effects.
 789
 790    Absolute positioning is used, which means that the images take up
 791    no space in the flow.  If you want text to follow the images, you
 792    have to specify the total size of the container via a style.
 793    Otherwise, the images and any following text will overlap.
 794
 795    These class values do the work:
 796
 797    animation
 798        This wraps the container with styles that position the images
 799        absolutely, overlaying them over each other.  Only useful on a
 800        container.
 801
 802    hidden
 803        Unless overridden (by "slide-display", for example), these
 804        elements will not be displayed.  Only the last image will be
 805        displayed in handout mode, when print, or when processed to
 806        ordinary HTML, because it does *not* carry a "hidden" class.
 807
 808    slide-display
 809        In conjunction with "hidden", these elements will only appear
 810        on the slide, preventing clutter in the handout.
 811
 812    incremental
 813        The second and subsequent images will appear one at a time.
 814        The first image will already be present when the slide is
 815        displayed, because it does *not* carry an "incremental" class.
 816
 817
 818 Classes: Text Size
 819 ==================
 820
 821 .. class:: incremental
 822
 823    * :tiny:`tiny` (class & role name: "tiny", e.g. "``:tiny:`text```")
 824    * :small:`small` ("small")
 825    * normal (unstyled)
 826    * :big:`big` ("big")
 827    * :huge:`huge` ("huge")
 828
 829    Requires "``.. include:: <s5defs.txt>``".
 830
 831
 832 Classes: Alignment
 833 ==================
 834
 835 .. class:: incremental
 836
 837    .. class:: left
 838
 839    Left (class name: "left")
 840
 841    .. class:: center
 842
 843    Center ("center" & "centre")
 844
 845    .. class:: right
 846
 847    Right ("right")
 848
 849 .. class:: handout
 850
 851    These classes apply to block-level elements only.  They cannot be
 852    used for inline text (i.e., they're not interpreted text roles).
 853
 854 .. class:: incremental
 855
 856    Example::
 857
 858        .. class:: center
 859
 860        Text to be centered.
 861
 862
 863 Classes: Text Colours
 864 =====================
 865
 866 :black:`black` [black], :gray:`gray`, :silver:`silver`, :white:`white`
 867 [white], :maroon:`maroon`, :red:`red`, :magenta:`magenta`,
 868 :fuchsia:`fuchsia`, :pink:`pink`, :orange:`orange`, :yellow:`yellow`,
 869 :lime:`lime`, :green:`green`, :olive:`olive`, :teal:`teal`,
 870 :cyan:`cyan`, :aqua:`aqua`, :blue:`blue`, :navy:`navy`,
 871 :purple:`purple`
 872
 873 The class names and role names are the same as the colour names.  For
 874 example, "``:orange:`text```" produces ":orange:`text`".
 875
 876 .. class:: incremental
 877
 878 Requires "``.. include:: <s5defs.txt>``".
 879
 880
 881 Classes: Borderless Tables
 882 ==========================
 883
 884 .. class:: handout
 885
 886    Here's an ordinary, unstyled table:
 887
 888 .. class:: incremental
 889
 890    =========  =======
 891    Sometimes  borders
 892    ---------  -------
 893    are        useful.
 894    =========  =======
 895
 896    And after applying "``.. class:: borderless``":
 897
 898    .. class:: borderless
 899
 900    =======  ==========  =======
 901    But      sometimes,  borders
 902    -------  ----------  -------
 903    are      **not**     wanted.
 904    =======  ==========  =======
 905
 906
 907 Classes: Print-Only
 908 ===================
 909
 910 .. class:: handout
 911
 912    Elements with ``class="print"`` attributes display their contents
 913    when printed, overriding ``class="hidden"``.
 914
 915 .. class:: incremental
 916
 917    Example: the "target-notes" directive::
 918
 919        .. topic:: Links
 920           :class: hidden print
 921
 922           .. target-notes::
 923              :class: hidden print
 924
 925 .. container:: handout
 926
 927    One good example, used in this document, is the "target-notes"
 928    directive.  For each external target (hyperlink) in the text, this
 929    directive generates a footnote containing the visible URL as
 930    content.  Footnote references are placed after each hyperlink
 931    reference.
 932
 933    The "topic" directive is given a "class" attribute with values
 934    "hidden" and "print", so the entire topic will only be displayed
 935    when printed.  The "target-notes" directive also assigns a "class"
 936    attributes with values "hidden" and "print" to each of the footnote
 937    references it inserts throughout the text; they will only show up
 938    when printed.
 939
 940 .. class:: incremental
 941
 942    Other uses may require "``.. include:: <s5defs.txt>``".
 943
 944
 945 Useful Extensions For Firefox
 946 =============================
 947
 948 * `Autohide`__
 949
 950   .. class:: handout
 951
 952   Automatically hides toolbars in full-screen mode.
 953
 954   __ http://www.krickelkrackel.de/autohide/autohide.htm
 955
 956 * `Web Developer`__
 957
 958   .. class:: handout
 959
 960   Adds a context submenu and a toolbar with a lot of useful
 961   functionality, including the viewing and live editing of
 962   stylesheets, and sizing the browser window.
 963
 964   __ http://chrispederick.com/work/webdeveloper/
 965
 966
 967 To Do
 968 =====
 969
 970 .. class:: incremental
 971
 972    * Multi-display support:
 973
 974      - speaker's notes on the laptop screen
 975      - slides on the projector
 976      - two views stay in sync
 977      - presentation controlled from either display
 978
 979    * Add timeout to incremental style.
 980
 981      .. class:: handout
 982
 983      I.e., incremental-specific style should go away (revert to
 984      normal) after a certain interval.
 985
 986    These will require some serious JavaScript-fu!
 987
 988
 989 That's All, Folks!
 990 ==================
 991
 992 .. class:: huge
 993
 994    Further information:
 995    http://docutils.sf.net
 996
 997    Docutils users' mailing list:
 998    docutils-users@lists.sf.net
 999
1000    `Any questions?`
1001
1002
1003 .. topic:: Links
1004    :class: hidden print
1005
1006    .. target-notes:: :class: hidden print