Jens Nöckel's Homepage

Computer notes home

Scientific Presentations on the Web

Table of contents

Web standards and presentations

This page continues a set of notes that took off from Apple's Keynote and the question of how to prepare mathematics-rich content within that commercial application. As time went on, the mismatch between commercial products and the practical needs of science practitioners has not significantly improved, especially when it comes to teaching.

The future lies somewhere else, and PDF-based presentations are one poweful alternative described on that earlier page. Given that PDF is a great medium for maths-rich documents, the threshold for moving on to yet another technology is understandably high. This is perhaps one of the reasons why MathML has languished for more than a decade without ever really taking off on the web. Leaving aside this larger question of how the web should transmit mathematics, PDF in the context of presentations has become popular mainly because of Adobe Reader and its scripting and annotation features. Without Adobe's software, there are no page transitions, no embedded animations or movies. Interactive objects like embedded Flash files also require Adobe Reader and moreover pose security concerns. And no matter how you present your PDF, there is no way to embed Java Applets or external web pages in your slides.

Meanwhile, the balance in the presentation software landscape is shifting again: Keynote has lost the ability to embed live web page views in an "upgrade,", while web browsers have rapidly been gaining capabilities. In particular, new interactive effects are now possible using purely HTML5 and CSS3, with the result that it no longer takes exotic scripting skills to make a web page come to life in much the same way that a Keynote presentation captures our attention. These new developments are driven by forces quite unrelated to our topic of "presentation software" — we can thank (or blame) movements like "Web 2.0" and the "cloud": what makes the web come alive with interactivity can also serve us on the desktop or laptop.

In other words, web standards based presentations are almost ready for prime time. This is not a new idea by any means. Here is an example of a lecture in a non-calculus electromagnetism class I taught in 2006. It uses HTML Slidy by Dave Raggett, extended to display mathematical equations as described next. These older attempts at web-based presentations can now be reinvigorated with HTML5, and hopefully soon with MathML too. Before looking at how to modernize things, let's review the tried-and-true web-based approach the way I've been practicing it:

HTML Slidy and WikyBox

The secret in adding math to an (X)HTML page is the CSS stylesheet. Back in 2006, there were no really viable MathML viewers that could easily run in a browser, although Firefox was and is a trailblazer in that area and could be made operational with some tweaking (installing the right fonts). As a consequence, CSS tricks were the way to go if you wanted math to appear on an HTML page not as images but as (resizable, stylable) text. The situation is still not much better: although Firefox meanwhile implements MathML very well, there is (as of July 2010) no such support in WebKit browsers (Safari, Chrome).

One realization of math with CSS is WikyBox by Stefan Gössner. I particularly like this because it not only produces nice-looking math output but also offers an ingenious real-time input method. It translates your (LaTeX-like) input into a displayed equation as you type.

To combine this with HTML Slidy, simply include (at least) the wiky.math.css stylesheet of WikyBox in the head of your HTML Slidy presentation. Then to enter a mathematical expression, type it in WikyBox, switch to the "html" tab, and copy the HTML source to the slidy source file verbatim. For more details, take a look at the head of my sample presentation.

MathML and XML presentations

This section is where the real future lies. Since browser support is still being developed as I am writing this, the page ends here... stay tuned for more, coming real soon.
Last modified: Sat Nov 12 15:09:14 PST 2011