CSS: The Definitive Guide, 3rd Edition (65 page)

voice-family

Obviously, different voices have different pitches. To pick the most basic of
examples, male voices average around 120Hz, whereas female voices average in the
vicinity of 210Hz. Thus, every voice family will have its own default pitch, which
CSS allows authors to alter using the property
pitch
.

There is no explicit definition of the keywords
x-low
through
x-high
, so all that
can be said about them is that each one will be a higher pitch than the one before
it. This is similar to the way the font-size keywords
xx-small
through
xx-large
are not
precisely defined, but each must be larger than the one preceding it.

Frequency values are a different matter. If you define an explicit pitch
frequency, the voice will be altered so that its average pitch matches the value
you supply. For example:

h1 {pitch: 150Hz;}

The effects can be dramatic if an unexpected voice is used. Let's consider an
example where an element is given two voice-family possibilities and a pitch
frequency:

h1 {voice-family: Jethro, Susie; pitch: 100Hz;}

For the purposes of this example, assume that the default pitch of "Jethro" is
110Hz, and the default pitch for "Susie" is 200Hz. If "Jethro" gets picked, then
h1
elements will be read with the voice
pitched slightly lower than normal. If "Jethro" isn't available and "Susie" is
used instead, there will be an enormous, and potentially bizarre, change from the
voice's default.

Regardless of what pitch is used in an element's rendering, you can influence
the dynamic range of the pitch by using the property
pitch-range
.

The purpose of
pitch-range
is to raise or
lower the inflection in a given voice. The lower the pitch range, the closer all
pitches will be to the average, resulting in a monotone voice. The default value,
50
, yields "normal" inflections. Values
higher than that will increase the degree of "animation" in the voice.

A companion property to
pitch-range
is
stress
, which is intended to help authors minimize or exaggerate the
stress patterns in a language.

Every human language has, to some degree, stress patterns. In
English, for example, sentences have different parts that call for different
stress. The previous sentence might look something like
this:

In English,
for example,
sentences have different parts that call for
different stress.

A
style sheet defining stress levels for each portion of the sentence might
say:

primary {stress: 65;}
secondary {stress: 50;}
tertiary {stress: 33;}

This
leads to a decrease in stress for the less important parts of a sentence, and a
greater stress on the parts that are considered more important.
stress
values are language-dependent, so the same
value may lead to different stress levels and patterns. CSS does not define such
differences (which probably doesn't surprise you by now).

Similar in
many ways to
stress
is
richness
.

The higher a voice's
richness
value, the greater its "brightness" and the more it will "carry" in a room. Lower
values will lead to a softer, more "mellifluous" voice (to quote the CSS2
specification). Thus, an actor's soliloquy might be given
richness
:
80;
and a
sotto voce
aside might get
richness
:
25;
.

All spoken language relies on
pauses of some form. The short gaps between words, phrases, and sentences are as
critical to understanding the meaning as the words themselves. In a sense, pauses
are like the auditory equivalent of margins, in that both serve to separate the
element from its surrounding content. In CSS, three properties can be used to
insert pauses into a document:
pause-before
,
pause-after
, and
pause
.

With the value format, you can express the length of a pause in
either seconds or milliseconds. For example, let's say you want a full two-second
pause after an
h1
element. Either of the
following rules have that effect:

h1 {pause-after: 2s;}
h1 {pause-after: 2000ms;}  /* the same length of time as '2s' */

Percentages are a little trickier, as they are calculated in relation to a
measure-implied value of
speech-rate
. No,
really! Let's see how this works. First, consider the following:

h1 {speech-rate: 180;}

This means any
h1
element will be aurally
rendered at about three words per second. Now consider:

h1 {speech-rate: 180; pause-before: 200%;}

The percentage is calculated based on the average word length. In this case, a
word will take 333.33 milliseconds to speak, so
200%
of that is 666.66 milliseconds. Put another way, there will be a
pause before each
h1
of about two-thirds of a
second. If you alter the rule so the
speech-rate
value is
120
, the pause
will be a full second long.

The shorthand
pause
brings together
pause-before
and
pause-after
.

If you supply only one value, it's taken as the pause value both before and
after an element. If you supply two values, the first one is the pause before the
element, and the second one is the pause after. Thus, the following rules are all
equivalent:

pre {pause: 1s;}
pre {pause: 1s 1s;}
pre {pause-before: 1s; pause-after: 1s;}

If pauses aren't enough to call attention to an
element, you can insert audio cues before and after it, which are the auditory
equivalent of borders. Like the pause properties, there are three cue properties:
cue-before
,
cue-after
, and
cue
.

By supplying the URI of an audio resource, the user agent is directed
to load that resource and play it before (or after) an element. Suppose you want
to precede each unvisited hyperlink in a document with a chime, and every visited
link with a beep. The rules would look something like
this:

a:link {cue-before: url(chime.mp3);}
a:visited {cue-before: url(beep.wav);}

The
shorthand property
cue
acts as you'd
expect.

As with
pause
, supplying a single
value for
cue
means that value will be used for
both the before and after cues. Supplying two values means the first is used for
the before cue, and the second is used for the after cue. Therefore, the following
rules are all
equivalent:

a[href] {cue: url(ping.mp3);}
a[href] {cue: url(ping.mp3) url(ping.mp3);}
a[href] {cue-before: url(ping.mp3); cue-after: url(ping.mp3);}

Both pauses and
cues are played "outside" any generated content.
Consider:

h1 {cue: url(trumpet.mp3);}
h1:before {content: "Behold! ";}
h1:after {content: ". Verily!";}
The Beginning

The
audio rendering of this element would be, roughly, "(trumpets) Behold! The
Beginning. Verily! (trumpets)."

CSS does not specify whether pauses go
"outside" cues or vice versa, so the behavior of auditory user agents in this
regard cannot be predicted.