A Look Into Speech Support in CSS3

By Vipul Patel

https://www.htmlgoodies.com/beyond/css/a-look-into-speech-support-in-css3.html (Back to article)

The speech module of CSS, available at http://www.w3.org/TR/css3-speech , describes the various properties that allows web content developers to declare the rendering of web documents via speech synthesis.

In addition to this, the specification also defines optional audio cue which can be used in web documents.


The CSS3 speech properties support controlling the pitch and rate of sound, as well as sound levels. In addition, they also support Text To Speech voices. By working together with visual properties, these speech properties provide a rich presentation experience to the readers browsing the content.

The CSS3 Speech Module introduces a new "box model" for the aural dimension.

User agents with text to speech capability can be targeted


Let us take a look at the various speech related CSS3 properties



This property is used to control the amplitude (volume) of the audio which will be generated by the text to speech engine. It can also be used to adjust the relative volume level of audio cues of a selected element.

       Valid values are:



This property specifies the balance (spatial distribution) of the audio output, relative to the listener's position. The valid range is from -100 to 100.

     Valid values are:

     <number> - Any number between -100 and 100 with 0 representing center point.



This property determines whether text can be rendered aurally or not.

     Valid values are:



This property determines how the text is rendered aurally.

     Valid values are:



These properties specify a silence before/after the speech synthesis of the selected element. These properties can be represented in short-hand using "pause" property.

     Valid values are:



These properties specify a silence of a specific duration before/after speech synthesis of the selected element. These properties can be represented in short-hand using "rest" property.

Valid values are the same as the "pause-before" and "pause-after" property.



These properties specify pre-recorded items to be played before/after the selected element.

It takes in a <URI> and a <decibel> value. It can be represented in short-hand using the "cue" property.



In this article, we learned about the various speech related properties which are specifies in the CSS3 speech module. This module is currently at the "Candidate Recommendation" stage.

About the author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com . You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508