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 rest Speech Media property
The CSS rest property is a shorthand property for rest-before and rest-after properties. It sets a pause before or after an element when using speech synthesis or screen readers.
Syntax
selector {
rest: rest-before rest-after;
}
Where:
- rest-before − Sets the pause duration before the element is spoken
- rest-after − Sets the pause duration after the element is spoken
Possible Values
| Value | Description |
|---|---|
time |
Duration in seconds (s) or milliseconds (ms) |
none |
No pause (default value) |
x-weak |
Very short pause |
weak |
Short pause |
medium |
Medium pause |
strong |
Long pause |
x-strong |
Very long pause |
Example: Setting Rest Pauses
The following example sets a 15ms pause before and 20ms pause after headings when spoken −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
rest: 15ms 20ms;
voice-family: male;
}
p {
rest: weak medium;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<p>This paragraph will have pauses before and after when read by screen readers.</p>
</body>
</html>
When this content is read by a screen reader or speech synthesizer, there will be a 15ms pause before the heading and a 20ms pause after it. The paragraph will have weak pause before and medium pause after.
Note: The rest property is part of CSS Speech Module and is primarily used by screen readers and speech synthesizers. It may not be supported in all browsers for visual rendering.
Conclusion
The rest property provides control over speech timing by adding pauses before and after elements. This improves the listening experience for users relying on speech synthesis technology.
Updated on: 2026-03-15T13:33:17+05:30
241 Views
Advertisements