- From: Daniel Weck via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 10 May 2011 20:41:38 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-speech
In directory hutz:/tmp/cvs-serv819
Modified Files:
Overview.html Overview.src.html
Log Message:
introduction now split into several sections, substantial prose improvements and cleaned-up examples.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-speech/Overview.html,v
retrieving revision 1.43
retrieving revision 1.44
diff -u -d -r1.43 -r1.44
--- Overview.html 10 May 2011 16:11:39 -0000 1.43
+++ Overview.html 10 May 2011 20:41:36 -0000 1.44
@@ -1,73 +1,75 @@
-<!-- !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
<html lang=en>
<head>
- <title>CSS3 Speech Module</title>
+ <title>CSS Speech Module</title>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<link href="http://dev.w3.org/csswg/default.css" rel=stylesheet
type="text/css">
[...1126 lines suppressed...]
+ title=voice-pitch><strong>8.3.</strong></a>
<li>voice-pitch-range, <a href="#voice-pitch-range"
- title=voice-pitch-range><strong>9.4.</strong></a>
+ title=voice-pitch-range><strong>8.4.</strong></a>
<li>voice-rate, <a href="#voice-rate"
- title=voice-rate><strong>9.2.</strong></a>
+ title=voice-rate><strong>8.2.</strong></a>
<li>voice-stress, <a href="#voice-stress"
- title=voice-stress><strong>9.4.</strong></a>
+ title=voice-stress><strong>8.4.</strong></a>
<li>voice-volume, <a href="#voice-volume"
- title=voice-volume><strong>4.1.</strong></a>
+ title=voice-volume><strong>3.1.</strong></a>
</ul>
<!--end-index-->
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-speech/Overview.src.html,v
retrieving revision 1.44
retrieving revision 1.45
diff -u -d -r1.44 -r1.45
--- Overview.src.html 10 May 2011 16:11:39 -0000 1.44
+++ Overview.src.html 10 May 2011 20:41:36 -0000 1.45
@@ -1,77 +1,78 @@
-<!-- !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
- <title>CSS3 Speech Module</title>
+ <title>CSS Speech Module</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="http://dev.w3.org/csswg/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
+ *:target
+ {
+ border : 1px dashed #66CC66;
+ }</style>
+ <!--
.prod
{
- font-family : inherit;
- font-size : inherit
+ font-family : inherit;
+ font-size : inherit
}
pre.prod
{
- white-space : pre-wrap;
- margin : 1em 0 1em 2em
+ white-space : pre-wrap;
+ margin : 1em 0 1em 2em
}
code
{
- font-size : inherit;
+ font-size : inherit;
}
#box-shadow-samples td
{
- background : white;
- color : black;
+ background : white;
+ color : black;
}
caption
{
- text-align : left;
- font-weight : bold
+ text-align : left;
+ font-weight : bold
}
.note
{
- font-style : italic
+ font-style : italic
}
.issue
{
- color : maroon;
- font-style : italic
+ color : maroon;
+ font-style : italic
}
div.example pre
{
- color : green;
- margin-left : 2em
+ color : green;
+ margin-left : 2em
}
dl
{
- margin-left : 2em
+ margin-left : 2em
}
caption dfn
{
- font-size : 120%
+ font-size : 120%
}
-
- *:target
- {
- border : 1px dashed #66CC66;
- }</style>
+ -->
<!-- link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" -->
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head">
<!--logo-->
- <h1 id="top">CSS3 Speech Module</h1>
+ <h1 id="top">CSS Speech Module</h1>
<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
<dl>
<dt>This version:</dt>
@@ -102,57 +103,59 @@
<hr title="Separator for header" />
</div>
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
- <p>CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML
- documents on various supports, such as on screen, on paper, in speech, etc. This specification
- defines aural CSS properties that allow control over the rendering of such documents via
- speech synthesis, and which are designed to match the model described in the Speech Synthesis
- Markup Language (SSML) Version 1.0 [[!SPEECH-SYNTHESIS]]. </p>
- <p> Note that this specification has been developed in cooperation with the <a
- href="http://www.w3.org/Voice/">Voice Browser Activity</a>. </p>
+ <p>CSS (Cascading Style Sheets) is a language that describes the rendering of markup documents
+ (e.g. HTML, XML) on various supports, such as screen, paper, speech, etc. The Speech Module
+ defines aural CSS properties that enable authors to declaratively control the rendering of
+ documents via speech synthesis, and using optional audio cues. The feature set exposed by this
+ specification is designed to match the model described by the Speech Synthesis Markup Language
+ (SSML) Version 1.0 [[!SPEECH-SYNTHESIS]]. Note that this standard was developed in cooperation
+ with the <a href="http://www.w3.org/Voice/">Voice Browser Activity</a>.</p>
<h2 class="no-num no-toc" id="status">Status of this document</h2>
<!--status-->
<p> </p>
<hr />
- <!-- p>The following features are judged "at risk" and may be dropped at the
+ <div class="issue">
+ <!-- p>The following features are judged "at risk" and may be dropped at the
end of the CR period,
especially if there has not been enough interest from implementers:
<ul>
</ul>
</p -->
- <!-- li><a href="#issue-mark">mark</a></li -->
- <p>The following issues need to be discussed and require working group resolutions:</p>
- <ul>
- <li>
- <a href="#issue-lists">handling of list styles, numbered items</a>
- </li>
- </ul>
- <!-- li>
+ <!-- li><a href="#issue-mark">mark</a></li -->
+ <p>The following issues need to be discussed and require working group resolutions:</p>
+ <ul>
+ <li>
+ <a href="#issue-lists">handling of list styles, numbered items</a>
+ </li>
+ </ul>
+ <!-- li>
<a href="#issue-phonemes">'phonemes' property breaks principle of content/presentation
separation</a>
</li -->
- <!-- li><a href="#issue-speakability-name">'speakability' not an ideal property name ?</a></li -->
- <!-- li><a href="#issue-voice-cues-volume">audio cues volume level relative to voice-volume</a></li -->
- <!-- li><a href="#issue-speak_none">speak:none</a></li -->
- <p>The CSS WG maintains an <a href="http://www.w3.org/Style/CSS/Tracker/products/29">issues
- list</a> for this module.</p>
- <p>The CSS3 Speech Module is a community effort and if you would like to help with
- implementation and driving the specification forward along the W3C Recommendation track,
- please contact the editors.</p>
+ <!-- li><a href="#issue-speakability-name">'speakability' not an ideal property name ?</a></li -->
+ <!-- li><a href="#issue-voice-cues-volume">audio cues volume level relative to voice-volume</a></li -->
+ <!-- li><a href="#issue-speak_none">speak:none</a></li -->
+ <p>The CSS WG maintains a separate <a href="http://www.w3.org/Style/CSS/Tracker/products/29"
+ >list of issues</a> for this module.</p>
+ </div>
+ <p>The CSS Speech Module is a community effort and if you would like to help with implementation
+ and driving the specification forward along the W3C Recommendation track, please contact the
+ editors.</p>
<hr />
<h2 class="no-num no-toc" id="contents">Table of contents</h2>
<!--toc-->
<hr />
<!-- h2 id="dependencies">Dependencies on other specifications</h2>
- <p>This CSS3 module depends on the following CSS specifications:</p>
+ <p>This CSS module depends on the following CSS specifications:</p>
<ul>
<li>Values and Units [[!CSS3VAL]]</li>
<li>CSS 2.1 Visual Formatting model [[!CSS21]]</li>
</ul>
- <p>This CSS3 module also has non-normative references to the following CSS specifications:</p>
+ <p>This CSS module also has non-normative references to the following CSS specifications:</p>
<ul>
<li>Generated and Replaced Content [[CSS3GENCON]]</li -->
@@ -164,71 +167,99 @@
<!-- li>Selectors [[SELECT]]</li -->
<h2 id="introduction">Introduction</h2>
<p class="note">Note that this entire section is non-normative.</p>
- <p>The speech 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 text to speech can be used together with visual properties (mixed media)
- or as an aural alternative to visual presentation.</p>
- <p>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.</p>
- <p>When using voice properties, the aural canvas consists of a two channel stereo space and a
- temporal space. For example, you can specify <a href="#cue-props">audio cues</a> before and
- after synthetic speech). The CSS properties also allow authors to vary the characteristics of
- synthetic speech (voice type, frequency, inflection, etc.).</p>
+ <h3 id="design-goals">Design goals, motivations</h3>
+ <p>The aural rendering of a document combines speech synthesis (also known as "TTS", the acronym
+ for "Text to Speech") and auditory icons (which we refer to as "audio cues" in this
+ specification). The aural presentation of information is common amongst communities of users
+ who are blind or visually-impaired. For instance, "screen readers" enable control of visual
+ user-interfaces that would otherwise be inaccessible. There are other cases whereby listening
+ to textual information (as opposed to reading it) is a necessity. Typical examples include
+ in-car use of an e-book reader, industrial and medical documentation systems, home
+ entertainment, helping users to learn reading, or supporting users who have reading
+ difficulties (print disabilities). </p>
+ <p> When it comes to documents, the quality of the speech rendition depends on the structure and
+ semantics authored within the content itself. The CSS Speech Module provides properties that
+ enable authors to declaratively control presentational aspects of the aural dimension (e.g.
+ TTS voice, pitch, rate, volume levels, etc.). These style sheet properties can be used
+ together with visual properties (mixed media), or as a complete aural alternative to visual
+ presentation. The aural "canvas" consists of a two-channel (stereo) space and of a temporal
+ dimension, within which synthetic speech and audio cues coexist.</p>
+ <h3 id="css21-rel">Relationship with CSS2.1</h3>
+ <p> The CSS Speech Module is a re-work of the informative CSS2.1 Aural appendix, within which
+ the "aural" media type was described, but also deprecated (in favor of the "speech" media
+ type). Although the [[!CSS21]] specification reserves the "speech" media type, it doesn't
+ actually define the corresponding properties. This Module describes the CSS properties that
+ apply to the "speech" media type, and defines a new "box" model specifically for the aural
+ dimension. </p>
+ <p> Note that content creators can conditionally include CSS properties dedicated to user-agents
+ with text to speech synthesis capabilities, by specifying the "speech" media type via the
+ <code>media</code> attribute of the <code>link</code> element, or with the
+ <code>@media</code> at-rule, or within an <code>@import</code> statement. When doing so, the
+ styles authored within the scope of such conditional statements are ignored by user-agents
+ that do not support speech synthesis. </p>
+ <h3 id="example">CSS Speech Example</h3>
+ <p>The following example shows how authors can tell the speech synthesizer to speak HTML
+ headings with a voice called "paul", using "moderate" emphasis (which is more than normal) and
+ how to insert an audio cue (prerecorded audio clip located at the given URL) before the start
+ of TTS rendering for each heading. In a stereo-capable sound system, paragraphs marked with
+ the CSS class "heidi" are rendered on the left audio channel (and with a female voice, etc.),
+ whilst the class "peter" corresponds to the right channel (and to a male voice, etc.). The
+ volume level of text spans marked with the class "special" is lower than normal, and a
+ prosodic boundary is created by introducing a strong pause after it is spoken (note how the
+ <code>span</code> inherits the voice-family from its parent paragraph).</p>
<div class="example">
- <p>Examples:</p>
<pre>
- h1, h2, h3, h4, h5, h6 {
- voice-family: paul;
- voice-stress: moderate;
- cue-before: url(ping.au)
- }
- p.heidi { voice-balance: left; voice-family: female }
- p.peter { voice-balance: right; voice-family: male }
- p.goat { voice-volume: soft }
+h1, h2, h3, h4, h5, h6
+{
+ voice-family: paul;
+ voice-stress: moderate;
+ cue-before: url(../audio/ping.wav);
+}
+p.heidi
+{
+ voice-family: female;
+ voice-balance: left;
+ voice-pitch: high;
+}
+p.peter
+{
+ voice-family: male;
+ voice-balance: right;
+ voice-rate: fast;
+}
+span.special
+{
+ voice-volume: soft;
+ pause-after: strong;
+}
+
+...
+
+<h1>I am Paul, and I speak headings.</h1>
+<p class="heidi">Hello, I am Heidi.</p>
+<p class="peter">
+ <span class="special">Can you hear me ?</span>
+ I am Peter.
+</p>
</pre>
</div>
- <p>This will direct the speech synthesizer to speak headers in a voice (a kind of "audio font")
- called "paul". Before speaking the headers, a sound sample will be played from the given URL.
- Paragraphs with class "heidi" will appear to come from the left (if the sound system is
- capable of stereo), and paragraphs of class "peter" from the right. Paragraphs with class
- "goat" will be played softly.</p>
<!-- p class="note">
- Note that the "aural" media type is deprecated, as defined in the informative CSS2.1 Aural appendix [[!CSS21]]).
- </p -->
- <h2 id="css21-rel">Relationship with CSS2.1</h2>
- <p class="note">Note that this entire section is non-normative.</p>
- <p> This specification is a re-work of the informative CSS2.1 Aural appendix [[!CSS21]], within
- which the "aural" media type was described and deprecated at the same time. Although the
- [[!CSS21]] specification reserves the "speech" media type, it doesn't actually define the
- properties that apply to this context. The CSS3 Speech module specifies the set of properties
- for the "speech" media type, and defines a new "box" model for the aural dimension. </p>
- <p> Note that content creators can conditionally include CSS properties authored specifically
- for user-agents with text to speech capabilities (TTS), by specifying the "speech" media type
- via the <code>media</code> attribute of the <code>link</code> element, or with the
- <code>@media</code> at-rule, or within an <code>@import</code> statement. When doing so, the
- styles authored within the scope of such conditional statements are ignored by user-agents
- that do not support speech synthesis. </p>
+ Note that the "aural" media type is deprecated, as defined in the informative CSS2.1 Aural appendix [[!CSS21]]).
+ </p -->
<h2 id="aural-model">The <dfn id="aural-box-model">aural "box" model</dfn></h2>
- <p>The formatting model of CSS for aural media is based on a sequence of sounds and silences
- that appear in a nested model which is related to the <a href="#box-model-def">visual box
- model</a>; however the aural canvas is one-dimensional, monolinear. For compatibility with
- the visual box model, we will call it the aural "box" model. <!-- [[CSS3BOX]] -->
- </p>
- <p>The element is surrounded by, in this order, 'rest', 'cue' and 'pause' properties - they can
- be thought of as aural equivalents to 'padding', 'border' and 'margin' respectively.</p>
- <p>It can be represented in the following way (including the equivalent properties from the
- visual box model for clarification of relationships):</p>
+ <p>The CSS formatting model for aural media is based on a sequence of sounds and silences that
+ occur within a nested context similar to the <a href="#box-model-def">visual box model</a>,
+ which we name the aural "box" model. The aural canvas is one-dimensional, or "monolinear". The
+ element is surrounded by 'rest', 'cue' and 'pause' properties (from the innermost to the
+ outermost position). These can be seen as aural equivalents to 'padding', 'border' and
+ 'margin', respectively. The following diagram illustrates the equivalence between properties
+ of the visual and aural box models, applied to the selected <element>:</p>
+ <!-- [[CSS3BOX]] -->
<p>
<img alt="A graph depicting the aural 'box' model." id="aural-box" src="aural-box.png" />
</p>
- <p>where <element> is the selected element to which the properties from the CSS3 Speech
- Module apply.</p>
<h2 id="mixing-props">Mixing properties</h2>
- <h3 id="mixing-props-voice-volume">The 'voice-volume' mixing property</h3>
+ <h3 id="mixing-props-voice-volume">The 'voice-volume' property</h3>
<table class="propdef" summary="name: syntax">
<tbody>
<tr>
@@ -336,7 +367,7 @@
is not rendered in the aural dimension
<!-- (including its descendants, which cannot override the inherited 'none' value). -->
(although descendants can override the 'speak' value and may therefore generate audio output). </p>
- <h3 id="mixing-props-voice-balance">The 'voice-balance' mixing property</h3>
+ <h3 id="mixing-props-voice-balance">The 'voice-balance' property</h3>
<table class="propdef" summary="name: syntax">
<tbody>
<tr>
@@ -812,19 +843,17 @@
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.</p>
<div class="example">
- <p>Examples:</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: <i>unspecified</i>; pause-after: 10ms */
+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: <i>unspecified</i>; pause-after: 10ms */
</pre>
</div>
<p> The default strengths of prosodic breaks for specific elements are defined by the user-agent
stylesheet, and can be overridden by authored styles, as demonstrated by the example below. </p>
<div class="example">
- <p>Example:</p>
<pre>
- p { pause: none } /* pause-before: none; pause-after: none */
+p { pause: none } /* pause-before: none; pause-after: none */
</pre>
</div>
<p class="note"> Note that stronger content boundaries are typically accompanied by pauses. For
@@ -1202,13 +1231,20 @@
corresponding levels for 'voice-volume'.</dd-->
</dl>
<div class="example">
- <p>Examples:</p>
<pre>
- a { cue-before: url(bell.aiff); cue-after: url(dong.wav) }
-
- h1 { cue-before: url(pop.au) 80%; cue-after: url(pop.au) 50% }
+a
+{
+ cue-before: url(/audio/bell.aiff);
+ cue-after: url(dong.wav);
+}
- div.caution { cue-before: url(caution.wav) 130% }
+h1
+{
+ cue-before: url(../clips-1/pop.au) 80%;
+ cue-after: url(../clips-2/pop.au) 50%;
+}
+
+div.caution { cue-before: url(./audio/caution.wav) 130%; }
</pre>
</div>
<h3 id="cue-props-cue">The 'cue' shorthand property</h3>
@@ -1267,12 +1303,18 @@
<p>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.</p>
+ <p>The following two rules are equivalent:</p>
<div class="example">
- <p>The following two rules are equivalent:</p>
<pre>
- h1 {cue-before: url(pop.au); cue-after: url(pop.au) }
-
- h1 {cue: url(pop.au) }
+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
@@ -1535,14 +1577,13 @@
zero (i.e. starting from 1). The value "1" refers to the first of all matching voices. </dd>
</dl>
<div class="example">
- <p>Examples:</p>
<pre>
- h1 { voice-family: announcer, old male }<br />
- p.part.romeo { voice-family: romeo 3, young male }<br />
- p.part.juliet { voice-family: juliet, female }<br />
- p.part.mercutio { voice-family: male 2 }<br />
- p.part.tybalt { voice-family: male 3 }<br />
- p.part.nurse { voice-family: child female }
+h1 { voice-family: announcer, old male; }
+p.romeo { voice-family: romeo 3, young male; }
+p.juliet { voice-family: juliet, female; }
+p.mercutio { voice-family: male 2; }
+p.tybalt { voice-family: male 3; }
+p.nurse { voice-family: child female; }
</pre>
</div>
<p>Names of specific voices can be quoted, and indeed must be quoted if any of the words that
@@ -1729,14 +1770,13 @@
specific.</dd>
</dl>
<div class="example">
- <p>Examples:</p>
<pre>
- h1 { voice-pitch: 250Hz; }<br />
- h1 { voice-pitch: +250Hz; } /* identical to the line above */<br />
- h2 { voice-pitch: +30Hz relative; }<br />
- h2 { voice-pitch: 30Hz relative; } /* identical to the line above */<br />
- h3 { voice-pitch: -2st relative; }<br />
- h4 { voice-pitch: -2st; } /* Illegal syntax ! ("relative" keyword is missing) */
+h1 { voice-pitch: 250Hz; }
+h1 { voice-pitch: +250Hz; } /* identical to the line above */
+h2 { voice-pitch: +30Hz relative; }
+h2 { voice-pitch: 30Hz relative; } /* identical to the line above */
+h3 { voice-pitch: -2st relative; }
+h4 { voice-pitch: -2st; } /* Illegal syntax ! ("relative" keyword is missing) */
</pre>
</div>
<h3 id="voice-props-voice-pitch-range">The 'voice-pitch-range' property</h3>
@@ -1913,30 +1953,30 @@
<dd>Effectively the opposite of emphasizing a word.</dd>
</dl>
<div class="example">
- <p>Examples:</p>
<pre>
- span.default-emphasis { voice-stress: auto; }
- span.lowered-emphasis { voice-stress: reduced; }
- span.removed-emphasis { voice-stress: none; }
- span.normal-emphasis { voice-stress: moderate; }
- span.huge-emphasis { voice-stress: strong; }
-
- ...
-
- <p>This is a big car.</p>
- <!-- The speech output from the line above is identical to the line below: -->
- <p>This is a <span class="default-emphasis">big</span> car.</p>
-
- <p>This car is <span class="lowered-emphasis">massive</span>!</p>
- <!-- The "span" below is totally de-emphasized, whereas the emphasis in the line above is only reduced: -->
- <p>This car is <span class="removed-emphasis">massive</span>!</p>
+span.default-emphasis { voice-stress: auto; }
+span.lowered-emphasis { voice-stress: reduced; }
+span.removed-emphasis { voice-stress: none; }
+span.normal-emphasis { voice-stress: moderate; }
+span.huge-emphasis { voice-stress: strong; }
- <!-- The lines below demonstrate increasing levels of emphasis: -->
- <p>This is a <span class="normal-emphasis">big</span> car!</p>
- <p>This is a <span class="huge-emphasis">big</span> car!!!</p>
+...
+
+<p>This is a big car.</p>
+<!-- The speech output from the line above is identical to the line below: -->
+<p>This is a <span class="default-emphasis">big</span> car.</p>
+
+<p>This car is <span class="lowered-emphasis">massive</span>!</p>
+<!-- The "span" below is totally de-emphasized, whereas the emphasis in the line above is only reduced: -->
+<p>This car is <span class="removed-emphasis">massive</span>!</p>
+
+<!-- The lines below demonstrate increasing levels of emphasis: -->
+<p>This is a <span class="normal-emphasis">big</span> car!</p>
+<p>This is a <span class="huge-emphasis">big</span> car!!!</p>
</pre>
</div>
- <h2 id="duration-props">Duration property</h2>
+ <h2 id="duration-props">Voice duration property</h2>
+ <h3 id="mixing-props-voice-duration">The 'voice-duration' property</h3>
<table class="propdef" summary="name: syntax">
<tbody>
<tr>
@@ -2033,9 +2073,9 @@
in CSS (the presentation layer) and should be addressed in the markup / content layer.</p>
<p> The W3C <a href="http://www.w3.org/TR/pronunciation-lexicon">PLS (Pronunciation Lexicon
Specification)</a> recommendation is one potential format to use with the <a
- href="http://microformats.org/wiki/rel-pronunciation"></a>"pronunciation"
- <strong>rel</strong> value, which allows importing pronunciation lexicons in HTML documents
- using the <strong>link</strong> element (similarly to how CSS stylesheets can be included). </p>
+ href="http://microformats.org/wiki/rel-pronunciation"></a>"pronunciation" <code>rel</code>
+ value, which allows importing pronunciation lexicons in HTML documents using the
+ <code>link</code> element (similarly to how CSS stylesheets can be included). </p>
<p> Additionally, an attribute-based mechanism can be used within the markup to author
text-pronunciation associations. At the time of writing, such mechanism isn't formally defined
in the W3C HTML standard(s). However, the <a href="http://idpf.org/epub/30">EPUB 3.0 draft
@@ -2192,48 +2232,44 @@
abbreviation is rendered using the content of the title attribute instead of the element's
content:</p>
<div class="example">
- <p>Example:</p>
<pre>
- abbr { content: attr(title); }
- ...
-
- <abbr title="World Wide Web Consortium">W3C</abbr>
+/* This replaces the content of the selected element
+by the string "World Wide Web Consortium". */
+abbr { content: attr(title); }
+...
+
+<abbr title="World Wide Web Consortium">W3C</abbr>
</pre>
- <p>This replaces the content of the selected element by the string "World Wide Web
- Consortium".</p>
</div>
- <p>In a similar way text-to-speech strings in a document can be replaced by a previously
- recorded version:</p>
+ <p>In a similar way, text strings in a document can be replaced by a previously recorded
+ version. In the following example - assuming the format is supported, the file is available
+ and the UA is configured to do so - a recording of Sir John Gielgud's declamation of the
+ famous monologue is played. Otherwise the UA falls back to render the text using synthesized
+ speech: </p>
<div class="example">
- <p>Example:</p>
<pre>
- .hamlet { content: url(gielgud.wav); }
- ...
-
- <div class="hamlet">
- To be, or not to be: that is the question:
- </div>
+.hamlet { content: url(./audio/gielgud.wav); }
+...
+
+<div class="hamlet">
+To be, or not to be: that is the question:
+</div>
</pre>
- <p>If the format is supported, the file is available and the UA is configured to do so, a
- recording of Sir John Gielgud's declamation of the famous monologue will be played,
- otherwise the UA falls back to render the text-to-speech with its own synthesizer.</p>
</div>
- <p>Furthermore, authors (or via a user stylesheet) may add some information to ease
- understanding the structure for non-visual interaction with the document. They can do so by
+ <p>Furthermore, authors (or users via a user stylesheet) may add some information to ease the
+ understanding of structures during non-visual interaction with the document. They can do so by
using the '::before' and '::after' pseudo-elements that will be inserted between the element's
- contents and the 'rest':</p>
+ contents and the 'rest' Note that different stylesheets can be used to define the level of
+ verbosity for additional information spoken by screen readers. .</p>
+ <p>The following example inserts the string "Start list: " before a list and the string "List
+ item: " before the content of each list item. Likewise, the string "List end: " gets inserted
+ after the list to inform the user that the list speech output is over.</p>
<div class="example">
- <p>Example:</p>
<pre>
- ul::before { content: "Start list: " }
- ul::after { content: "List end. " }
- li::before { content: "List item: " }
- </pre>
- <p>This inserts the string "Start list: " before a list and the string "List item: " before
- each list item; likewise the string "List end: " inserted after the list will inform the
- user that the list is finished.</p>
- <p>Different stylesheets can be used to define the level of verbosity for additional
- information spoken by screen readers.</p>
+ul::before { content: "Start list: "; }
+ul::after { content: "List end. "; }
+li::before { content: "List item: "; }
+</pre>
</div>
<p>Detailed information can be found in the CSS3 Generated and Replaced Content Module
[[CSS3GENCON]].</p>
Received on Tuesday, 10 May 2011 20:41:42 UTC