Appendix A. Aural style sheets

This chapter is informative. UAs are not required to implement the properties of this chapter in order to conform to CSS 2.2.

A.1 The media types 'aural' and 'speech'

We expect that in a future level of CSS there will be new properties and values defined for speech output. Therefore CSS 2.2 reserves the 'speech' media type (see chapter 7, "Media types"), but does not yet define which properties do or do not apply to it.

The properties in this appendix apply to a media type 'aural', that was introduced in CSS2. The type 'aural' is now deprecated.

@media speech {
  body { voice-family: Paul }
}

@media aural {
  body { voice-family: Paul }
}

A.2 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 }

A.2.1 Angles

Angle values are denoted by <angle> in the text. Their format is a <number> immediately followed by an angle unit identifier.

Angle unit identifiers are:

• deg: degrees
• grad: grads
• rad: radians

Angle values may be negative. They should be normalized to the range 0-360deg by the user agent. For example, -10deg and 350deg are equivalent.

For example, a right angle is '90deg' or '100grad' or '1.570796326794897rad'.

Like for <length>, the unit may be omitted, if the value is zero: '0deg' may be written as '0'.

A.2.2 Times

Time values are denoted by <time> in the text. Their format is a <number> immediately followed by a time unit identifier.

Time unit identifiers are:

• ms: milliseconds
• s: seconds

Time values may not be negative.

Like for <length>, the unit may be omitted, if the value is zero: '0s' may be written as '0'.

A.2.3 Frequencies

Frequency values are denoted by <frequency> in the text. Their format is a <number> immediately followed by a frequency unit identifier.

Frequency unit identifiers are:

• Hz: Hertz
• kHz: kilohertz

Frequency values may not be negative.

For example, 200Hz (or 200hz) is a bass sound, and 6kHz is a treble sound.

Like for <length>, the unit may be omitted, if the value is zero: '0Hz' may be written as '0'.

A.3 Volume properties: 'volume'

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.

A.4 Speaking properties: 'speak'

This property specifies whether text will be rendered aurally and if so, in what manner. 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).

A.5 Pause properties: 'pause-before', 'pause-after', and 'pause'

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

Note. In CSS3 pauses are inserted around the cues and content rather than between them. See [CSS3SPEECH] for details.

<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.

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 unspecified; pause-after: 10ms */

A.6 Cue properties: 'cue-before', 'cue-after', and 'cue'

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") }

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.

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.

Please see the sections on the :before and :after pseudo-elements for information on other content generation techniques. 'Cue-before' sounds and 'pause-before' gaps are inserted before content from the ':before' pseudo-element. Similarly, 'pause-after' gaps and 'cue-after' sounds are inserted after content from the ':after' pseudo-element.

A.7 Mixing properties: 'play-during'

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 }

A.8 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.

Values have the following meanings:

<angle>

Position is described in terms of an angle within the range '-360deg' to '360deg'. The value '0deg' means directly ahead in the center of the sound stage. '90deg' is to the right, '180deg' behind, and '270deg' (or, equivalently and more conveniently, '-90deg') to the left.

left-side

Same as '270deg'. With 'behind', '270deg'.

far-left

Same as '300deg'. With 'behind', '240deg'.

left

Same as '320deg'. With 'behind', '220deg'.

center-left

Same as '340deg'. With 'behind', '200deg'.

center

Same as '0deg'. With 'behind', '180deg'.

center-right

Same as '20deg'. With 'behind', '160deg'.

right

Same as '40deg'. With 'behind', '140deg'.

far-right

Same as '60deg'. With 'behind', '120deg'.

right-side

Same as '90deg'. With 'behind', '90deg'.

leftwards

Moves the sound to the left, relative to the current angle. More precisely, subtracts 20 degrees. Arithmetic is carried out modulo 360 degrees. Note that 'leftwards' is more accurately described as "turned counter-clockwise," since it always subtracts 20 degrees, even if the inherited azimuth is already behind the listener (in which case the sound actually appears to move to the right).

rightwards

Moves the sound to the right, relative to the current angle. More precisely, adds 20 degrees. See 'leftwards' for arithmetic.

This property is most likely to be implemented by mixing the same signal into different channels at differing volumes. It might also use phase shifting, digital delay, and other such techniques to provide the illusion of a sound stage. The precise means used to achieve this effect and the number of speakers used to do so are user agent-dependent; this property merely identifies the desired end result.

h1   { azimuth: 30deg }
td.a { azimuth: far-right }          /*  60deg */
#12  { azimuth: behind far-right }   /* 120deg */
p.comment { azimuth: behind }        /* 180deg */

