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 azimuth Property
The CSS azimuth property is part of the CSS Aural style sheets specification that defines where sound should come from horizontally when content is being read aloud by screen readers or speech synthesizers.
Syntax
selector {
azimuth: value;
}
Possible Values
| Value | Description | Equivalent Angle |
|---|---|---|
angle |
Position described in terms of an angle (-360deg to 360deg) | Specified angle |
left-side |
Sound from left side | 270deg |
far-left |
Sound from far left | 300deg |
left |
Sound from left | 320deg |
center-left |
Sound from center-left | 340deg |
center |
Sound from center (default) | 0deg |
center-right |
Sound from center-right | 20deg |
right |
Sound from right | 40deg |
far-right |
Sound from far right | 60deg |
right-side |
Sound from right side | 90deg |
leftwards |
Moves sound 20deg to the left of current position | Current - 20deg |
rightwards |
Moves sound 20deg to the right of current position | Current + 20deg |
Key Points
- The value
0degmeans directly ahead in the center of the soundstage -
90degis to the right,180degbehind, and270deg(or-90deg) to the left - Values can be combined with
behindkeyword to reverse the spatial positioning - The property is primarily used in aural CSS for accessibility applications
Example
The following example demonstrates different azimuth values −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
azimuth: 30deg;
}
.far-right-sound {
azimuth: far-right; /* 60deg */
}
.behind-sound {
azimuth: behind far-right; /* 120deg */
}
.comment {
azimuth: behind; /* 180deg */
}
</style>
</head>
<body>
<h1>Title with 30-degree azimuth</h1>
<p class="far-right-sound">This text has far-right sound positioning.</p>
<p class="behind-sound">This text has behind far-right positioning.</p>
<p class="comment">This comment has behind positioning.</p>
</body>
</html>
The azimuth property affects audio positioning when the page is read by screen readers or speech synthesizers. Different elements will have their audio positioned at various angles around the listener.
Browser Support
The azimuth property has limited browser support as it's part of the CSS Aural specification. It's primarily useful in specialized accessibility applications and speech synthesizers rather than standard web browsers.
Conclusion
The azimuth property provides spatial audio positioning for aural CSS applications. While not widely supported in standard browsers, it plays an important role in accessibility technologies for creating immersive audio experiences.
Updated on: 2026-03-15T11:39:14+05:30
165 Views
Advertisements