In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > rest

rest style property

Browser support:

Specifies or returns a shorthand property for setting the restBefore and restAfter properties for speaking the element's content.

With the restBefore and restAfter properties you can specify pauses before and after speaking the element's content.

The rest, restBefore and restAfter properties are similar to the pause, pauseBefore and pauseAfter properties. The only difference when a sound file needs to play before or after the element (cue, cueBefore and cueAfter properties). In that case, the pauseBefore property specifies the pause immediately before and the restBefore property specifies the pause immediately after playing the sound file that belongs to the cueBefore property. Similarly, the restAfter property specifies the pause immediately before and the pauseAfter property specifies the pause immediately after playing the sound file that belongs to the cueAfter property.

Note: Unfortunately, the pauseBefore and restAfter properties currently do not work for sound files in Opera, and the pause, pauseBefore, pauseAfter and rest, restBefore, restAfter properties have some other bugs (do not work for several valid time values).

Syntax:

object.rest;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: rest

Possible values:

The type of this property is string.

One of the following values:

•

Values in this order (use the space character to separate them):

1.	<rest-before>
2.	<rest-after>

•

time(s|ms)

•

pause in percentage

•

inherit

Description of values:

inherit

Takes the value of this property from the computed style of the parent element.

pause in percentage

The rest is calculated from the speech-rate property. The speech-rate defines how much time a word takes, the rest is the percentage of this value.

rest-after

Specifies or returns that the browser should insert a rest after speaking the element's content.

rest-before

Specifies or returns that the browser should insert a rest before speaking the element's content.

time(s|ms)

Integer, followed by a time unit (s,ms). The rest in absolute time.

Default: this property has no default value.

If only one value is specified, it affects both the restBefore and restAfter properties.

Example HTML code 1:

This example illustrates the use of the rest property:

<head>
    <style>
        .pause {
            rest: 5s 3s;
        }
    </style>
</head>
<body>
    Select all text on the page (CTRL+A), click with the right mouse button on the selected text and select the speak menu item in the popup context menu.
    <br /><br />
    Five seconds pause before speaking the header element.
    <h2 class="pause">Header element</h2>
    There was three seconds pause after speaking the header element.
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the rest property in JavaScript:

<head>
    <style>
        #pause {
            rest: 5s 3s;
        }
    </style>
    <script type="text/javascript">
        function ChangePause () {
            var heading = document.getElementById ("pause");
            var pauseInput = document.getElementById ("pauseInput");

            if ('rest' in heading.style) {
                heading.style.rest = pauseInput.value;
            } 
            else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    Select all text on the page (CTRL+A), click with the right mouse button on the selected text and select the speak menu item in the popup context menu.
    <br /><br />
    Five seconds pause before speaking the header element.
    <h2 id="pause">Header element</h2>
    There was three seconds pause after speaking the header element.
    <br /><br />
    <input id="pauseInput" type="text" value="5s 3s" />
    <button onclick="ChangePause ();">Change the pause!</button>
</body>