If spatial-azimuth is specified and the output device cannot produce sounds behind the listening position, user agents should convert values in the rearwards hemisphere to forwards hemisphere values. One method is as follows:

• if 90deg < x <= 180deg then x := 180deg - x
• if 180deg < x <= 270deg then x := 540deg - x

Values of this property have the following meanings:

<angle>

Specifies the elevation as an angle, between '-90deg' and '90deg'. '0deg' means on the forward horizon, which loosely means level with the listener. '90deg' means directly overhead and '-90deg' means directly below.

below

Same as '-90deg'.

level

Same as '0deg'.

above

Same as '90deg'.

higher

Adds 10 degrees to the current elevation.

lower

Subtracts 10 degrees from the current elevation.

The precise means used to achieve this effect and the number of speakers used to do so are undefined. This property merely identifies the desired end result.

h1   { elevation: above }
tr.a { elevation: 60deg }
tr.b { elevation: 30deg }
tr.c { elevation: level }

A.9 Voice characteristic properties: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', and 'richness'

This property specifies the speaking rate. Note that both absolute and relative keyword values are allowed (compare with 'font-size'). Values have the following meanings:

<number>

Specifies the speaking rate in words per minute, a quantity that varies somewhat by language but is nevertheless widely supported by speech synthesizers.

x-slow

Same as 80 words per minute.

slow

Same as 120 words per minute

medium

Same as 180 - 200 words per minute.

fast

Same as 300 words per minute.

x-fast

Same as 500 words per minute.

faster

Adds 40 words per minute to the current speech rate.

slower

Subtracts 40 words per minutes from the current speech rate.

The value is a comma-separated, prioritized list of voice family names (compare with 'font-family'). Values have the following meanings:

<generic-voice>

Values are voice families. Possible values are 'male', 'female', and 'child'.

<specific-voice>

Values are specific instances (e.g., comedian, trinoids, carlos, lani).

h1 { voice-family: announcer, male }
p.part.romeo  { voice-family: romeo, male }
p.part.juliet { voice-family: juliet, female }

Names of specific voices may be quoted, and indeed must be quoted if any of the words that make up the name does not conform to the syntax rules for identifiers. It is also recommended to quote specific voices with a name consisting of more than one word. If quoting is omitted, any white space characters before and after the voice family name are ignored and any sequence of white space characters inside the voice family name is converted to a single space.

Specifies the average pitch (a frequency) of the speaking voice. The average pitch of a voice depends on the voice family. For example, the average pitch for a standard male voice is around 120Hz, but for a female voice, it's around 210Hz.

Values have the following meanings:

<frequency>

Specifies the average pitch of the speaking voice in hertz (Hz).

x-low, low, medium, high, x-high

These values do not map to absolute frequencies since these values depend on the voice family. User agents should map these values to appropriate frequencies based on the voice family and user environment. However, user agents must map these values in order (i.e., 'x-low' is a lower frequency than 'low', etc.).

Specifies variation in average pitch. The perceived pitch of a human voice is determined by the fundamental frequency and typically has a value of 120Hz for a male voice and 210Hz for a female voice. Human languages are spoken with varying inflection and pitch; these variations convey additional meaning and emphasis. Thus, a highly animated voice, i.e., one that is heavily inflected, displays a high pitch range. This property specifies the range over which these variations occur, i.e., how much the fundamental frequency may deviate from the average pitch.

Values have the following meanings:

<number>

A value between '0' and '100'. A pitch range of '0' produces a flat, monotonic voice. A pitch range of 50 produces normal inflection. Pitch ranges greater than 50 produce animated voices.

Specifies the height of "local peaks" in the intonation contour of a voice. For example, English is a stressed language, and different parts of a sentence are assigned primary, secondary, or tertiary stress. The value of 'stress' controls the amount of inflection that results from these stress markers. This property is a companion to the 'pitch-range' property and is provided to allow developers to exploit higher-end auditory displays.

Values have the following meanings:

<number>

A value, between '0' and '100'. The meaning of values depends on the language being spoken. For example, a level of '50' for a standard, English-speaking male voice (average pitch = 122Hz), speaking with normal intonation and emphasis would have a different meaning than '50' for an Italian voice.

Specifies the richness, or brightness, of the speaking voice. A rich voice will "carry" in a large room, a smooth voice will not. (The term "smooth" refers to how the wave form looks when drawn.)

Values have the following meanings:

<number>

