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
CSS pause-before property
The CSS pause-before property specifies a pause to be observed before speaking an element's content in speech synthesis. This property is part of the CSS Speech Module and is used to control timing in text-to-speech applications.
Syntax
selector {
pause-before: value;
}
Possible Values
| Value | Description |
|---|---|
time |
Expresses the pause in absolute time units (seconds and milliseconds) |
percentage |
Refers to the inverse of the value of the speech-rate property |
none |
No pause before the element (default) |
inherit |
Inherits the value from the parent element |
Example 1: Using Time Values
The following example sets different pause durations before elements using time values −
<!DOCTYPE html>
<html>
<head>
<style>
.short-pause {
pause-before: 0.5s;
background-color: #f0f8ff;
padding: 10px;
margin: 5px 0;
}
.long-pause {
pause-before: 2s;
background-color: #ffe4e1;
padding: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<p class="short-pause">This text has a 0.5 second pause before speaking.</p>
<p class="long-pause">This text has a 2 second pause before speaking.</p>
</body>
</html>
Two paragraphs are displayed - one with light blue background and one with light pink background. When used with speech synthesis, there would be a 0.5 second pause before the first paragraph and a 2 second pause before the second paragraph.
Example 2: Using Percentage Values
This example demonstrates percentage-based pause values −
<!DOCTYPE html>
<html>
<head>
<style>
.speech-content {
speech-rate: 120; /* 120 words per minute */
pause-before: 50%; /* 50% of inverse speech rate */
background-color: #f5f5dc;
padding: 15px;
border-left: 4px solid #32cd32;
}
</style>
</head>
<body>
<p class="speech-content">This paragraph uses percentage-based pause timing.</p>
</body>
</html>
A paragraph with beige background and green left border appears. The pause-before value of 50% creates a pause duration based on the speech-rate setting when used with text-to-speech technology.
Browser Support
The pause-before property has limited browser support as it's part of the CSS Speech Module, which is primarily used by screen readers and assistive technologies rather than visual browsers.
Conclusion
The pause-before property is useful for controlling speech timing in accessibility applications. It accepts time values for precise control or percentage values relative to the speech rate for dynamic timing adjustments.
87 Views
