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 stress property
The CSS stress property is part of CSS Speech Module and controls the stress level in speech synthesis. It specifies the height of "local peaks" in the intonation contour of a voice, affecting how emphasized certain words or syllables sound when content is read aloud by screen readers or speech synthesis engines.
Syntax
selector {
stress: value;
}
Possible Values
| Value | Description |
|---|---|
number |
A value between 0 and 100. Higher values create more stress/emphasis in speech |
inherit |
Inherits the stress value from parent element |
Example: Different Stress Levels
The following example demonstrates how to apply different stress levels to text elements −
<!DOCTYPE html>
<html>
<head>
<style>
.low-stress {
stress: 20;
background-color: #e8f5e8;
padding: 10px;
margin: 5px;
}
.medium-stress {
stress: 50;
background-color: #fff3cd;
padding: 10px;
margin: 5px;
}
.high-stress {
stress: 80;
background-color: #f8d7da;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div class="low-stress">This text has low stress level (20)</div>
<div class="medium-stress">This text has medium stress level (50)</div>
<div class="high-stress">This text has high stress level (80)</div>
</body>
</html>
Three colored div boxes appear with different background colors representing stress levels. When read by screen readers, the high-stress text will have more emphasis than the medium and low-stress text.
Browser Support
The stress property has limited browser support as it's part of the CSS Speech Module, which is primarily used by assistive technologies like screen readers rather than visual browsers.
Conclusion
The stress property is useful for creating accessible content with varying emphasis levels for speech synthesis. While not visually apparent, it enhances the audio experience for users relying on screen readers.
199 Views
