Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS speak-as Speech Media property
The CSS speak-as property is part of the Speech Media module and controls how text should be rendered by speech synthesizers. It determines whether text should be spoken normally, spelled out letter by letter, or treated as digits.
Syntax
selector {
speak-as: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Default behavior based on content type |
normal |
Speaks the text normally |
spell-out |
Spells out text letter by letter |
digits |
Speaks numbers as individual digits |
literal-punctuation |
Speaks punctuation marks literally |
no-punctuation |
Ignores punctuation when speaking |
Example: Spell-Out Text
The following example makes abbreviations spell out letter by letter −
<!DOCTYPE html>
<html>
<head>
<style>
abbr {
speak-as: spell-out;
text-decoration: underline;
color: #0066cc;
}
.digits {
speak-as: digits;
font-weight: bold;
}
</style>
</head>
<body>
<p>The <abbr title="HyperText Markup Language">HTML</abbr> specification is important.</p>
<p>Call us at <span class="digits">1234</span> for support.</p>
</body>
</html>
When using a speech synthesizer, "HTML" would be spelled as "H-T-M-L" and "1234" would be spoken as "one, two, three, four" instead of "one thousand two hundred thirty-four".
Browser Support
Note: The
speak-asproperty has limited browser support and requires speech synthesis capabilities to function. It is primarily used in accessibility contexts with screen readers.
Conclusion
The speak-as property provides control over speech synthesis behavior, making content more accessible. Use spell-out for abbreviations and digits for numbers that should be spoken individually.
Updated on: 2026-03-15T13:35:44+05:30
169 Views
Advertisements