CSS: The Definitive Guide, 3rd Edition (65 page)
Read CSS: The Definitive Guide, 3rd Edition Online
Authors: Eric A. Meyer
Tags: #COMPUTERS / Web / Page Design
To this point,
we've talked about ways to affect the aural presentation, but what we haven't
discussed is a way to choose the voice used to aurally render content. Likefont-family, CSS defines a property calledvoice-family.
voice-family
- Values:
[[
| ],]*
[| ] | inherit- Initial value:
User agent-dependent
- Applies to:
All elements
- Inherited:
Yes
- Computed value:
As specified
As withfont-family,voice-familyallows the author to supply a comma-separated list of
voices that can be used to render an element's content. The user agent looks for the
first voice in the list and uses it if it's available. If not, the user agent looks
for the next voice in the list, and so on, until it either finds a specific voice or
runs out of specified voices.
Because of the way the value syntax is defined, you can provide a number of
specific or generic families in any order. Therefore, you can end your value with a
specific family instead of a generic one. For example:
h1 {voice-family: Mark, male, Joe;}
CSS2.x does not define generic family values, but mentions thatmale,female, andchildare all possible. Therefore, you might
style the elements of an XML document as follows:
rosen {voice-family: Gary, Scott, male;}
guild {voice-family: Tim, Jim, male;}
claud {voice-family: Donald, Ian, male;}
gertr {voice-family: Joanna, Susan, female;}
albert {voice-family: Bobby, Paulie, child;}
The actual voice chosen to render a given element will affect the way the user
perceives that element, since some voices will be pitched higher or lower than
others, or may be more or less monotone. CSS provides ways to affect these aspects of
a voice as well.
Once you've directed the user agent to use a
particular voice in the aural rendering of the content, you might want to alter some
of its aspects. For example, a voice might sound right, except it's pitched too high
for your liking. Another voice might be a little too "dynamic," but otherwise meets
your needs. CSS defines properties to affect all of the vocal aspects.
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 propertypitch.
pitch
- Values:
| x-low|low|medium|high|x-high|inherit- Initial value:
medium- Applies to:
All elements
- Inherited:
Yes
- Computed value:
The absolute frequency value
There is no explicit definition of the keywordsx-lowthroughx-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 keywordsxx-smallthroughxx-largeare 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, thenh1elements 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 propertypitch-range.
pitch-range
- Values:
| inherit- Initial value:
50- Applies to:
All elements
- Inherited:
Yes
- Computed value:
As specified
The purpose ofpitch-rangeis 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.
richness
A companion property topitch-rangeisstress, which is intended to help authors minimize or exaggerate the
stress patterns in a language.
stress
- Values:
| inherit- Initial value:
50- Applies to:
All elements
- Inherited:
Yes
- Computed value:
As specified
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.stressvalues 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 tostressisrichness.
richness
- Values:
| inherit- Initial value:
50- Applies to:
All elements
- Inherited:
Yes
- Computed value:
As specified
The higher a voice'srichnessvalue, 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 givenrichness:80;and a
sotto voce
aside might getrichness:25;.
In visual
design, you can draw extra attention to an element by giving it extra margins to
separate it from everything else, or by adding borders. This draws the eye toward
these elements. In aural presentation, the closest equivalent is the ability to
insert pauses and audible cues around an element.
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, andpause.
pause-before, pause-after
- Values:
- Initial value:
0- Apply to:
All elements
- Inherited:
No
- Computed value:
The absolute time value
With the
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 ofspeech-rate. No,
really! Let's see how this works. First, consider the following:
h1 {speech-rate: 180;}
This means anyh1element 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, so200%of that is 666.66 milliseconds. Put another way, there will be a
pause before eachh1of about two-thirds of a
second. If you alter the rule so thespeech-ratevalue is120, the pause
will be a full second long.
The shorthandpausebrings togetherpause-beforeandpause-after.
pause
- Values:
[[
- Initial value:
0- Applies to:
All elements
- Inherited:
No
- Computed value:
See individual properties (
pause-before, etc.)
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, andcue.
cue-before, cue-after
- Values:
| none|inherit- Initial value:
none- Applies to:
All elements
- Inherited:
No
- Computed value:
For
values, the absolute URI; otherwise, none
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 propertycueacts as you'd
expect.
cue
- Values:
[
|| ] | inherit- Initial value:
none- Applies to:
All elements
- Inherited:
No
- Computed value:
See individual properties (
cue-before, etc.)
As withpause, supplying a single
value forcuemeans 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);}
generated content
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.