Skip navigation.

CSS 3 Speech demo

This article was made for the CSS 3 summer contest organized by, at the suggestion of Ian Andolina. I won the third place.

CSS2 added support for the Aural media type which is used for "styling" speech synthesis in aural user agents (e.g. screen readers). The specification added several properties to this new media type.

The current Working Draft of CSS2.1 reserves media="speech", but explicitly does not define which properties apply to it. Also, the aural media type has been deprecated.

The CSS 3 Speech module removes some of the old properties and adds new ones. All of them are now assigned to the speech media type.

Opera is one of the most popular user agents implementing most of the CSS 3 Speech properties.

This is an example sentence styled with several CSS properties, including voice-volume, voice-balance, voice-rate, voice-family, voice-pitch, speak and cue-after.

To hear the above, you have to download and install Opera, then enable Voice in Preferences > Advanced > Voice. Select the above text and press V, or right-click and select Speak.

The code used to style speech in the above sentence is:

#voice-volume { -xv-voice-volume: x-soft; -xv-voice-balance: right; }
#voice-balance { -xv-voice-balance: left; }
#speech-cue { cue-after: url("ding.wav"); }
#voice-rate { -xv-voice-rate: x-slow; }
#voice-family { voice-family: female; }
#voice-pitch { -xv-voice-pitch: x-low; }
#speech-speak { speak: spell-out; }

Note: Since CSS 3 Speech module is still a Working Draft, Opera implements some of its properties using the -xv- prefix.