~alcinnz/rhapsode

ref: b41aedb2e06606cd383a025d614c651ac921374f rhapsode/docs/CSS-Speech-Tutorial.md -rw-r--r-- 3.6 KiB
b41aedb2 — Adrian Cochrane Merge remote-tracking branch 'contrib-ariana/issues' 4 years ago
                                                                                
0f61fa28 Adrian Cochrane
bf572743 Ariana Giroux
2481b8c0 Adrian Cochrane
0f61fa28 Adrian Cochrane
2481b8c0 Adrian Cochrane
0f61fa28 Adrian Cochrane
2481b8c0 Adrian Cochrane
0f61fa28 Adrian Cochrane
2481b8c0 Adrian Cochrane
bf572743 Ariana Giroux
2481b8c0 Adrian Cochrane
0f61fa28 Adrian Cochrane
d165a158 Ariana Giroux
0f61fa28 Adrian Cochrane
2481b8c0 Adrian Cochrane
bf572743 Ariana Giroux
2481b8c0 Adrian Cochrane
0f61fa28 Adrian Cochrane
2481b8c0 Adrian Cochrane
d165a158 Ariana Giroux
0f61fa28 Adrian Cochrane
2481b8c0 Adrian Cochrane
bf572743 Ariana Giroux
0f61fa28 Adrian Cochrane
2481b8c0 Adrian Cochrane
0f61fa28 Adrian Cochrane
2481b8c0 Adrian Cochrane
0f61fa28 Adrian Cochrane
2481b8c0 Adrian Cochrane
bf572743 Ariana Giroux
2481b8c0 Adrian Cochrane
0f61fa28 Adrian Cochrane
2481b8c0 Adrian Cochrane
d165a158 Ariana Giroux
0f61fa28 Adrian Cochrane
2481b8c0 Adrian Cochrane
0f61fa28 Adrian Cochrane
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
**Wanted:** Guidance on creating a great audio theme. Maybe based on voice acting
or public speaking theory.
**Wanted:** Written descriptions of the various outcomes of properties. I.e,
how does `speak-as: spell-out` differ from normal.

Rhapsode still lets you apply CSS styles to your webpages, but since it outputs
audio rather than video it supports a different set of CSS properties. This page
provides an overview of these properties.

## Should it be spoken?
You can use the `speak` property to determine whether an HTML element should be
read aloud or not, and the `speak-as` property to determine how it reads digits
and/or punctuation.

Setting `speak: never` is not the same as setting `voice-volume: silent` as the
latter still takes up the same ammount of time as it would've to read the text
aloud.

### Reference:
#### `speak`
Usage:
  `speak: always`

Valid Options:
  - `always`
  - `never`

#### `speak-as`
Usage:
  `speak-as: spell-out`

Valid options:
  - `spell-out`
  - `digits`
  - `literal-punctuation`
  - `no-punctuation`

## The Voice
You can use the `voice-family` attribute to select a voice either by age/gender/variant
or by it's name. Just like font-family this'll make a big difference to the "look"
of your page.

### Reference
**Wanted: denote syntax and properly format list**
#### `voice-family`
Usage:
  `voice-family: OPTIONS`

- genders: male female neutral
- ages: child young old


## Speaking Style
You can alter the voice you choose by varying it's volume, rate, pitch, range,
and stress. Doing so helps people pay attention, especially if it reinforces the
meaning of your text.

### Keywords & Offsets
All the speaking style properties provide keywords you can use instead of a
number. In which case write a number after a keyword to represent an offset from
that keyword.

### Reference
#### `voice-volume`
Usage:
  `voice-volume: medium -10dB`

Valid keywords:
  - `silent`
  - `x-soft`
  - `soft`
  - `medium`
  - `loud`
  - `x-loud`
  - `medium`

#### `voice-rate`
Usage:
  `voice-rate: medium -10%`

Valid keywords:
  - `x-slow`
  - `slow`
  - `medium`
  - `fast`
  - `x-fast`

#### `voice-pitch`
Usage:
  `voice-pitch: medium +10%`

Valid keywords:
  - `x-low`
  - `low`
  - `medium`
  - `high`
  - `x-high`


#### `voice-stress`
Usage:
  `voice-stress: moderate`

Valid keywords:
  - `strong`
  - `moderate`
  - `none`
  - `reduced`

## Rests, Pauses, and Auditory Cues
On either end of your text you can place an audio cue to identify it, and on
either end of those you can insert additional silence. If two silences are
directly adjacent, the smaller one will be removed.

The inner pauses are called the element's `rest` and the outer ones are called
it's `pause`.

The user agent stylesheet, for example, uses audio cues to indicate list bullets
and links. And silence functions exactly like whitespace in a visual browser.


### Reference
> Note: `pause` and `rest` mirror functionality
> Note: `-before` and `-after` are both offered by the api as well
#### `pause`
Usage:
  `pause: before weak 50ms`

Valid keywords:
  - `x-weak`
  - `weak`
  - `medium`
  - `strong

## Text Generation
Rhapsode supports (some of) the same text generation attributes as visual
browsers, namely:

* `counter-reset`
* `counter-increment`
* `counter-set`
* `content`

Though more may be added in the future.

However unlike visual browsers you can apply the `content` property to the element
itself to replace it's own children.

---

* [CSS3 Speech Module](https://drafts.csswg.org/css-speech-1/) (Retired W3C Note)
* [MDN on CSS Counters](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)