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-after Speech Media property
The CSS rest-after property is used in speech media to specify a pause or rest period after an element is spoken. This property is particularly useful for screen readers and text-to-speech applications to create natural-sounding speech patterns.
Syntax
selector {
rest-after: time | none | x-weak | weak | medium | strong | x-strong;
}
Possible Values
| Value | Description |
|---|---|
<time> |
Sets pause duration in seconds (s) or milliseconds (ms) |
none |
No pause after the element |
x-weak |
Extra weak pause (shortest) |
weak |
Weak pause |
medium |
Medium pause (default) |
strong |
Strong pause |
x-strong |
Extra strong pause (longest) |
Example: Time-Based Rest
The following example sets a 200ms pause after heading elements −
<!DOCTYPE html>
<html>
<head>
<style>
@media speech {
h1 {
rest-after: 200ms;
}
p {
rest-after: 100ms;
}
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<p>This paragraph will have a shorter pause after it.</p>
<p>Another paragraph with the same pause duration.</p>
</body>
</html>
When spoken by a screen reader, there will be a 200ms pause after the heading and 100ms pauses after each paragraph.
Example: Strength-Based Rest
The following example uses predefined strength values −
<!DOCTYPE html>
<html>
<head>
<style>
@media speech {
.weak-pause {
rest-after: weak;
}
.strong-pause {
rest-after: strong;
}
.no-pause {
rest-after: none;
}
}
</style>
</head>
<body>
<p class="weak-pause">Text with weak pause after.</p>
<p class="strong-pause">Text with strong pause after.</p>
<p class="no-pause">Text with no pause after.</p>
</body>
</html>
When read aloud, the first paragraph has a short pause, the second has a longer pause, and the third has no pause after it.
Conclusion
The rest-after property enhances speech accessibility by controlling pauses after elements. Use time values for precise control or strength keywords for relative pause durations in speech media.
Updated on: 2026-03-15T13:37:12+05:30
183 Views
Advertisements