The CSS Speech Module

History

Twenty years ago CSS 2.0 was published and part of this release was
ACSS — the Aural CSS module. But the module was quickly replaced with the ‘speech’ keyword in CSS 2.1. This specification just reserved the keyword but didn’t specify any of it’s properties or values.

The idea

The speech module enables you to style how the elements in your document are spoken. The module contains properties to specify how a document is rendered by a speech synthesizer e.g. volume, voice, speed, pitch, cues, pauses, etc.

Properties

Let’s start with some straight forward properties. I will take some parts from the CSS specification, so if you want to learn more about them I recommend you check out the draft!

h1
{
voice-volume: medium 6dB;
}
h1
{
voice-balance: left;
}
h1
{
speak: always;
}
h1
{
speak-as: spell-out;
}

The aural formatting model

You can imagine the properties pause, cue and rest as an aural equivalent to padding, border and margin. They surround the styled element.

Voice characteristics

The CSS speech module also provides you properties to modify the voice characteristics. You can change the sound of the voice with voice-family (an equivalent to font-family), change the speed of the spoken text with voice-rate as well as the pitch (voice-pitch), range (voice-range) and stress (voice-stress).

Example

Now that you’ve had a brief introduction to each property of the CSS speech module we can take a look at an example. Below you see a snippet which is provided directly from the draft showing you how an implementation with the module would look like:

h1, h2, h3, h4, h5, h6
{
voice-family: paul;
voice-stress: moderate;
cue-before: url(../audio/ping.wav);
voice-volume: medium 6dB;
}
p.heidi
{
voice-family: female;
voice-balance: left;
voice-pitch: high;
voice-volume: -6dB;
}
p.peter
{
voice-family: male;
voice-balance: right;
voice-rate: fast;
}
span.special
{
voice-volume: soft;
pause-after: strong;
}

...

<h1>I am Paul, and I speak headings.</h1>
<p class="heidi">Hello, I am Heidi.</p>
<p class="peter">
<span class="special">Can you hear me ?</span>
I am Peter.
</p>

Conclusion

I never heard about the CSS speech module before I found it through random searching in the CSS specifications. It wasn’t implemented by any of the major browsers since it got the CR status and was retired just some weeks ago (sadly I couldn’t find the exact reason anywhere, why they retired it).

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
David Jöch

David Jöch

736 Followers

Freelance Web Developer and Indie App Developer. More about my work on https://joech.io