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

 

CSS
h1   { azimuth: 30deg }
td.a { azimuth: far-right }          /*  60deg */
#12  { azimuth: behind far-right }   /* 120deg */
p.comment { azimuth: behind }        /* 180deg */

Syntax  

CSS
<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 to 360deg. The value 0deg means directly ahead in the center of the sound stage (this is the default value). 90deg is to the right, 180deg is behind, and 270deg or -90deg is to the left.

Image:Azimuth.png

Positional keywords

  • left-side: Same as 270deg.
  • left-side behind: Same as 270deg.
  • far-left: Same as 300deg.
  • far-left behind: Same as 240deg.
  • left: Same as 320deg.
  • left behind: Same as 220deg.
  • center-left: Same as 340deg.
  • center-left behind: Same as 200deg.
  • center: Same as 0deg.
  • center behind: Same as 180deg.
  • center-right: Same as 20deg.
  • center-right behind: Same as 160deg.
  • right: Same as 40deg.
  • right behind: Same as 140deg.
  • far-right: Same as 60deg.
  • far-right behind: Same as 120deg.
  • right-side: Same as 90deg.
  • right-side behind: Same as 90deg.
  • behind: Same as 180deg. 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 valuecenter
Applies toall elements
Inheritedyes
Mediaaural
Computed valuenormalized angle
Animatableno
Canonical orderorder 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

CSS CSS Reference NeedsBrowserCompatibility NeedsMobileBrowserCompatibility NeedsUpdate