A value between '0' and '100'. The higher the value, the more the voice will carry. A lower value will produce a soft, mellifluous voice.

A.10 Speech properties: 'speak-punctuation' and 'speak-numeral'

An additional speech property, 'speak-header', is described below.

This property specifies how punctuation is spoken. Values have the following meanings:

code

Punctuation such as semicolons, braces, and so on are to be spoken literally.

none

Punctuation is not to be spoken, but instead rendered naturally as various pauses.

This property controls how numerals are spoken. Values have the following meanings:

digits

Speak the numeral as individual digits. Thus, "237" is spoken "Two Three Seven".

continuous

Speak the numeral as a full number. Thus, "237" is spoken "Two hundred thirty seven". Word representations are language-dependent.

A.11 Audio rendering of tables

When a table is spoken by a speech generator, the relation between the data cells and the header cells must be expressed in a different way than by horizontal and vertical alignment. Some speech browsers may allow a user to move around in the 2-dimensional space, thus giving them the opportunity to map out the spatially represented relations. When that is not possible, the style sheet must specify at which points the headers are spoken.

A.11.1 Speaking headers: the 'speak-header' property

This property specifies whether table headers are spoken before every cell, or only before a cell when that cell is associated with a different header than the previous cell. Values have the following meanings:

once

The header is spoken one time, before a series of cells.

always

The header is spoken before every pertinent cell.

Each document language may have different mechanisms that allow authors to specify headers. For example, in HTML 4 ([HTML4]), it is possible to specify header information with three different attributes ("headers", "scope", and "axis"), and the specification gives an algorithm for determining header information when these attributes have not been specified.

<TABLE>
<CAPTION>Travel Expense Report</CAPTION>
<TR>
  <TH></TH>
  <TH>Meals</TH>
  <TH>Hotels</TH>
  <TH>Transport</TH>
  <TH>subtotal</TH>
</TR>
<TR>
  <TH id="san-jose" axis="san-jose">San Jose</TH>
</TR>
<TR>
  <TH headers="san-jose">25-Aug-97</TH>
  <TD>37.74</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">26-Aug-97</TH>
  <TD>27.28</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">subtotal</TH>
  <TD>65.02</TD>
  <TD>224.00</TD>
  <TD>90.00</TD>
  <TD>379.02</TD>
</TR>
<TR>
  <TH id="seattle" axis="seattle">Seattle</TH>
</TR>
<TR>
  <TH headers="seattle">27-Aug-97</TH>
  <TD>96.25</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">28-Aug-97</TH>
  <TD>35.00</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">subtotal</TH>
  <TD>131.25</TD>
  <TD>218.00</TD>
  <TD>72.00</TD>
  <TD>421.25</TD>
</TR>
<TR>
  <TH>Totals</TH>
  <TD>196.27</TD>
  <TD>442.00</TD>
  <TD>162.00</TD>
  <TD>800.27</TD>
</TR>
</TABLE>

  San Jose, 25-Aug-97, Meals:  37.74
  San Jose, 25-Aug-97, Hotels:  112.00
  San Jose, 25-Aug-97, Transport:  45.00
 ...

San Jose, 25-Aug-97, Meals: 37.74
    Hotels: 112.00
    Transport: 45.00
  26-Aug-97, Meals: 27.28
    Hotels: 112.00
...

A.12 Sample style sheet for HTML

This style sheet describes a possible rendering of HTML 4:

@media aural {
h1, h2, h3, 
h4, h5, h6    { voice-family: paul, male; stress: 20; richness: 90 }
h1            { pitch: x-low; pitch-range: 90 }
h2            { pitch: x-low; pitch-range: 80 }
h3            { pitch: low; pitch-range: 70 }
h4            { pitch: medium; pitch-range: 60 }
h5            { pitch: medium; pitch-range: 50 }
h6            { pitch: medium; pitch-range: 40 }
li, dt, dd    { pitch: medium; richness: 60 }
dt            { stress: 80 }
pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
em            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
strong        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
dfn           { pitch: high; pitch-range: 60; stress: 60 }
s, strike     { richness: 0 }
i             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
b             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
u             { richness: 0 }
a:link        { voice-family: harry, male }
a:visited     { voice-family: betty, female }
a:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}

A.13 Emacspeak

For information, here is the list of properties implemented by Emacspeak, a speech subsystem for the Emacs editor.

• voice-family
• stress (but with a different range of values)
• richness (but with a different range of values)
• pitch (but with differently named values)
• pitch-range (but with a different range of values)

(We thank T. V. Raman for the information about implementation status of aural properties.)