Test HTML+CSS presentations!
See my updated page with demos.

2012-02-06: see my page on deck.js: I had the occasion to try deck.js and contribute to it. I now use it and totally recommend it.

Introduction: Authoring Slides using HTML

There are several ways of creating slides using web technologies. Many systems are in the wild but none of them seems to satisfy fully its audience (including the one I designed in my garage and am still using). On this page, I'm trying to list the required features for such systems and I will also reference some existing solutions. Eventually the goal is to contribute on an existing project to make it better and usable for myself.

Features Specification

I extract a list of features from my personal feeling and my moderate experience with various presentation software (html based and not). Interesting insights (against html-based slides) can also be found in Why I don’t write my slides in HTML? by Christian Heilmann. I probably missed a lot of interesting stuff out there but don't hesitate to let me know in this case at click-me ;-p @nospam.com.

I could not find an easier to digest way of presenting this… so here comes the big bullet list, split into rough categories:

• Fully offline: writing and previewing you slides should not require any network connection. Presenting the slides should also work offline (you're often in an uncontrolled environment when you present).
• Easy syntax: when you type bullet-point slides, you don't want to spend to much time typing html lists. It should be really easy to type the slides in any editor. A simplified syntax (e.g., a wiki-like syntax) is more than welcome when you want to write slides fast.
• Easy reuse: it should be easy to copy from multiple existing presentations to make a new one. Most systems are ok with this but animations and styles are things that can be easily lost in the process.
• Minimal dependencies, no compilation: ideally writing slides should not need any compilation phase and thus no installation of a specific software.

• Text: we should be able to type some text in a presentation :).
• Vector Images: both raster and vector images (e.g., SVG) should be usable in a presentation.
• Videos: video files should be easy to add to a presentation and should play inside the presentation without needing an external player.
• Math/Equations: in some contexts it is important to be able to easily type math equations (e.g., using a latex notation). There are javascript tools to do that, it is just a question of integrating them.

• Multimodal control: the presentation should be easily controllable using a mouse or a keyboard. The keyboard input is preferred by a lot of people and often remote controller are generating fake keyboard events to interact with the presentation systems.
• Scale-to-screen: the slides must rescale properly to fit the screen or window size. The lack of this feature is a major criteria for rejection of html-based systems. Note that both the “presentazion” system and my own have included this feature from their beginning.
• Presentation view: when you are presenting you don't want to see exactly what the audience see. You need a special view with the current slide, the next slide, some personal notes and maybe a time keeper (a clock or timer). This is actually far from trivial to implement in an html solution.
• Incremental slide apparition: it should be easy to make the bullet points appear progressively on a slide (without manually copying the slide when authoring the presentation).
• “Next” vs NextSlide: it should be possible to either play the next animation or directly step to the next slide. For example the right arrow on the keyboard could play the next animation while the page-next key would skip to the next slide.
• SVG animation: it should be possible to animate vector images. The simplest animation consists in making some parts of the vector image appear or disappear. More advanced animation like making objects move or scale should also be possible.
• Video playing on “Next”: ideally, it should be possible to make the following example. On a particular slide, the “Next“ action first incrementally shows bullet points, then “Next” makes a video visible and after that “Next” starts the video.
• SVG animation on “Next”: vector image animations should also be possibly triggered by the “Next” action.

• A cool default style: sometimes you write a few slides for a presentation just 5 minutes before doing it, just to lay down your flow of idea. In this case you want the presentation to look ok.
• CSS style-able: CSS is great for styling, it should be usable to easily and quickly style your presentation.
• Image styling: using CSS to style SVG images is also a big plus. Imagine you have some SVG image made of some text and shapes in black on a transparent background. Everything is ok if you presentation style has a white background but you would like to change the stroke color into white when you change the presentation style to have a dark background. Thus, the SVG images must not be rasterized by the system.
• Style-able transitions: even if you don't want to abuse of them, inter-slide transitions are sometimes useful to emphasis that you changed slide.

• PDF export: PDF is pervasively used to share presentations so the system should provide a good quality pdf export.
• Printing: the presentation should be easily printable. Having a proper pdf export properly is enough to enable printing.
• Inclusion on web pages: a presentation should be easy to embed into a web page. Ideally, a recent browser without any plugin installed should be able to render a page on which the presentation is embeded.
• MSOffice/OpenDocument (OpenOffice/LibreOffice) Export: a system capable of exporting to common presentation formats, even if not 100% correct, would be really interesting to share presentations with others. For example, if you designed a presentation and someone using LibreOffice wants to reuse some of your slides, you can directly export it. An import feature would also be interesting, at least for simple things such as plain text bullet points.

