CSS - azimuth
In combination with elevation
, azimuth
enables different audio sources to be positioned spatially for aural presentation. This is important in that it provides a natural way to tell several voices apart, as each can be positioned to originate at a different location on the sound stage. Stereo output produce a lateral sound stage, while binaural headphones and multi-speaker setups allow for a fully three-dimensional stage.
Example
h1 { azimuth: 30deg } td.a { azimuth: far-right } /* 60deg */ #12 { azimuth: behind far-right } /* 120deg */ p.comment { azimuth: behind } /* 180deg */
Syntax
<a href="css/angle" title="Possible values: a number followed by'deg', 'grad', 'rad' or 'turn', like 2turn, 1.3rad, -60deg or 0grad."><angle></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a><a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left-side <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> far-left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center-left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center-right <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> far-right <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right-side <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> behind <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> leftwards <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> rightwards
Values
- angle
- Audible source position is described as an angle within the range
-360deg
to360deg
. The value0deg
means directly ahead in the center of the sound stage (this is the default value).90deg
is to the right,180deg
is behind, and270deg
or-90deg
is to the left.
Positional keywords
left-side
: Same as270deg
.left-side behind
: Same as270deg
.far-left
: Same as300deg
.far-left behind
: Same as240deg
.left
: Same as320deg
.left behind
: Same as220deg
.center-left
: Same as340deg
.center-left behind
: Same as200deg
.center
: Same as0deg
.center behind
: Same as180deg
.center-right
: Same as20deg
.center-right behind
: Same as160deg
.right
: Same as40deg
.right behind
: Same as140deg
.far-right
: Same as60deg
.far-right behind
: Same as120deg
.right-side
: Same as90deg
.right-side behind
: Same as90deg
.behind
: Same as180deg
. Also used as a modifier for other positional keyword values, as above.leftwards
: Moves the sound counter-clockwise by 20 degrees, relative to the current angle.rightwards
: Moves the sound clockwise by 20 degrees, relative to the current angle.
Description
In combination with elevation
, azimuth
enables different audio sources to be positioned spatially for aural presentation. This is important in that it provides a natural way to tell several voices apart, as each can be positioned to originate at a different location on the sound stage. Stereo output produce a lateral sound stage, while binaural headphones and multi-speaker setups allow for a fully three-dimensional stage.
Initial value | center |
---|---|
Applies to | all elements |
Inherited | yes |
Media | aural |
Computed value | normalized angle |
Animatable | no |
Canonical order | order of appearance in the formal grammar of the values |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | ? | Not supported [1] | ? | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | Not supported [1] | ? | ? | ? |
[1] Although the aural media group was recognized in Gecko prior to Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), it was not implemented. What little code there was to attempt to process it was removed in Gecko 6.0.
See Also
Specifications
Specification | Status | Comment |
---|---|---|
CSS Level 2 (Revision 1) The definition of 'azimut' in that specification. |
Recommendation | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/azimuth