Reference and Manual

Hosting Glossary PHP HTML 4.01 CSS 2.0 Core Javascript 1.5 XHTML 1.0

Cascading Style Sheets(CSS) Level 2

Aural style sheets

19 Aural style sheets

Contents

19.1 Introduction to aural style sheets

The aural rendering of a document, already commonly used by the blind and print-impaired communities, combines speech synthesis and "auditory icons." Often such aural presentation occurs by converting the document to plain text and feeding this to a screen reader -- software or hardware that simply reads all the characters on the screen. This results in less effective presentation than would be the case if the document structure were retained. Style sheet properties for aural presentation may be used together with visual properties (mixed media) or as an aural alternative to visual presentation.

Besides the obvious accessibility advantages, there are other large markets for listening to information, including in-car use, industrial and medical documentation systems (intranets), home entertainment, and to help users learning to read or who have difficulty reading.

When using aural properties, the canvas consists of a three-dimensional physical space (sound surrounds) and a temporal space (one may specify sounds before, during, and after other sounds). The CSS properties also allow authors to vary the quality of synthesized speech (voice type, frequency, inflection, etc.).

H1, H2, H3, H4, H5, H6 {
    voice-family: paul;
    stress: 20;
    richness: 90;
    cue-before: url("ping.au")
}
P.heidi { azimuth: center-left }
P.peter { azimuth: right }
P.goat  { volume: x-soft }

This will direct the speech synthesizer to speak headers in a voice (a kind of "audio font") called "paul", on a flat tone, but in a very rich voice. Before speaking the headers, a sound sample will be played from the given URL. Paragraphs with class "heidi" will appear to come from front left (if the sound system is capable of spatial audio), and paragraphs of class "peter" from the right. Paragraphs with class "goat" will be very soft.

19.2 Volume properties: 'volume'

'volume'

Value:	<number> \| <percentage> \| silent \| x-soft \| soft \| medium \| loud \| x-loud \| inherit
Initial:	medium
Applies to:	all elements
Inherited:	yes
Percentages:	refer to inherited value
Media:	aural

Volume refers to the median volume of the waveform. In other words, a highly inflected voice at a volume of 50 might peak well above that. The overall values are likely to be human adjustable for comfort, for example with a physical volume control (which would increase both the 0 and 100 values proportionately); what this property does is adjust the dynamic range.

Values have the following meanings:

<number>: Any number between '0' and '100'. '0' represents the minimum audible volume level and 100 corresponds to the maximum comfortable level.
<percentage>: Percentage values are calculated relative to the inherited value, and are then clipped to the range '0' to '100'.
silent: No sound at all. The value '0' does not mean the same as 'silent'.
x-soft: Same as '0'.
soft: Same as '25'.
medium: Same as '50'.
loud: Same as '75'.
x-loud: Same as '100'.

User agents should allow the values corresponding to '0' and '100' to be set by the listener. No one setting is universally applicable; suitable values depend on the equipment in use (speakers, headphones), the environment (in car, home theater, library) and personal preferences. Some examples:

A browser for in-car use has a setting for when there is lots of background noise. '0' would map to a fairly high level and '100' to a quite high level. The speech is easily audible over the road noise but the overall dynamic range is compressed. Cars with better insulation might allow a wider dynamic range.
Another speech browser is being used in an apartment, late at night, or in a shared study room. '0' is set to a very quiet level and '100' to a fairly quiet level, too. As with the first example, there is a low slope; the dynamic range is reduced. The actual volumes are low here, whereas they were high in the first example.
In a quiet and isolated house, an expensive hi-fi home theater setup. '0' is set fairly low and '100' to quite high; there is wide dynamic range.

The same author style sheet could be used in all cases, simply by mapping the '0' and '100' points suitably at the client side.

19.3 Speaking properties: 'speak'

'speak'

Value:	normal \| none \| spell-out \| inherit
Initial:	normal
Applies to:	all elements
Inherited:	yes
Percentages:	N/A
Media:	aural

This property specifies whether text will be rendered aurally and if so, in what manner (somewhat analogous to the 'display' property). The possible values are:

none: Suppresses aural rendering so that the element requires no time to render. Note, however, that descendants may override this value and will be spoken. (To be sure to suppress rendering of an element and its descendants, use the 'display' property).
normal: Uses language-dependent pronunciation rules for rendering an element and its children.
spell-out: Spells the text one letter at a time (useful for acronyms and abbreviations).

Note the difference between an element whose 'volume' property has a value of 'silent' and an element whose 'speak' property has the value 'none'. The former takes up the same time as if it had been spoken, including any pause before and after the element, but no sound is generated. The latter requires no time and is not rendered (though its descendants may be).

19.4 Pause properties: 'pause-before', 'pause-after', and 'pause'

'pause-before'

Value:	<time> \| <percentage> \| inherit
Initial:	depends on user agent
Applies to:	all elements
Inherited:	no
Percentages:	see prose
Media:	aural

'pause-after'

