Operational Dynamics
Technology, Strategy, and IT Operations Consulting   |   Open Source Research and Development   |   Blogs

Writing Slides

Fixed resolution

Slides are hardcoded to be 1024 x 768 overall. That's XGA and 4:3 is what most projectors have managed for a very long time. Sure there are newer ones that do 1080p and have HDMI input and are all very sexy, but “good luck with that” when you rock up to a public lecture theature expecting to find such a thing.

You will write your HTML in a <section> element that is width 864px and height 718px (the above full screen "resolution", less an appropriate amount of padding top and sides.

When rendered in the browser the slide content will be scaled to fit in the browser window; you don't have to worry about that; you can think in terms of a fixed size canvas regardless of device size.

Utility classes

If you put an image on a page, you’re often showing that image (and ony that image) as the entire point of the slide. So you give the <img> element class="graphic" and the image will be centred vertically and horizontally.

Variants are class="cover" and class="cover wide" whereby an image is stretched to cover the screen vertically or horizontally, respectively

For a text only slide that makes its point loudly, try class="shout" which takes the <h2> on the page and renders it in an enormous font centered on the screen.


If you have a footnote or citation to add to a side (perhaps attribution of the source of an image) add a <footer> within your slide. It will be subtly rendered and aligned with the automatically added page numbers.


We recommend you use SVGs when creating custom graphics to illustrate things in your presentations. The ever fantastic Inkscape is a terrific way to compose them; if you're not familiar with drawing vector graphics it's well worth the investment of time to become fluent with Inkscape.

As an implementation matter, don’t use <img>s to load the SVGs; that is supposed to work, of course, but there are all kinds of scaling and loading bugs out there. So instead of:

1 <section>
2 <h2>Explain all the things</h2>
4 <img src="pictures/Illustration.svg" class="graphic">>
6 </section>

use the <embed> tag:

1 <section>
2 <h2>Explain all the things</h2>
4 <embed src="pictures/Illustration.svg" type="image/svg+xml" class="graphic">
6 </section>

and it'll work great. Go figure. It’s the same drawing code in the browser, but this way it works. Incidentally, <object> has exactly the same semantics, but you have to write an </object> close tag; <embed> saves you the trouble.

Note that all paths are relative to the location of the top-level master .html file, not the (e.g.) slides/ directory.

Next: Themes, Previous: Usage, Up: Overview.

These documents copyright © 2013 Operational Dynamics Consulting, Pty Ltd unless otherwise noted. Copyright of work by other authors is retained by those authors. Most material in this site is made available under an Open Source or Open Content licence; see the top level LICENCE file in that project's source repository for details

Files on this site (notably program code) will be delivered as Content-Type: text/plain unless syntax-highlighted or binary. All times UTC