A minimal HTML-based presentation tool
Created by Katsuhiro Ueno
Press ▶ to start the presentation.
Use Arrow keys to navigate, ESC key to exit.
<textarea>.The initial file should look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Awesome Slides</title>
<!-- put scripts here -->
</head>
<body>
<!-- put slides here -->
</body>
</html>
Put the following two lines in <head>:
<head>
<meta charset="UTF-8">
<title>My Awesome Slides</title>
<script src="presen.js"></script>
<link rel="stylesheet" href="presen.css">
</head>
To enable addons and themes, additional
<script>
and
<link>
would be needed.
See Addons for details.
Each <header> or <section>
constitutes a slide.
For the title slide, <header> should be used.
<body>
<header>
<h1>The Awesome Presentation</h1>
<p>Awesome Samurai</p>
<p>Mar 4, 2112</p>
</header>
</body>
After <header>,
write slides as <section>s.
<p>Mar 4, 2112</p>
</header>
<section>
<h2>Awesome Self-introduction</h2>
<ul>
<li>The Awesome Samurai</li>
<li>Born in the Awesome town</li>
</ul>
</section>
</body>
All of the HTML5 features are available.
Press ▶ and start the presentation.
Key bindings in presentation mode:
| Key | Action |
|---|---|
| Left, Up, PageUp | Go previous slide |
| Right, Down, PageDown | Go next slide |
| b | Toggle blackout |
| Any other keys | Exit |
| Click a link, etc. |
Swipe is also available on touch screens.
Two classes for fragmented slides:
step: show fragments step-by-steppage: show a fragment only in a single stepTo make a slide fragemented, specify these classes to the fragment elements in the slide.
step class
To show fragmented contents step-by-step,
specify step class
for each fragment
like this:
<p>
<span class="step">To show ...</span>
<span class="step">specify ...</span>
<span class="step">for each fragment</span>
<span class="step">like this:</span>
</p>
When a slide is shown,
only its first step is presented.
page class
To replace a fragment in each step,
use page class instead of step.
[ ] Step 1
[*]---------->[ ] Step 1 Step 2
[*]---------->[*]---------->[ ] Step 1 Step 2 Step 3
[*]---------->[*]---------->[*] Completed! Step 1 Step 2 Step 3
This is achived by the following code:
<pre class="page"> [ ] </pre>
<pre class="page"> [*]---->[ ] </pre>
<pre class="page"> [*]---->[*]---->[ ] </pre>
<pre class="step"> [*]---->[*]---->[*] </pre>
step and page can be mixed
<ul class="page">
<li class="step">11</li>
<li class="step">12</li>
<li class="step">13</li>
<li>14</li>
</ul>
<ol class="page">
<li class="step">21</li>
<li class="page">22</li>
<li class="step">23</li>
<li>24</li>
</ol>
Check out how they work in presentation mode.
step and page work
<ul class="page">
<li class="step">11</li>
<li class="step">12</li>
<li class="step">13</li>
<li>14</li>
</ul>
<ol class="page">
<li class="step">21</li>
<li class="page">22</li>
<li class="step">23</li>
<li>24</li>
</ol>Right goes to the next step or page
that contains neither step nor page
(Left is vice versa).
The current step or page, its ancestors,
and past steps are visible.
<header></header>
<section>
<header>...</header>
<section>
<p class="page">...</p>
<p class="page">...</p>
</section>
<section>...</section>
<footer>...</footer>
</section>
<section>...</section>
<footer>...</footer>Each <header> and <section>
is regarded as a page by default.
They follow the same principal as
step and page.
Some optional features are provided as addons so that you can remove them if not needed.
fullscreen addonThis adds ⬚ button that toggles the full-screen mode.
To enable this, put the following in <head>:
<head>
...
<script src="presen.js"></script>
<script src="addons/fullscreen.js"></script>
<link rel="stylesheet" href="presen.css">
It would be needed only if your browser does not have a full-screen switch.
editor addonThis makes the browser a simple slide editor.
Two buttons are added:
To enable this, put the following in <head>:
<head>
...
<script src="presen.js"></script>
<script src="addons/editor.js"></script>
<link rel="stylesheet" href="presen.css">
presen_
are reserved for the use of presen.js and its addons.
page step prec curr succ npre ncur nsucThe size of slides can be changed
by specifying one of the following classes to <html>:
a16x9 (16:9, HD)a16x10 (16:10, WXGA+)a4 (297:210, A4 paper)The default is 4:3 (VGA).
For example, for MacBook users:
<!DOCTYPE html>
<html class="a16x10">
<head>
...
The contents of the elements of the following classes are substituted in presentation mode:
presen_slide_indexpresen_slide_totalThe elements forming pages (transition steps) are determined by the following CSS selector:
section, header, .page, .stepThis can be changed by modifying Presen.pageSelector
variable.
For example, this makes every <li> a page:
<script src="presen.js"></script>
<script>Presen.pageSelector =
'section, header, .page, .step, li';</script>
In presentation mode, every page element has one of the following classes:
curr: the current page or its ancestorprec: prior to the current pagesucc: subsequent to the current pageFor outer elements of nested sections,
npre, ncur, and
nsuc are set instead of the above.
A transition step is performed by toggling these classes of each page element.
The visual effect of a transition is realized only by CSS.
step differs from pageThey differ only in their styles:
.page.prec { display: none }
.page.succ { display: none }
/* .step.prec { display: none } */
.step.succ { display: none }
As in these,
you can customize the effect of page transition
by writing styles for .prec, .curr,
and .succ.
See also:
presen.css for the
actual definitions.page works
slide.When the presentation mode starts, the following occur:
presen_mode is added to the class list of
<html>.
This is removed when the presentation mode exits.
presen_mode_init is added to the class list
of <html> and removed immediately.
This is useful for custom stylesheets to distinguish initialization from transitions (see the source of this file for example).
In presentation mode,
the default behavior of click event is overriden
by a window's event listener.
When an element with non-negative tabIndex is clicked and
the click event is propagated without preventDefault being
called,
To control this, set tabindex attributes explicitly.
1rem is set to the 1/10 of the slide height.<header>, <section>,
and <footer> has
position set to something other than static;
so, the elements in a slide is positioned relative to the slide.presen.js is initialized in the capturing phase of
the load event by a window's event handler.
To make sure that your script runs after presen.js is
initialized, avoid adding a load listener of the capturing
phase.
presen.js (including this file) is distributed under the following terms: Copyright (C) 2018 Katsuhiro Ueno Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.