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

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

pause style property

Browser support:

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

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

The pause, pauseBefore and pauseAfter properties are similar to the rest, restBefore and restAfter 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.pause;

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

This property is read/write.

CSS page for this property: pause

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.	<pause-before>
2.	<pause-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 pause is calculated from the speech-rate property. The speech-rate defines how much time a word takes, the pause is the percentage of this value.

pause-after

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

pause-before

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

time(s|ms)

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

Default: this property has no default value.

If only one value is specified, it affects both the pauseBefore and pauseAfter properties.

Example HTML code 1:

This example illustrates the use of the pause property:

<head>
    <style>
        .pause {
            pause: 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 pause property in JavaScript:

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

            if ('pause' in heading.style) {
                heading.style.pause = 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>