aural.html

CSS lets learn this step by step...

</table>
</dl>
</div>


<div class="propdef">
<dl><dt>
<span class="index-def" title="'pause-after'"><a name="propdef-pause-after" class="propdef-title"><strong>'pause-after'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-time" class="noxref"><span class="value-inst-time">&lt;time&gt;</span></a> | <a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>depends on user agent
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>see prose
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#aural-media-group" class="noxref">aural</a>
</table>
</dl>
</div>



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

<dl>
<dt><span class="index-inst" title="&lt;time&gt;"><a name="x10" href="syndata.html#value-def-time" class="noxref"><span class="value-inst-time"><strong>&lt;time&gt;</strong></span></a></span>
<dd>Expresses the pause in absolute time units (seconds and milliseconds).
<dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x11" href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
<dd>Refers to the inverse of the value of the
<a href="aural.html#propdef-speech-rate" class="noxref"><span class="propinst-speech-rate">'speech-rate'</span></a> property.
For example, if the speech-rate is 120 words per minute
(i.e., a word takes half a second, or 500ms) then a <a href="aural.html#propdef-pause-before" class="noxref"><span
class="propinst-pause-before">'pause-before'</span></a> of 100% means a
pause of 500 ms and a <a href="aural.html#propdef-pause-before" class="noxref"><span
class="propinst-pause-before">'pause-before'</span></a> of 20% means
100ms.
</dl>

<p>The pause is inserted between the element's content and any <a href="aural.html#propdef-cue-before" class="noxref"><span
class="propinst-cue-before">'cue-before'</span></a> or <a href="aural.html#propdef-cue-after" class="noxref"><span
class="propinst-cue-after">'cue-after'</span></a> content.

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

<div class="propdef">
<dl><dt>
<span class="index-def" title="'pause'"><a name="propdef-pause" class="propdef-title"><strong>'pause'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>[ [<a href="syndata.html#value-def-time" class="noxref"><span class="value-inst-time">&lt;time&gt;</span></a> | <a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a>]{1,2} ] | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>depends on user agent
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>see descriptions of 'pause-before' and 'pause-after'
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#aural-media-group" class="noxref">aural</a>
</table>
</dl>
</div>


<P>The <a href="aural.html#propdef-pause" class="noxref"><span class="propinst-pause">'pause'</span></a> property is a
shorthand for setting <a href="aural.html#propdef-pause-before" class="noxref"><span
class="propinst-pause-before">'pause-before'</span></a> and <a href="aural.html#propdef-pause-after" class="noxref"><span
class="propinst-pause-after">'pause-after'</span></a>.  If two values are
given, the first value is <a href="aural.html#propdef-pause-before" class="noxref"><span
class="propinst-pause-before">'pause-before'</span></a> and the second is
<a href="aural.html#propdef-pause-after" class="noxref"><span class="propinst-pause-after">'pause-after'</span></a>. If only one
value is given, it applies to both properties.

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
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 */
</PRE>
</div>

<H2>19.5 <a name="cue-props">Cue properties</a>: <a href="aural.html#propdef-cue-before" class="noxref"><span
class="propinst-cue-before">'cue-before'</span></a>, <a href="aural.html#propdef-cue-after" class="noxref"><span
class="propinst-cue-after">'cue-after'</span></a>, and <a href="aural.html#propdef-cue" class="noxref"><span
class="propinst-cue">'cue'</span></a></H2>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'cue-before'"><a name="propdef-cue-before" class="propdef-title"><strong>'cue-before'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-uri" class="noxref"><span class="value-inst-uri">&lt;uri&gt;</span></a> | none | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>none
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#aural-media-group" class="noxref">aural</a>
</table>
</dl>
</div>


<div class="propdef">
<dl><dt>
<span class="index-def" title="'cue-after'"><a name="propdef-cue-after" class="propdef-title"><strong>'cue-after'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-uri" class="noxref"><span class="value-inst-uri">&lt;uri&gt;</span></a> | none | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>none
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#aural-media-group" class="noxref">aural</a>
</table>
</dl>
</div>


<P>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:</p>

<dl>
<dt><span class="index-inst" title="&lt;uri&gt;"><a name="x15" href="syndata.html#value-def-uri" class="noxref"><span class="value-inst-uri"><strong>&lt;uri&gt;</strong></span></a></span>
<dd> 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'.

