I've used CSS counters quite regularly in the past for various projects, and I've also applied them for slidenumbering in the Opera Show Generator but it always seemed impossible to have something like Slide x of y with pure CSS. No longer! It was made possible due to the scalable markup used for Opera Show Format 1.0 which allows for plenty of hooks for Generated Content.
I make use of the difference between position:absolute; and position:fixed;. The first is used for positioning the number of each of the slides (using div.slide:after), and the second is used to position the total number of slides (using div.presentation:after). As the counter is used after div.presentation, it shows the total number of slides and because it is fixed-positioned it will show up on each slide, exactly what you want!
The trick is then to position the two values such that they fit the desired "Slide X of Y" construct. This is done by positioning the total number of slides as div.presentation:after { content: "\00A0 of "counter(slide); position: fixed; z-index:3; bottom: 0px; right:0px; width: 50%; text-align:left; } with its left edge at 50% of the screen width. Note that the text is left-aligned, and an additional string is added with the generated content. The active slide number is then positioned at 50% from the right of the screen div.slide:after { content: "Slide " counter(slide); position: absolute; right:50%; bottom: 0px; text-align:right;} with text-alignment set to right. The two boxes now align at the centre of the slide and the desired effect is achieved. It even works when the slide numbers reach double digits.
Note that the stylesheet used in the experiment also contains other examples of generated content. For instance, when printing, all the meta-data is extracted from the document and presented in a structured way. Furthermore it contains line-breaks in the generated content used to remind the user of pressing F11.
© 2003-2006, Mark Schenk.