Skip to content

Commit fa09009

Browse files
younisdevgithub-actions[bot]skyclouds2001Josh-Cenaestelle
authored
Document speak-as CSS property. (#37706)
* Document `speak-as` CSS property. * Add redirect for `speak-as` property * Clarifying that `speak-as` is a descriptor at the title section. * fix indentation Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/speak-as/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * add a space Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/speak-as/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/speak-as/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/speak-as/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * add a space Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/speak-as/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Add browser compat placeholder * Fixed redirect mistake. * Update files/en-us/web/css/speak-as/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Remove unnecessary `speak--as` redirect. * add multiple speak-as value syntax Co-authored-by: skyclouds2001 <[email protected]> * fix a typo Co-authored-by: skyclouds2001 <[email protected]> * Update files/en-us/web/css/speak-as/index.md Co-authored-by: skyclouds2001 <[email protected]> * Update files/en-us/web/css/speak-as/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix title Co-authored-by: skyclouds2001 <[email protected]> * add 3 changes Co-authored-by: skyclouds2001 <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/speak-as/index.md Co-authored-by: skyclouds2001 <[email protected]> * Fix prettier issue * Update index.md * Use the right line endings * Apply introduction review changes. Co-authored-by: Estelle Weyl <[email protected]> * Apply Values review changes. Co-authored-by: Estelle Weyl <[email protected]> * Apply note section review changes. Co-authored-by: Estelle Weyl <[email protected]> * Apply examples section review changes. Co-authored-by: Estelle Weyl <[email protected]> * Apply examples-css section review changes. Co-authored-by: Estelle Weyl <[email protected]> * Apply See also section review changes. Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/css/speak-as/index.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: skyclouds2001 <[email protected]> Co-authored-by: Joshua Chen <[email protected]> Co-authored-by: Estelle Weyl <[email protected]>
1 parent b5df38a commit fa09009

File tree

2 files changed

+110
-1
lines changed

2 files changed

+110
-1
lines changed

files/en-us/_redirects.txt

-1
Original file line numberDiff line numberDiff line change
@@ -12160,7 +12160,6 @@
1216012160
/en-US/docs/Web/CSS/sign() /en-US/docs/Web/CSS/sign
1216112161
/en-US/docs/Web/CSS/sign_function /en-US/docs/Web/CSS/sign
1216212162
/en-US/docs/Web/CSS/single-transition-timing-function /en-US/docs/Web/CSS/easing-function
12163-
/en-US/docs/Web/CSS/speak-as /en-US/docs/Web/CSS/@counter-style/speak-as
1216412163
/en-US/docs/Web/CSS/specified_value /en-US/docs/Web/CSS/CSS_cascade/specified_value
1216512164
/en-US/docs/Web/CSS/static /en-US/docs/Web/CSS/position
1216612165
/en-US/docs/Web/CSS/suffix /en-US/docs/Web/CSS/@counter-style/suffix

files/en-us/web/css/speak-as/index.md

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: speak-as
3+
slug: Web/CSS/speak-as
4+
page-type: css-property
5+
browser-compat: css.properties.speak-as
6+
---
7+
8+
{{CSSRef}}
9+
10+
The **`speak-as`** [CSS](/en-US/docs/Web/CSS) property is used to define how [HTML](/en-US/docs/Web/HTML) content is spoken. The one to three enumerated key terms determine the manner by which elements and text get rendered by aural technologies, such as {{glossary("screen reader", "screen readers")}} and digital assistants.
11+
12+
This property applies to all content, including pseudo-elements, with the exception {{cssxref("::marker")}} pseudo-elements constructed via a {{cssxref("@counter-style")}} with a defined [`speak-as`](/en-US/docs/Web/CSS/@counter-style/speak-as) descriptor, which takes precedence over any inherited `speak-as` property value.
13+
14+
## Syntax
15+
16+
```css
17+
/* single value syntax */
18+
speak-as: normal;
19+
speak-as: spell-out;
20+
speak-as: literal-punctuation;
21+
speak-as: digits;
22+
speak-as: no-punctuation;
23+
24+
/* multiple value syntax */
25+
speak-as: spell-out literal-punctuation;
26+
speak-as: spell-out no-punctuation;
27+
speak-as: digits literal-punctuation;
28+
speak-as: digits no-punctuation;
29+
speak-as: spell-out digits literal-punctuation;
30+
speak-as: spell-out digits no-punctuation;
31+
```
32+
33+
### Values
34+
35+
- `normal`
36+
- : Normal pronunciation rules with punctuation replaced by pauses. For example, "Hello, world!" would be pronounced as "Hello (pause) world (pause)". This is the default value.
37+
- `spell-out`
38+
- : Content is spelled out letter by letter. For example, "role" would be pronounced as "r" "o" "l" "e".
39+
- `literal-punctuation`
40+
- : Punctuation marks are spelled out literally. For example, "Hello, world!" would be pronounced as "Hello comma world exclamation mark."
41+
- `digits`
42+
- : Numbers are pronounced as individual digits. For example, "31" would be pronounced as "three one".
43+
- `no-punctuation`
44+
- : Content is pronounced normally without any punctuation. For example, "Hello, world!" would be pronounced as "Hello" "world".
45+
46+
> [!NOTE]
47+
> Support of the `speak-as` property is limited and inconsistently implemented across different assistive technologies, such as screen readers or speech synthesizers. To ensure any pronunciation-dependent critical information remains user-friendly and accessible to a wide audience, do not rely solely on this CSS property to define how this information content is presented aurally.
48+
49+
## Formal definition
50+
51+
{{CSSInfo}}
52+
53+
## Formal syntax
54+
55+
{{CSSSyntax}}
56+
57+
## Examples
58+
59+
### HTML
60+
61+
```HTML
62+
<p class="normal">Hello, world! I'm 25.</p>
63+
<p class="spell-out">Hello, world! I'm 25.</p>
64+
<p class="literal-punctuation">Hello, world! I'm 25.</p>
65+
<p class="no-punctuation">Hello, world! I'm 25.</p>
66+
<p class="digits">Hello, world! I'm 25.</p>
67+
<p class="multi">Hello, world! I'm 25.</p>
68+
```
69+
70+
### CSS
71+
72+
```CSS
73+
.normal {
74+
speak-as: normal;
75+
}
76+
77+
.spell-out {
78+
speak-as: spell-out;
79+
}
80+
81+
.literal-punctuation {
82+
speak-as: literal-punctuation;
83+
}
84+
85+
.no-punctuation {
86+
speak-as: no-punctuation;
87+
}
88+
89+
.digits {
90+
speak-as: digits;
91+
}
92+
.multi {
93+
speak-as: literal-punctuation digits;
94+
}
95+
```
96+
97+
## Specifications
98+
99+
{{Specifications}}
100+
101+
## Browser compatibility
102+
103+
{{Compat}}
104+
105+
## See also
106+
107+
- {{cssxref("@counter-style")}} at-rule {{cssxref("@counter-style/speak-as", "speak-as")}} descriptor
108+
- [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module
109+
- [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module
110+
- [Web Speech API](/en-US/docs/Web/API/Web_Speech_API)

0 commit comments

Comments
 (0)