recursal/MDN huggingface dataset:
Element: clientWidth property
=============================

 The **`Element.clientWidth`** property is zero for inline
 elements and elements with no CSS; otherwise, it's the inner width of an element in
 pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if
 present).

 When `clientWidth` is used on the root element (the
 `<html>` element), (or on `<body>` if the document is
 in quirks mode), the viewport's width (excluding any scrollbar) is returned. This is a special case of `clientWidth`.


**Note:** This property will round the value to an integer. If you need
 a fractional value, use `element.getBoundingClientRect()`.


Value
-----

A number.

Examples
--------

![An example element with large padding, border and margin. clientWidth is the inner width of the element including its padding, and excluding its margin, border, and vertical scrollbar.](/en-US/docs/Web/API/Element/clientWidth/dimensions-client.png)

Specifications
--------------

| Specification |
| --- |
| CSSOM View Module # dom-element-clientwidth |

### Notes

`clientWidth` was first introduced in the MS IE DHTML object model.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `HTMLElement.offsetWidth`
* `Element.scrollWidth`
* Determining the dimensions of elements
Element: ariaSetSize property
=============================

The **`ariaSetSize`** property of the `Element` interface reflects the value of the `aria-setsize` attribute, which defines the number of items in the current set of listitems or treeitems.

Value
-----

A string containing an integer.

Examples
--------

In this example the `aria-setsize` attribute on the element with an ID of `tab-id` is set to "3", to inform a device that there are currently 3 tabs in the group. Using `ariaSetSize` we update the value to "4".


```html
<button
 role="tab"
 aria-selected="true"
 aria-setsize="3"
 aria-controls="tabpanel-id"
 id="tab-id">
  Tab label
</button>
```



```js
let el = document.getElementById("tab-id");
console.log(el.ariaSetSize); // 3
el.ariaSetSize = "4";
console.log(el.ariaSetSize); // 4
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariasetsize |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ARIA: tab role
SpeechSynthesisUtterance: boundary event
========================================

The **`boundary`** event of the Web Speech API is fired when the spoken utterance reaches a word or sentence boundary.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("boundary", (event) => {});

onboundary = (event) => {};
```

Event type
----------

A `SpeechSynthesisEvent`. Inherits from `Event`.

Event

SpeechSynthesisEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`charIndex` Read only 

Returns the index position of the character in the `SpeechSynthesisUtterance.text` that was being spoken when the event was triggered.

`elapsedTime` Read only 

Returns the elapsed time in seconds after the `SpeechSynthesisUtterance.text` started being spoken that the event was triggered at.

`name` Read only 

Returns the name associated with certain types of events occurring as the `SpeechSynthesisUtterance.text` is being spoken: the name of the SSML marker reached in the case of a `mark` event, or the type of boundary reached in the case of a `boundary` event.

`utterance` Read only 

Returns the `SpeechSynthesisUtterance` instance that the event was triggered on.

Examples
--------

You can use the `boundary` event in an `addEventListener` method:


```js
utterThis.addEventListener("boundary", (event) => {
  console.log(
    `${event.name} boundary reached after ${event.elapsedTime} seconds.`,
  );
});
```


Or use the `onboundary` event handler property:


```js
utterThis.onboundary = (event) => {
  console.log(
    `${event.name} boundary reached after ${event.elapsedTime} seconds.`,
  );
};
```

Specifications
--------------

| Specification |
| --- |
| Web Speech API # eventdef-speechsynthesisutterance-boundary |
| Web Speech API # dom-speechsynthesisutterance-onboundary |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Speech API
SpeechSynthesisUtterance: lang property
=======================================

The **`lang`** property of the `SpeechSynthesisUtterance` interface gets and sets the language of the utterance.

If unset, the app's (i.e. the `<html>` `lang` value) lang will be used, or the user-agent default if that is unset too.

Value
-----

A string representing a BCP 47 language tag.

Examples
--------


```js
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

const voices = synth.getVoices();

// ...

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (let i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  utterThis.lang = "en-US";
  synth.speak(utterThis);
  inputTxt.blur();
};
```

