You are reading an archived post from the first version of my blog. I've started fresh, and the new design and content is now at

S5 and Incremental Rendering of Graphics

November 18, 2004

S5 is moving quickly – within the last few days, it has seen three revisions — the most important of which is seen in the 1.1a3 version with incremental display. If you aren’t aware, S5 provides a framework for creating well-structured and accessible presentation materials. We’ve been using Opera Show for our accessibility presentations at for the past year or so, but I was immediately attracted to S5 because of its cross-browser compatibility.

I decided to try S5 for a presentation I was giving last night, and I wanted a particular graphic to render incrementally. Here’s how I did it using the incremental display from the first alpha release to incorporate incremental rendering: S51.1a3.

A Preview

Before you see the code – I’ve posted a copy of the actual slide I used. See the demonstration slide deck.

For what it’s worth, I didn’t spend a lot of time reworking Eric’s templates. I changed a few colours and fonts and that is about it. (If you are interested, the full presentation is available as well: Web Accessibility and Usability: The Human Factor.)

In essence, I applied Dave Shea‘s CSS Sprites approach to create an ordered list of items to display incrementally, each with its own background image that is absolutely positioned on the screen. The slide starts with a “greyed out” version of the graphics and then changes them as the ordered list displays incrementally through the magic and goodness that is S5.

The end result is incremental display of the graphic components in the order that you want them to appear. In theory, you could use this strategy to place other graphics whereever you wanted them to appear. The only issue I’ve found so far with incremental rendering is that if you revisit a slide you’ve already viewed, the last item in the list is still considered the “current” one. Not really a big deal — it is the first time through where it really counts.

The HTML Code

  1. <ol id=”schematic” class=”inc”>
  2. <li id=”phil”>Philosophy</li>
  3. <li id=”imp”>Implementation</li>
  4. <li id=”aware”>Awareness</li>
  5. </ol>


  1. ol#schematic {
  2. list-style-type: none;
  3. }
  4. ol#schematic li {
  5. display: inline;
  6. text-indent: -999px;
  7. }
  8. ol#schematic li#phil {
  9. position: absolute;
  10. left: 200px;
  11. top: 150px;
  12. width: 187px;
  13. height: 118px;
  14. background-image: url(../pix/philosophy_gr.gif);
  15. background-repeat: no-repeat;
  16. }
  17. ol#schematic li#aware {
  18. position: absolute;
  19. left: 400px;
  20. top: 150px;
  21. width: 187px;
  22. height: 118px;
  23. background-image: url(../pix/awareness_gr.gif);
  24. background-repeat: no-repeat;
  25. }
  26. ol#schematic li#imp {
  27. position: absolute;
  28. left: 600px;
  29. top: 150px;
  30. width: 187px;
  31. height: 118px;
  32. background-image: url(../pix/implementation_gr.gif);
  33. background-repeat: no-repeat;
  34. }
  35. ol#schematic li#phil.current {
  36. left: 200px;
  37. background-image: url(../pix/philosophy.gif);
  38. background-repeat: no-repeat;
  39. }
  40. ol#schematic li#aware.current {
  41. left: 400px;
  42. background-image: url(../pix/awareness.gif);
  43. background-repeat: no-repeat;
  44. }
  45. ol#schematic li#imp.current {
  46. left: 600px;
  47. background-image: url(../pix/implementation.gif);
  48. background-repeat: no-repeat;
  49. }

The Printable View

I also used the .handout class to show the images in the printable version – it will display the ordered list, as well as the raw graphics themselves, and a definition list that explained my thoughts behind the diagram of how I saw the relationship fitting together. I could have used headings and paragraphs, but I felt the definition list more closely matched the structure that I was aiming to demonstrate with the graphic.

  1. <div class=”handout”>
  2. <img src=”./pix/philosophy.gif” alt=”” />
  3. <img src=”./pix/awareness.gif” alt=”” />
  4. <img src=”./pix/implementation.gif” alt=”” />
  5. <dl>
  6. <dt>Philosophy of Web Accessibility</dt>
  7. <dd>Part of this philosophy…</dd>
  8. <dt>Implementation of Techniques</dt>
  9. <dd>This encompasses best practices…</dd>
  10. <dt>Awareness</dt>
  11. <dd>Awareness serves as a bridge between…</dd>
  12. </dl>
  13. </div>

6 Responses

Comment by Jeff Smith — Nov 18 2004 @ 1:50 pm

Excellent implementation Derek. It’s amazing how much can be accomplished with CSS. I wish that this know-how had been around when I was making presentations back in university, I would have gladly used S5 over Powerpoint any day.

Comment by Jesse Rodgers — Nov 18 2004 @ 7:20 pm

Very cool. I am going to have to try this out for a couple presentations at our WaTiTis conference.

Comment by Small Paul — Nov 19 2004 @ 9:00 am

And just a day later, I believe the incremental rendering bug is fixed. Cracking!

Comment by Eric Meyer — Nov 19 2004 @ 11:49 am

Excellent work, Derek! I don’t know if the incremental-rendering fix will be what you want or not, but I think it’s consistent– it should “unspool” the incremental rendering if you back up to the slide, going from the last step to the first step. I’d like to include an adapted form of your technique in the testbed, if that’s okay, as part of a series of incremental graphic demonstrations.

Comment by Derek Featherstone — Nov 19 2004 @ 12:12 pm

It is kind of amazing how fast S5 is moving… Eric, it sounds like the incremental fix is the way I’d expect it to behave. And feel free to use whatever you need to for the testbed…

Comment by Isaac Lin — Apr 01 2005 @ 10:17 am

I came across the following link in another presentation on S5:

I tried to find an associated article by visiting the following URL:

I got a message warning me about being a spammer, which included in part the following message (I have removed the IP address of the company I work for):

You purport to have come from (none) via an IP address of xx.xx.xx.xx. The URL you were requesting was /projects/.

Can you please email me and I will provide the details of the IP address? I would like to be able to read your web site from work if possible.