CSS3 Examples: CSS Aural

CSS CUE-AFTER

Written by jon on 1:18 AM

The ‘cue’ family of properties allows the attachment of key sounds (or “Auditory Icons” as the CSS spec refers to them) to elements. This allows an author to add distinguishing characteristics to semantic elements. This property specifically references a sound to be played after the element has been aurally rendered. If loading of a URL fails, nothing should be played, but if the system does not have the ability to play it, the spec says the system should try to use some sort of cue (audio, visual or other.)

Example

strong { cue-after: url(orchestralsneeze.wav) }

<strong style=”cue-after: url(sound.wav)”>text</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
none	Play no sound after the element.
[URL]	Indicates the URL of a sound file to be played after the element. If loading of the indicated URL fails no sound will be played. If the referenced resource is not a sound file, it should be ignored and the property should be treated as if the value were set to ‘none.'

| Posted in » CSS Aural

CSS CUE-BEFORE

Written by jon on 1:17 AM

The ‘cue’ family of properties allows the attachment of key sounds (or “Auditory Icons” as the CSS spec refers to them) to elements. This allows an author to add distinguishing characteristics to semantic elements. This property specifically references a sound to be played before the element has been aurally rendered. If loading of a URL fails, nothing should be played, but if the system does not have the ability to play it, the spec says the system should try to use some sort of cue (audio, visual or other.)

Example

strong { cue-before: url(orchestralsneeze.wav) }

<strong style=”cue-before: url(sound.wav)”>text</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
none	Play no sound before the element.
[URL]	Indicates the URL of a sound file to be played before the element. If loading of the indicated URL fails no sound will be played. If the referenced resource is not a sound file, it should be ignored and the property should be treated as if the value were set to ‘none.'

| Posted in » CSS Aural

CSS CUE

Written by jon on 1:16 AM

The ‘cue’ family of properties allows the attachment of key sounds (or “Auditory Icons” as the CSS spec refers to them) to elements. This allows an author to add distinguishing characteristics to semantic elements. ‘Cue’ is a shorthand property for setting both ‘cue-before’ and ‘cue-after’ property values. If two values are given, the first value is assigned to ‘cue-before’ and the second is ‘cue-after’. If only one value is given, it applies to both properties. If loading of a URL fails, nothing should be played, but if the system does not have the ability to play it, the spec says the system should try to use some sort of cue (audio, visual or other.)

Example

strong { cue: url(orchestralsneeze.wav) url(quack.wav) }

<strong style=”cue: url(sound.wav) url(quack.wav)”>text</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
none	Play no sound before and after the element.
[URL]	Indicates the URL of a sound file to be played before and after the element. If loading of the indicated URL fails no sound will be played. If the referenced resource is not a sound file, it should be ignored and the property should be treated as if the value were set to ‘none.'

| Posted in » CSS Aural

CSS PAUSE-AFTER

Written by jon on 1:15 AM

This property specifies a pause to be inserted after speaking an element’s content. The pause is inserted between the element’s content and any ‘cue-before’ or ‘cue-after’ content.

Example

blockquote { pause-after: 1.5s }