Specifications
--------------

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisutterance-lang |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Speech API
SpeechSynthesisUtterance: mark event
====================================

The **`mark`** event of the Web Speech API `SpeechSynthesisUtterance` object is fired when the spoken utterance reaches a named SSML "mark" tag.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("mark", (event) => {});

onmark = (event) => {};
```

Event type
----------

A `SpeechSynthesisEvent`. Inherits from `Event`.

Event

SpeechSynthesisEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`charIndex` Read only 

Returns the index position of the character in the `SpeechSynthesisUtterance.text` that was being spoken when the event was triggered.

`elapsedTime` Read only 

Returns the elapsed time in seconds after the `SpeechSynthesisUtterance.text` started being spoken that the event was triggered at.

`name` Read only 

Returns the name associated with certain types of events occurring as the `SpeechSynthesisUtterance.text` is being spoken: the name of the SSML marker reached in the case of a `mark` event, or the type of boundary reached in the case of a `boundary` event.

`utterance` Read only 

Returns the `SpeechSynthesisUtterance` instance that the event was triggered on.

Examples
--------

You can use the `mark` event in an `addEventListener` method:


```js
utterThis.addEventListener("mark", (event) => {
  console.log(`A mark was reached: ${event.name}`);
});
```


Or use the `onmark` event handler property:


```js
utterThis.onmark = (event) => {
  console.log(`A mark was reached: ${event.name}`);
};
```

Specifications
--------------

| Specification |
| --- |
| Web Speech API # eventdef-speechsynthesisutterance-mark |
| Web Speech API # dom-speechsynthesisutterance-onmark |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Speech API
SpeechSynthesisUtterance: volume property
=========================================

The **`volume`** property of the `SpeechSynthesisUtterance` interface gets and sets the volume that the utterance will be spoken at.

If not set, the default value 1 will be used.

Value
-----

A float that represents the volume value, between 0 (lowest) and 1 (highest.)

If SSML is used, this value will be overridden by prosody tags in the markup.

Examples
--------


```js
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

const voices = synth.getVoices();

// ...

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (let i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  utterThis.volume = 0.5;
  synth.speak(utterThis);
  inputTxt.blur();
};
```

Specifications
--------------

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisutterance-volume |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Speech API
SpeechSynthesisUtterance: pause event
=====================================

The **`pause`** event of the Web Speech API `SpeechSynthesisUtterance` object is fired when the utterance is paused part way through.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("pause", (event) => {});

onpause = (event) => {};
```

Event type
----------

A `SpeechSynthesisEvent`. Inherits from `Event`.

Event

SpeechSynthesisEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`charIndex` Read only 

Returns the index position of the character in the `SpeechSynthesisUtterance.text` that was being spoken when the event was triggered.

`elapsedTime` Read only 

Returns the elapsed time in seconds after the `SpeechSynthesisUtterance.text` started being spoken that the event was triggered at.

`name` Read only 

Returns the name associated with certain types of events occurring as the `SpeechSynthesisUtterance.text` is being spoken: the name of the SSML marker reached in the case of a `mark` event, or the type of boundary reached in the case of a `boundary` event.

`utterance` Read only 

Returns the `SpeechSynthesisUtterance` instance that the event was triggered on.

Examples
--------

You can use the `pause` event in an `addEventListener` method:


```js
utterThis.addEventListener("pause", (event) => {
  console.log(`Speech paused after ${event.elapsedTime} seconds.`);
});
```


Or use the `onpause` event handler property:


```js
utterThis.onpause = (event) => {
  console.log(`Speech paused after ${event.elapsedTime} seconds.`);
};
```

Specifications
--------------

| Specification |
| --- |
| Web Speech API # eventdef-speechsynthesisutterance-pause |
| Web Speech API # dom-speechsynthesisutterance-onpause |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Speech API
SpeechSynthesisUtterance: start event
=====================================