• Performance and scalability: the presentation should be displayed fast even if there are a lot of slides (e.g., 200) with images. For example some Slideshare presentations are sluggish (at least on my computer).
• Portability and fidelity: the presentation should look exactly or almost the same in different conditions. This includes changing OS (Windows, Linux, MacOS), changing browser (not sure we can do anything with IE though), and platform (PC and mobile).
• Neat display, minimal flickering: the presentation should display at once the slides and avoid unwanted progressive appearance (or disappearance) of elements. Having implemented one html presentation system, I know that it is easy to have this problem. Slideshare seems to have this problem where some part of slide content appear after the rest (this is not an animation effect intended by the author of the slides).

• Remote view: it would be good if some remote attendee to your presentation could have a synchronized version of the presentation in front of him/her. All control events on the presenter side needs to be broadcasted to the remote viewers (idea from deck.remote.js extension).
• Automatic presentation: it should be really easy to convert a normal presentation into a self-looping one. When you go to an exhibition or a fair, you would like to have a standalone presentation where slides are automatically passing and the presentation is looping.
• Slide sorter: it is useful to be able to see all slides at once, both for navigation purpose and to get a good overview of the presentation.
• Linkability: it should be easy to link a particular slide in a presentation to ease referencing when sharing comments online.
• Quick brightness tuner: objective, no more “maybe you cannot see because the projector is too dark”. The video projector have often a bad contrast for bright and dark colors. It should be easy to “translate and rescale the brightness” of a presentation. It would be very useful to have an easy way to change all colors of a presentations so that they are in the brightness range that the projector properly handles.
• WYSIWYG slide edition: in the longer term, some people may like to have a WYSIWYG editor like the ones proposed by most recent wikis. Still, the use of plain-text editor should remain a core feature and the WYSIWYG editor must be optionnal.
• Embedded image editor: with a WYSIWYG editor comes the need to quickly modify and create images as mentioned by Christian Heilmann. One promising and probably not-too-difficult solution is to embed an in-browser SVG editor such as svg-edit.

Rough Feature Table

The big table below tries to list some of the identified features and how they are (or could be) supported by different systems. To keep it shorter I listed only some systems and features. Tell me (at click-me ;-p @nospam.com) if I missed some important systems or if there are mistakes in this table. Here is a legend for the indicative coloring used in the table (also used to sort when you click on a column).

YES: supported	RATHER YES: partial supported or unsupported but easy to add the feature	RATHER NO: unsupported and difficult to add the full feature (maybe easier for an approximation of the feature)	NO: unsupported, very difficult to add (I don't mean impossible)

We compare different systems: deck.js, presentazion, slippy and my own system (only a recent but partial example).

Feature	Deck.js	My Deck.js	Presentazion	Slippy	Old Mine (evolved from S5)	... comments
Fully offline
Easy Syntax
Minimal dependencies, no compilation					I use a tiny java program that just copies some stuffs in an release directory
Multimodal control			I have seen no button to click
HTML SVG and Video			probably there or easy to add
Math Equations
Scale to Screen	using deck.scale extension, limited		thought from the beginning	OK
Incremental slide
Presentation View	need to modify the core?				thanks to my “controller” and proper rescaling
Incr.: Next vs NextSlide	the slide counter counts each increment		does not have incremental bullet points?
SVG Animations	as an extension created by a friend based on my system
SVG Animations on “Next” (also, Video Playback)	probably need to modify the core of deck.js to implement				thanks to my “controller”
Cool default style			I like sobriety :)		as I said, sobriety
Styleable transitions			might be easy with recent css		not sure what css can do?
PDF Export			works well at least with a text presentations
Created to be modular and very open
Remote view	as an extension
Automatic presentation	as an extension
View all slides (slide sorter)

Conclusion: use deck.js with (my) extensions :)

After some work I could transfer my features to deck.js in the form of extensions when possible or in the core when needed. I am now using only this new deck.js and would recommend it. See my page on deck.js for more details.

Previous conclusion: where to go from here

Given that no existing system I found fulfills all my needs, I have two main solutions: cleaning up and improving my own system, or contributing to (or forking) an existing system to make it match my needs. As for today and after some filtering, the systems that I considered as candidates for extension were both open source and active: deck.js and presentazion (and slippy.

Going a little ahead for my next steps, I feel that “presentazion” is still too young but gives interesting ideas to explore (e.g., pdf export, rescaling method). Deck.js is a very good candidate: it is very active, it allows for extension in its design, it is gaining momentum and the presentations are good looking. Eventually, I think I will end up forking deck.js to experiment with it and integrate my framework with it. From my recent reading of its source code, I will probably need to modify the core of deck.js to do what I want (writing extensions won't be enough).

Any feedback or remarks? Contact me at click-me ;-p @nospam.com.