<blockquote style=”pause-after: 1.5s”>text</blockquote>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[time]	Sets the pause length to a time measurement (see the time units for more details)
[percentage]	Refers to the inverse of the value of the 'speech-rate' property. (eg: a value of 100% for ‘pause-after' with a 'speech-rate' of 60 words per minute would create a pause of 1 second.)

| Posted in » CSS Aural

CSS PAUSE-BEFORE

Written by jon on 1:14 AM

This property specifies a pause to be inserted before speaking an element’s content. The pause is inserted between the element’s content and any ‘cue-before’ or ‘cue-after’ content.

Example

blockquote { pause-before: 1.5s }

<blockquote style=”pause-before: 1.5s”>text</blockquote>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[time]	Sets the pause length to a time measurement (see the time units for more details)
[percentage]	Refers to the inverse of the value of the 'speech-rate' property. (eg: a value of 100% for ‘pause-before' with a 'speech-rate' of 60 words per minute would create a pause of 1 second.)

| Posted in » CSS Aural

CSS PAUSE

Written by jon on 1:13 AM

This is a shorthand property used to set the ‘pause-before’ and ‘pause-after’ properties. If two values are given, the first refers to ‘pause-before’ and the second to ‘pause-after’. If only one value is given, it is used for both properties.

Example

blockquote { pause: 2s 3s }

<blockquote style=”pause: 2s 3s”>text</blockquote>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[time]	Sets the pause length to a time measurement (see the time units for more details)
[percentage]	Refers to the inverse of the value of the 'speech-rate' property. (eg: a value of 100% for ‘pause-after' with a 'speech-rate' of 60 words per minute would create a pause of 1 second.)

| Posted in » CSS Aural

CSS PLAY-DURING

Written by jon on 1:11 AM

This property specifies a sound to be played while an element’s content is rendered.

Example

q { play-during: url(accordian.wav) mix }

<q style=”play-during: url(accordian.wav) mix”>Some text</q>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
mix	This value indicates that whatever sound file is to be played for this element will be played with the sound inherited from the parent element's ‘play-during' property. If this value is not used, the element's background sound replaces the ‘play-during' sound of any parent.
repeat	This value indicates that the specified sound will be repeated to fill the time needed to render the element, if it is too short. Otherwise, the sound plays once and then stops. If the ‘play-during' sound is longer than the time needed to render the element content it will be clipped.
auto	The ‘play-during' sound of the parent element plays only once more.
none	Nothing is played in the background during the element's rendering, not even any parent ‘play-during' value. Parent ‘play-during' values will resume playing after the element is rendered.
[URL]	Indicates the URL to be used as a background sound while the element's content is rendered.

| Posted in » CSS Aural

CSS SPEECH-RATE

Written by jon on 1:10 AM

This property specifies the speaking rate (speed) of the content.

Example

strong { speech-rate: fast }

<strong style=”speech-rate: fast”>text</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
x-slow slow medium fast x-fast	x-slow: 80 words per minute slow: 120 words per minute medium: 180 - 200 words per minute fast: 300 words per minute x-fast: 500 words per minute
slower faster	slower: Subtracts 40 words per minute from the current speech-rate faster: Adds 40 words per minute to the current speech-rate
[number]	Positive number indicating speech-rate in words per minute.

| Posted in » CSS Aural

CSS PITCH-RANGE

Written by jon on 1:09 AM

Meaning and emphasis is created in most languages by varying the pitch and inflection of the voice. This property specifies the degree of variation from the average pitch of the voice being used to render the content. A voice with a small pitch-range will sound monotone, while a voice with high pitch range values will sound very animated.

Example

strong { pitch-range: 80 }

<strong style=”pitch-range: 80″>content</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[number]	An integer between ‘0′ and ‘100′. A value of ‘0′ produces a monotone voice, while ‘50′ would produce a normal inflection. Pitch ranges greater than 50 create animated voices.

| Posted in » CSS Aural

CSS PITCH

Written by jon on 1:07 AM

This property specifies the average frequency of the speaking voice. Different voice families have different average frequencies (a male voice is approx. 120Hz, a female voice is approx 210Hz.)

Example

strong { pitch: x-high }

<strong style=”pitch: x-high”>content</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
x-low low medium high x-high	These do not map to absolute frequencies since they are dependent on voice family. The obvious scale between values should be maintained no matter the voice family.
[frequency]	Positive number indicating average voice pitch measured in Hertz or Kilohertz.

| Posted in » CSS Aural

CSS SPEAK-NUMERICAL

Written by jon on 1:05 AM

This property controls how numbers are spoken.

Example

.telephone { speak-punctuation: code; speak-numeral: digits }

<p>The phone number is <em style=”speak-punctuation: code; speak-numeral: digits”>555-1212</em></p>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
digits	Speak the number as individual digits.
continuous	Speak the number as a full phrase/word number. Word representations of numbers are language-dependent.

| Posted in » CSS Aural

CSS SPEAK-PUNCTUATION

Written by jon on 1:04 AM

This property specifies how punctuation characters are spoken.

Example

.telephone { speak-punctuation: code; speak-numeral: digits }

<p>The phone number is <em style=”speak-punctuation: code; speak-numeral: digits”>555-1212</em></p>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
code	Punctuation is to be spoken literally.
none	Punctuation is not spoken, but is rendered naturally as pauses in the rest of the content rendering.

| Posted in » CSS Aural

CSS SPEAK

Written by jon on 1:03 AM

This property specifies whether content will be aurally rendered, and the nature of its rendering. It controls aural rendering in much the same way the ‘display’ property controls visual rendering.

Example

acronym { speak: spell-out }

<acronym style=”speak: spell-out”>Some Text</acronym>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
normal	Uses normal pronunciation rules for the current language to render content.
none	Suppresses/skips aural rendering of the element. No time is taken to render the element. Child elements can override this value.
spell-out	Spells the content one character at a time (useful with acronyms and abbreviations.)

| Posted in » CSS Aural

CSS VOICE-FAMILY

Written by jon on 1:01 AM

This property indicates a comma-separated, prioritized list (left to right in decreasing priority) of specific and/or generic voice family names. At least one specific or general voice family must be given and it is wise to include a generic voice family as well in case the user does not have any of the specific voices listed. If no match is made, the browser default voice family should be used.

Example

strong { voice-family: “Bob Barker”, “Monty Hall”, male }

<strong style=”voice-family: ‘Bob Barker', ‘Monty Hall', male”>Some Text</strong>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
male female child	These indicate a generic family of voices, of which any specific voice can be grouped under.
[specific voice]	This value is a string identifying a specific voice on the user's system. Names containing whitespace should be quoted.

| Posted in » CSS Aural

CSS ELEVATION

Written by jon on 1:00 AM

In an optimal listening environment, the soundstage is considered to be parallel to the floor, with origin point at the listeners head. This property specifies the vertical angle off of the soundstage plane giving up/down angle references as a location for a referenced element. Zero degree references are forward on the soundstage plane, with positive angular values being upward, and negative values being downward. This property only describes the desired end-user effect and does not specify how it is produced.

Example

p.high { elevation: 45deg }

<p style=”elevation: 45deg”>Some text</p>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
below level above	below: Same as ‘-90deg' level: Same as ‘0deg' above: Same as ‘90deg'
lower higher	lower: Subtracts 10 degrees from the current absolute or inherited elevation. higher: Adds 10 degrees to the current absolute or inherited elevation.
[angle]	Specifies an angle, between ‘-90deg' and ‘90deg'. ‘0deg' references straight ahead/forward on the soundstage plane (level with the listener.) ‘90deg' is directly overhead while ‘-90deg' is directly below.

| Posted in » CSS Aural

CSS AZIMUTH

Written by jon on 12:58 AM

In an optimal listening environment, the soundstage is considered to be parallel to the floor, with origin point at the listeners head. The ideal listening position is considered to be perfectly facing the main sound reproduction source(s) at an optimal distance. This property describes the radial position (360 degree measure) on this listening plane. An imaginary axis can be drawn straight ahead of the listener with the imaginary line serving as the origin. Rightward angle measures are positive and leftward, negative.

Example

.rightdude { azimuth: 45deg }

<p style=”azimuth: 45deg”>test text in the paragraph</p>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
left-side far-left left center-left center center-right right far-right right-side	left-side: 270 degrees or -90 degrees far-left: 300 degrees or -60 degrees left: 320 degrees or -40 degrees center-left: 340 degrees or -20 degrees center: 0 degrees center-right: 20 degrees or -340 degrees right: 40 degrees or -320 degrees far-right: 60 degrees or 300 degrees right-side: 90 degrees or -270 degrees
leftwards rightwards	leftwards: counter-clockwise 20 degrees from an inherited or absolute reference angle. rightwards: clockwise 20 degrees from an inherited or absolute reference angle.
[angle]	Refers to an angle off of the reference line in the sound stage plane (-360 to 360 degrees.) ‘0deg' is directly ahead of the listener, ‘90deg'(-270deg) is to the right, ‘180deg'(-180deg) behind, and ‘270deg'(-90deg) to the left.

| Posted in » CSS Aural

CSS RICHNESS

Written by jon on 12:56 AM

This property specifies the richness, or brightness, of the speaking voice. Higher values of richness/brightness have rougher waveforms and tend to carry better than lower richness values with smoother waveforms.

Example

body { richness: 75 }

<body style=”richness: 75″>text</body>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[number]	This is an integer value between 0 and 100 representing the brightness of the voice. Higher values indicate a brighter voice while lower values create a softer voice.

| Posted in » CSS Aural

CSS STRESS

Written by jon on 12:55 AM

This is similar to the ‘pitch-range’ property - it specifies the maximum output height of “local peaks” in the current voice’s wave form.

Example

body { stress: 75 }

<body style=”stress: 75″>text</body>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
[number]	This is an integer value between 0 and 100. Values are based on language settings (some languages tend to produce higher vocal stresses than others.)

| Posted in » CSS Aural

CSS VOLUME

Written by jon on 7:23 AM

This property refers to the median volume of the current voice. Pitch and inflection variations may vary well above and below this value. The default minimum and maximum values (0/100) should be controllable by the user.

Example

body { volume: soft }

<body style=”volume: soft”>text</body>

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
silent	No sound at all. The time time that would have been taken to aurally render the element is still taken, but no sound is made. Any specified ‘pause' properties before/after the element are also rendered. This behavior is different than the 'speak' property being set to none.
x-soft soft medium loud x-loud	x-soft: Same as ‘0′ soft: Same as ‘25′ medium: Same as ‘50′ loud: Same as ‘75′ x-loud: Same as ‘100′
[number]	A number between ‘0′ and ‘100′. ‘0′ represents the minimum audible volume level (not the same effect as “silent”) and 100 corresponds to the maximum comfortable volume level.
[percentage]	This measure is relative to the inherited value for the Volume property, and is clipped to the range ‘0′ to ‘100′.

| Posted in » CSS Aural

Subscribe to: Posts (Atom)