Value:	<time> \| <percentage> \| inherit
Initial:	depends on user agent
Applies to:	all elements
Inherited:	no
Percentages:	see prose
Media:	aural

These properties specify a pause to be observed before (or after) speaking an element's content. Values have the following meanings:

<time>: Expresses the pause in absolute time units (seconds and milliseconds).
<percentage>: Refers to the inverse of the value of the 'speech-rate' property. For example, if the speech-rate is 120 words per minute (i.e., a word takes half a second, or 500ms) then a 'pause-before' of 100% means a pause of 500 ms and a 'pause-before' of 20% means 100ms.

The pause is inserted between the element's content and any 'cue-before' or 'cue-after' content.

Authors should use relative units to create more robust style sheets in the face of large changes in speech-rate.

'pause'

Value:	[ [<time> \| <percentage>]{1,2} ] \| inherit
Initial:	depends on user agent
Applies to:	all elements
Inherited:	no
Percentages:	see descriptions of 'pause-before' and 'pause-after'
Media:	aural

The 'pause' property is a shorthand for setting 'pause-before' and 'pause-after'. If two values are given, the first value is 'pause-before' and the second is 'pause-after'. If only one value is given, it applies to both properties.

H1 { pause: 20ms } /* pause-before: 20ms; pause-after: 20ms */
H2 { pause: 30ms 40ms } /* pause-before: 30ms; pause-after: 40ms */
H3 { pause-after: 10ms } /* pause-before: ?; pause-after: 10ms */

19.5 Cue properties: 'cue-before', 'cue-after', and 'cue'

'cue-before'

Value:	<uri> \| none \| inherit
Initial:	none
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	aural

'cue-after'

Value:	<uri> \| none \| inherit
Initial:	none
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	aural

Auditory icons are another way to distinguish semantic elements. Sounds may be played before and/or after the element to delimit it. Values have the following meanings:

<uri>: The URI must designate an auditory icon resource. If the URI resolves to something other than an audio file, such as an image, the resource should be ignored and the property treated as if it had the value 'none'.
none: No auditory icon is specified.

A {cue-before: url("bell.aiff"); cue-after: url("dong.wav") }
H1 {cue-before: url("pop.au"); cue-after: url("pop.au") }

'cue'

Value:	[ <'cue-before'> \|\| <'cue-after'> ] \| inherit
Initial:	not defined for shorthand properties
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	aural

The 'cue' property is a shorthand for setting 'cue-before' and 'cue-after'. If two values are given, the first value is 'cue-before' and the second is 'cue-after'. If only one value is given, it applies to both properties.

The following two rules are equivalent:

H1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
H1 {cue: url("pop.au") }

If a user agent cannot render an auditory icon (e.g., the user's environment does not permit it), we recommend that it produce an alternative cue (e.g., popping up a warning, emitting a warning sound, etc.)

Please see the sections on the :before and :after pseudo-elements for information on other content generation techniques.

19.6 Mixing properties: 'play-during'

'play-during'

Value:	<uri> mix? repeat? \| auto \| none \| inherit
Initial:	auto
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	aural

Similar to the 'cue-before' and 'cue-after' properties, this property specifies a sound to be played as a background while an element's content is spoken. Values have the following meanings:

<uri>: The sound designated by this <uri> is played as a background while the element's content is spoken.
mix: When present, this keyword means that the sound inherited from the parent element's 'play-during' property continues to play and the sound designated by the <uri> is mixed with it. If 'mix' is not specified, the element's background sound replaces the parent's.
repeat: When present, this keyword means that the sound will repeat if it is too short to fill the entire duration of the element. Otherwise, the sound plays once and then stops. This is similar to the 'background-repeat' property. If the sound is too long for the element, it is clipped once the element has been spoken.
auto: The sound of the parent element continues to play (it is not restarted, which would have been the case if this property had been inherited).
none: This keyword means that there is silence. The sound of the parent element (if any) is silent during the current element and continues after the current element.

BLOCKQUOTE.sad { play-during: url("violins.aiff") }
BLOCKQUOTE Q   { play-during: url("harp.wav") mix }
SPAN.quiet     { play-during: none }

19.7 Spatial properties: 'azimuth' and 'elevation'

Spatial audio is an important stylistic property for aural presentation. It provides a natural way to tell several voices apart, as in real life (people rarely all stand in the same spot in a room). Stereo speakers produce a lateral sound stage. Binaural headphones or the increasingly popular 5-speaker home theater setups can generate full surround sound, and multi-speaker setups can create a true three-dimensional sound stage. VRML 2.0 also includes spatial audio, which implies that in time consumer-priced spatial audio hardware will become more widely available.

'azimuth'

Value:	<angle> \| [[ left-side \| far-left \| left \| center-left \| center \| center-right \| right \| far-right \| right-side ] \|\| behind ] \| leftwards \| rightwards \| inherit
Initial:	center
Applies to:	all elements
Inherited:	yes
Percentages:	N/A
Media:	aural