The **`start`** event of the Web Speech API `SpeechSynthesisUtterance` object is fired when the utterance has begun to be spoken.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("start", (event) => {});

onstart = (event) => {};
```

Event type
----------

A `SpeechSynthesisEvent`. Inherits from `Event`.

Event

SpeechSynthesisEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`charIndex` Read only 

Returns the index position of the character in the `SpeechSynthesisUtterance.text` that was being spoken when the event was triggered.

`elapsedTime` Read only 

Returns the elapsed time in seconds after the `SpeechSynthesisUtterance.text` started being spoken that the event was triggered at.

`name` Read only 

Returns the name associated with certain types of events occurring as the `SpeechSynthesisUtterance.text` is being spoken: the name of the SSML marker reached in the case of a `mark` event, or the type of boundary reached in the case of a `boundary` event.

`utterance` Read only 

Returns the `SpeechSynthesisUtterance` instance that the event was triggered on.

Examples
--------

You can use the `start` event in an `addEventListener` method:


```js
utterThis.addEventListener("start", (event) => {
  console.log(`We have started uttering this speech: ${event.utterance.text}`);
});
```


Or use the `onstart` event handler property:


```js
utterThis.onstart = (event) => {
  console.log(`We have started uttering this speech: ${event.utterance.text}`);
};
```

Specifications
--------------

| Specification |
| --- |
| Web Speech API # eventdef-speechsynthesisutterance-start |
| Web Speech API # dom-speechsynthesisutterance-onstart |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Speech API
SpeechSynthesisUtterance: SpeechSynthesisUtterance() constructor
================================================================

The `SpeechSynthesisUtterance()` constructor of the `SpeechSynthesisUtterance` interface returns a new `SpeechSynthesisUtterance` object instance.

Syntax
------


```js
new SpeechSynthesisUtterance(text)
```

### Parameters

`text`

A string containing the text that will be synthesized when the utterance is spoken.

Examples
--------

The following snippet is excerpted from our Speech synthesizer demo.


```js
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

const voices = synth.getVoices();

// ...

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (let i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  synth.speak(utterThis);
  inputTxt.blur();
};
```

Specifications
--------------

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisutterance-speechsynthesisutterance |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Speech API
SpeechSynthesisUtterance: rate property
=======================================

The **`rate`** property of the `SpeechSynthesisUtterance` interface gets and sets the speed at which the utterance will be spoken at.

If unset, a default value of 1 will be used.

Value
-----

 A float representing the rate value.
 It can range between 0.1 (lowest) and 10 (highest), with 1 being the default rate for the current platform or voice, which should correspond to a normal speaking rate.
 Other values act as a percentage relative to this, so for example 2 is twice as fast, 0.5 is half as fast, etc.

 Some speech synthesis engines or voices may constrain the minimum and maximum rates further.
 If SSML is used, this value will be overridden by prosody tags in the markup.

Examples
--------

### Adjusting playback rate

In this example we can adjust the playback rate using the slider, then play the utterance with the "Play" button.

#### HTML


```html
<p id="text">It was a dark and stormy night.</p>

<div id="rate-control">
  <label for="rate">Rate:</label>
  <input type="range" min="0.5" max="2" value="1" step="0.1" id="rate" />
</div>

<button id="play">Play</button>
```


#### CSS


```css
body {
  font-family: sans-serif;
}

#rate-control {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}
```


#### JavaScript


```js
const synth = window.speechSynthesis;

const text = document.querySelector("#text");
const play = document.querySelector("#play");
const rate = document.querySelector("#rate");

function speak() {
  if (synth.speaking) {
    synth.cancel();
  }
  const utterThis = new SpeechSynthesisUtterance(text.textContent);
  utterThis.addEventListener("error", () => {
    console.error("SpeechSynthesisUtterance error");
  });
  utterThis.rate = rate.value;
  synth.speak(utterThis);
}

