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-before Speech Media property
The CSS rest-before property is used in speech media to set a pause or rest period before speaking the content of an element. This property is part of the CSS Speech Module and helps control the timing and flow of synthesized speech.
Syntax
selector {
rest-before: value;
}
Possible Values
| Value | Description |
|---|---|
time |
Specifies the pause duration in seconds (s) or milliseconds (ms) |
none |
No pause before the element (default) |
x-weak |
Very short pause |
weak |
Short pause |
medium |
Medium pause |
strong |
Long pause |
x-strong |
Very long pause |
Example: Setting Rest Before Elements
The following example sets different pause durations before headings and paragraphs in speech media −
<!DOCTYPE html>
<html>
<head>
<style>
@media speech {
h1 {
rest-before: 500ms;
voice-family: male;
}
h2 {
rest-before: 300ms;
voice-family: female;
}
p {
rest-before: 200ms;
}
.important {
rest-before: strong;
}
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<p>This paragraph has a 200ms pause before it.</p>
<h2>Sub Heading</h2>
<p class="important">This important paragraph has a strong pause before it.</p>
</body>
</html>
When this content is read by a screen reader or speech synthesizer: - A 500ms pause occurs before "Main Heading" - A 200ms pause occurs before the first paragraph - A 300ms pause occurs before "Sub Heading" - A longer pause (strong) occurs before the important paragraph
Conclusion
The rest-before property provides fine control over speech timing by adding pauses before elements. It accepts time values in milliseconds/seconds or predefined keywords for different pause lengths.
Updated on: 2026-03-15T13:34:13+05:30
169 Views
Advertisements