<dt><strong>none</strong>
<dd> No auditory icon is specified.
</dl>

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
A {cue-before: url("bell.aiff"); cue-after: url("dong.wav") }
H1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
</pre>
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'cue'"><a name="propdef-cue" class="propdef-title"><strong>'cue'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>[ <a href="aural.html#propdef-cue-before" class="noxref"><span class="propinst-cue-before">&lt;'cue-before'&gt;</span></a> || <a href="aural.html#propdef-cue-after" class="noxref"><span class="propinst-cue-after">&lt;'cue-after'&gt;</span></a> ] | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>not defined for shorthand properties
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#aural-media-group" class="noxref">aural</a>
</table>
</dl>
</div>


<P>The <a href="aural.html#propdef-cue" class="noxref"><span class="propinst-cue">'cue'</span></a> property is a shorthand
for setting <a href="aural.html#propdef-cue-before" class="noxref"><span class="propinst-cue-before">'cue-before'</span></a>
and <a href="aural.html#propdef-cue-after" class="noxref"><span class="propinst-cue-after">'cue-after'</span></a>.  If two
values are given, the first value is <a href="aural.html#propdef-cue-before" class="noxref"><span
class="propinst-cue-before">'cue-before'</span></a> and the second is
<a href="aural.html#propdef-cue-after" class="noxref"><span class="propinst-cue-after">'cue-after'</span></a>. If only one
value is given, it applies to both properties.</p>

<div class="example"><P style="display:none">Example(s):</P><P>
The following two rules are equivalent:
<PRE>
H1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
H1 {cue: url("pop.au") }
</pre>
</div>

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

<P>Please see the sections on <a
href="generate.html#before-after-content"> the :before and :after
pseudo-elements</a> for information on other content generation
techniques.

<H2>19.6 <a name="mixing-props">Mixing properties</a>: <a href="aural.html#propdef-play-during" class="noxref"><span
class="propinst-play-during">'play-during'</span></a></H2>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'play-during'"><a name="propdef-play-during" class="propdef-title"><strong>'play-during'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-uri" class="noxref"><span class="value-inst-uri">&lt;uri&gt;</span></a> mix? repeat? | auto | none | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>auto
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#aural-media-group" class="noxref">aural</a>
</table>
</dl>
</div>


<p>Similar to the <a href="aural.html#propdef-cue-before" class="noxref"><span
class="propinst-cue-before">'cue-before'</span></a> and <a href="aural.html#propdef-cue-after" class="noxref"><span
class="propinst-cue-after">'cue-after'</span></a> properties, this
property specifies a sound to be played as a background
while an element's content is spoken.
Values have the following meanings:</p>

<dl>
<dt><span class="index-inst" title="&lt;uri&gt;"><a name="x18" href="syndata.html#value-def-uri" class="noxref"><span class="value-inst-uri"><strong>&lt;uri&gt;</strong></span></a></span>
<dd>The sound designated by this <span class="index-inst"
title="&lt;uri&gt;"><a name="x19" href="syndata.html#value-def-uri" class="noxref"><span
class="value-inst-uri">&lt;uri&gt;</span></a></span> is played
as a background while the element's content is spoken.
<dt><strong>mix</strong>
<dd>When present, this keyword means that
the sound inherited from the parent element's <a href="aural.html#propdef-play-during" class="noxref"><span
class="propinst-play-during">'play-during'</span></a> property continues
to play and the sound designated by the <span
class="index-inst" title="&lt;uri&gt;"><a name="x20" href="syndata.html#value-def-uri" class="noxref"><span
class="value-inst-uri">&lt;uri&gt;</span></a></span> is mixed with it. If
'mix' is not specified, the element's background sound replaces
the parent's.
<dt><strong>repeat</strong>
<dd>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 <a href="colors.html#propdef-background-repeat" class="noxref"><span
class="propinst-background-repeat">'background-repeat'</span></a>
property. If the sound is too long for the element, it is clipped once
the element has been spoken.
<dt><strong>auto</strong>
<dd>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).
<dt><strong>none</strong>
<dd>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.
</dl>

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
BLOCKQUOTE.sad { play-during: url("violins.aiff") }