play.addEventListener("click", speak);
```


#### Output

Specifications
--------------

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisutterance-rate |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Speech API
SpeechSynthesisUtterance: voice property
========================================

The **`voice`** property of the `SpeechSynthesisUtterance` interface gets and sets the voice that will be used to speak the utterance.

 This should be set to one of the `SpeechSynthesisVoice` objects returned by `SpeechSynthesis.getVoices()`.
 If not set by the time the utterance is spoken, the voice used will be the most suitable default voice available for the utterance's `lang` setting.

Value
-----

A `SpeechSynthesisVoice` object.

Examples
--------


```js
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

const voices = synth.getVoices();

// ...

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (let i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  synth.speak(utterThis);
  inputTxt.blur();
};
```

Specifications
--------------

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisutterance-voice |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Speech API
SpeechSynthesisUtterance: end event
===================================

The **`end`** event of the Web Speech API `SpeechSynthesisUtterance` object is fired when the utterance has finished being spoken.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("end", (event) => {});

onend = (event) => {};
```

Event type
----------

A `SpeechSynthesisEvent`. Inherits from `Event`.

Event

SpeechSynthesisEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`charIndex` Read only 

Returns the index position of the character in the `SpeechSynthesisUtterance.text` that was being spoken when the event was triggered.

`elapsedTime` Read only 

Returns the elapsed time in seconds after the `SpeechSynthesisUtterance.text` started being spoken that the event was triggered at.

`name` Read only 

Returns the name associated with certain types of events occurring as the `SpeechSynthesisUtterance.text` is being spoken: the name of the SSML marker reached in the case of a `mark` event, or the type of boundary reached in the case of a `boundary` event.

`utterance` Read only 

Returns the `SpeechSynthesisUtterance` instance that the event was triggered on.

Examples
--------

You can use the `end` event in an `addEventListener` method:


```js
utterThis.addEventListener("end", (event) => {
  console.log(
    `Utterance has finished being spoken after ${event.elapsedTime} seconds.`,
  );
});
```


Or use the `onend` event handler property:


```js
utterThis.onend = (event) => {
  console.log(
    `Utterance has finished being spoken after ${event.elapsedTime} seconds.`,
  );
};
```

Specifications
--------------

| Specification |
| --- |
| Web Speech API # eventdef-speechsynthesisutterance-end |
| Web Speech API # dom-speechsynthesisutterance-onend |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Speech API
SpeechSynthesisUtterance: error event
=====================================

The **`error`** event of the Web Speech API `SpeechSynthesisUtterance` object is fired when an error occurs that prevents the utterance from being successfully spoken.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("error", (event) => {});

onerror = (event) => {};
```

Event type
----------

A `SpeechSynthesisErrorEvent`. Inherits from `SpeechSynthesisEvent` and `Event`.

Event

SpeechSynthesisEvent

SpeechSynthesisErrorEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`charIndex` Read only 

Returns the index position of the character in the `SpeechSynthesisUtterance.text` that was being spoken when the event was triggered.

`elapsedTime` Read only 

Returns the elapsed time in seconds after the `SpeechSynthesisUtterance.text` started being spoken that the event was triggered at.

`error` Read only 

Returns an error code indicating what has gone wrong with a speech synthesis attempt.

`name` Read only 

Returns the name associated with certain types of events occurring as the `SpeechSynthesisUtterance.text` is being spoken: the name of the SSML marker reached in the case of a `mark` event, or the type of boundary reached in the case of a `boundary` event.

`utterance` Read only 

Returns the `SpeechSynthesisUtterance` instance that the event was triggered on.

Examples
--------

You can use the `error` event in an `addEventListener` method:


```js
utterThis.addEventListener("error", (event) => {
  console.log(
    `An error has occurred with the speech synthesis: ${event.error}`,
  );
});
```


Or use the `onerror` event handler property:


```js
utterThis.onerror = (event) => {
  console.log(
    `An error has occurred with the speech synthesis: ${event.error}`,
  );
};
```

Specifications
--------------

| Specification |
| --- |
| Web Speech API # eventdef-speechsynthesisutterance-error |
| Web Speech API # dom-speechsynthesisutterance-onerror |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Speech API