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

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

restAfter style property

Browser support:

Specifies or returns that the browser should insert a rest after 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.restAfter;

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

This property is read/write.

CSS page for this property: rest-after

Possible values:

The type of this property is string.

One of the following 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.

time(s|ms)

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

Default: 0.

Example HTML code 1:

This example illustrates the use of the rest-after property:

<head>
    <style>
        .pause {
            rest-before: 5s;
            rest-after: 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 restAfter 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 ('restAfter' in heading.style) {
                heading.style.restAfter = 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="3s" />
    <button onclick="ChangePause ();">Change the pause after!</button>
</body>