recursal/MDN huggingface dataset:
VTTCue: positionAlign property
==============================

The **`positionAlign`** property of the `VTTCue` interface is used to determine what `VTTCue.position` is anchored to.

Value
-----

A string containing one of the following values:

`"line-left"`

Line-left alignment.

`"center"`

Center alignment.

`"line-right"`

Line-right alignment.

`"auto"`

Automatic alignment, which depends on the text alignment of the cue, interpreted as follows:

* **line-left:** if the text alignment is left, the cue is using a LTR language and the text alignment is start, or the cue is using a RTL language and the text alignment is end.
* **line-right:** if the text alignment is right, the cue is using a RTL language and the text alignment is start, or the cue is using a LTR language and the text-alignment is end.
* **center:** if there is no text alignment position set.

Examples
--------

In the following example a new `VTTCue` is created, then the value of `positionAlign` is set to `"line-right"`. The value is then printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.positionAlign = "line-right";
console.log(cue1.positionAlign);

track.addCue(cue1);
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-positionalign |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VTTCue: text property
=====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
The **`text`** property of the `VTTCue` interface represents the text contents of the cue.

Value
-----

A string containing the raw text of the cue.

Examples
--------

In the following example a new `VTTCue` is created, then the value of `size` is set to the string `"new cue value"`. The value is then printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.text = "new cue value";
console.log(cue1.text); // 'new cue value';

track.addCue(cue1);
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-text |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VTTCue: lineAlign property
==========================

The **`lineAlign`** property of the `VTTCue` interface represents the alignment of this VTT cue.

Value
-----

A string containing one of the following values:

`"start"`

Start alignment.

`"center"`

Center alignment.

`"end"`

End alignment.

Examples
--------

In the following example a new `VTTCue` is created, then the value of `lineAlign` is set to `"center"`. The value is then printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.lineAlign = "center";
console.log(cue1.lineAlign);

track.addCue(cue1);
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-linealign |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VTTCue: size property
=====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
The **`size`** property of the `VTTCue` interface represents the size of the cue as a percentage of the video size.

Value
-----

A number representing the size of the cue as a percentage of the video size.

Examples
--------

In the following example a new `VTTCue` is created, then the value of `size` is set to `50`. The value is then printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.size = 50;
console.log(cue1.size);

track.addCue(cue1);
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-size |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVGStyleElement: media property
===============================

The **`SVGStyleElement.media`** property is a media query string corresponding to the `media` attribute of the given SVG style element.

The query must be matched for the style to apply.

Value
-----

 A string defining a valid media query list with one or more comma separated values.
 For example `"screen, print"`, or `"all"` (the default).

The value is initialized with the string specified in the corresponding style's `media` attribute.

Examples
--------

This example demonstrates programmatically getting and setting the media property on a style that was defined in an SVG definition.

### HTML

 The HTML contains an SVG definition for a `<circle>` with a `<style>` element that is conditional on the media query `"all and (min-width: 600px)"`.
 We also define a `button` that will be used to display the current style and change the style.


```html
<button></button>
<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="60" cy="60" r="50" />
</svg>
```

### JavaScript

The code below gets the `style` element (an `SVGStyleElement`) using its id.


```js
const svg = document.querySelector("svg");
// Create the `style` element in the SVG namespace
const style = document.createElementNS("http://www.w3.org/2000/svg", "style");
const node = document.createTextNode("circle { fill: red; }");
svg.appendChild(style);
style.appendChild(node);
```


 We then add a function to set the button text to show the current value of the style's `media` property along with the current window width.
 This function is called to set the initial button text, and also when the window is resized or the button is pressed.
 The button event handler also sets the value of the style's `media` property.


```js
const button = document.querySelector("button");

function setButtonText() {
  button.textContent = `Media: ${style.media} (Width: ${window.innerWidth})`;
}
setButtonText();

addEventListener("resize", () => {
  setButtonText();
});

button.addEventListener("click", () => {
  style.media = "all and (min-width: 700px)";
  setButtonText();
});
```

### Result

 The result is shown below.
 The button text shows the value of the media attribute originally applied to the SVG style along with the width of the current frame (since the code is run in a frame).
 Shrink the width of the frame to the media query width shown in the button to watch the style being applied.
 Press the button to toggle the value of the `media` property on the style (which will be reflected on the button).

**Note:** The `media` property may be set to any string, but will be ignored if the string is not a valid media query.

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGStyleElement\_\_media |

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

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

See also
--------

* `HTMLStyleElement.media`
SVGStyleElement: title property
===============================

 The **`SVGStyleElement.title`** property is a string corresponding to the `title` attribute of the given SVG style element.
 It may be used to select between alternate style sheets.

Value
-----

A string with any value.

The value is initialized with the string specified in the corresponding style's `title` attribute.

Examples
--------

This example demonstrates programmatically getting and setting the `title` property on a style that was defined in an SVG definition.

### HTML

 The HTML contains an SVG definition for a `<circle>` with a `<style>` element that has a `title`.
 We also define a text area for logging the current title.


```html
<textarea id="log" rows="3" cols="50"></textarea>
<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <style title="gold fill style">
 circle {
 fill: gold;
 }
 </style>
  <circle cx="50" cy="40" r="25" />
</svg>
```

### JavaScript

The code below gets the `style` element (an `SVGStyleElement`) using its tag name, logs the title, then changes and logs the title again.


```js
const log = document.getElementById("log");

const svg = document.querySelector("svg");
const style = svg.querySelector("style");
log.value = `Initial title: ${style.title}\n`;
style.title = "Altered Title";
log.value += `New title: ${style.title}`;
```

### Result

The text in the log below shows that the title initially reflects the matching attribute on the `<style>` element, but can then be changed to another value.

 Note that alternate styles are not applied by default; they must be selected as the preferred stylesheet by the user.
 To apply the alternate stylesheets on Firefox:

1. Open the Menu Bar (Press `F10` or tap the `Alt` key)
2. Open **View > Page Style** submenu
3. Select the stylesheets based on their names.
Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGStyleElement\_\_title |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVGStyleElement: sheet property
===============================

The **`SVGStyleElement.sheet`** read-only property returns the `CSSStyleSheet` corresponding to the given SVG style element, or `null` if there is none.

Value
-----

A `CSSStyleSheet`, or `null` if the element has no associated style sheet.

Examples
--------

This example demonstrates how to get the CSS sheet associated with an element.

### HTML

The HTML contains an SVG definition for a `<circle>`.


```html
<textarea id="log" rows="3" cols="50"></textarea>
<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="50" cy="50" r="25" />
</svg>
```

### JavaScript

The code below creates a `style` element (an `SVGStyleElement`) and adds it to the SVG.


```js
const svg = document.querySelector("svg");
// Create the `style` element in the SVG namespace
const style = document.createElementNS("http://www.w3.org/2000/svg", "style");
const node = document.createTextNode("circle { fill: red; }");
svg.appendChild(style);
style.appendChild(node);
```


 The code below then logs the sheet and CSS rule associated with this new element, using `style.sheet`.
 To make


```js
// Log the sheet associated with this new element.
const log = document.getElementById("log");
log.value = `${style.sheet} with rules[0].cssText:\n ${style.sheet.rules[0].cssText}`;
```

### Result

 The result is shown below.
 On success, the log shows the `CSSStyleSheet` object applied to the SVG circle.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-linkstyle-sheet |

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

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

See also
--------

* `HTMLStyleElement.sheet`
SVGStyleElement: type property
==============================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

 The **`SVGStyleElement.type`** property returns the type of the current style.
 The value reflects the associated SVG `<style>` element's `type` attribute.

Authors should not use this property or rely on the value.

Value
-----

The permitted values are an empty string or a case-insensitive match for "text/css".

Exceptions
----------

 SVG 1.1 defined that a `DOMException` is raised with code `NO_MODIFICATION_ALLOWED_ERR` on an attempt to change the value of a read-only attribute.
 This restriction was removed in SVG 2.

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGStyleElement\_\_type |

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

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

See also
--------

* `HTMLStyleElement.type`
ClipboardItem: types property
=============================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The read-only **`types`** property of the `ClipboardItem` interface returns an `Array` of MIME types available within the `ClipboardItem`

Value
-----

An `Array` of available MIME types.

Examples
--------

 In the below example, we're returning all items on the clipboard via the `Clipboard.read()` method.
 Then checking the `types` property for available types before utilizing the `ClipboardItem.getType()` method to return the `Blob` object. If no clipboards contents is found for the specified type, an error is returned.


```js
async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();

    for (const clipboardItem of clipboardItems) {
      for (const type of clipboardItem.types) {
        const blob = await clipboardItem.getType(type);
        // we can now use blob here
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

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

| Specification |
| --- |
| Clipboard API and events # dom-clipboarditem-types |

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

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

See also
--------

* Clipboard API
* Image support for Async Clipboard article
ClipboardItem: presentationStyle property
=========================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The read-only **`presentationStyle`** property of the `ClipboardItem` interface returns a string indicating how an item should be presented.

For example, in some contexts an image might be displayed inline, while in others it might be represented as an attachment.

Value
-----

One of either `"unspecified"`, `"inline"` or `"attachment"`.

Examples
--------

In the below example, we're returning all items on the clipboard via the `clipboard.read()` method, then logging the `presentationStyle` property.


```js
async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();

    for (const clipboardItem of clipboardItems) {
      console.log(clipboardItem.presentationStyle);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

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

| Specification |
| --- |
| Clipboard API and events # dom-clipboarditem-presentationstyle |

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

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

See also
--------

* Clipboard API
* Image support for Async Clipboard article
ClipboardItem: ClipboardItem() constructor
==========================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`ClipboardItem()`** constructor creates a new `ClipboardItem` object, which represents data to be stored or retrieved via the Clipboard API `clipboard.write()` and `clipboard.read()` methods, respectively.

**Note:** Image format support varies by browser. See the browser compatibility table for the `Clipboard` interface.

Syntax
------


```js
new ClipboardItem(data)
new ClipboardItem(data, options)
```

### Parameters

`data`

 An `Object` with the MIME type as the key and data as the value.
 The data can be represented as a `Blob`, a `String` or a `Promise` which resolves to either a blob or string.


`options` Optional

An object with the following properties:

`presentationStyle` Optional

 One of the three strings: `unspecified`, `inline` or `attachment`.
 The default is `unspecified`.



**Note:** You can also work with text via the `Clipboard.readText()` and `Clipboard.writeText()` methods of the `Clipboard` interface.

Examples
--------

 The below example requests a PNG image using the `Fetch API`, and in turn, the `responses' blob()` method, to create a new `ClipboardItem`.
 This item is then written to the clipboard, using the `Clipboard.write()` method.

**Note:** You can only pass in one clipboard item at a time.


```js
async function writeClipImg() {
  try {
    const imgURL = "/myimage.png";
    const data = await fetch(imgURL);
    const blob = await data.blob();

    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
    console.log("Fetched image copied.");
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

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

| Specification |
| --- |
| Clipboard API and events # dom-clipboarditem-clipboarditem |

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

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

See also
--------

* Clipboard API
* Image support for Async Clipboard article
ClipboardItem: getType() method
===============================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`getType()`** method of the `ClipboardItem` interface returns a `Promise` that resolves with a `Blob` of the requested MIME type or an error if the MIME type is not found.

Syntax
------


```js
getType(type)
```

### Parameters

`type`

A valid MIME type.

### Return value

A `Promise` that resolves with a `Blob` object.

### Exceptions

`NotFoundError` `DOMException`

The `type` does not match a known MIME type.

`TypeError`

No parameter is specified or the `type` is not that of the `ClipboardItem`.

Examples
--------

 In the following example, we're returning all items on the clipboard via the `clipboard.read()` method.
 Then utilizing the `ClipboardItem.types` property to set the `getType()` argument and return the corresponding blob object.


```js
async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();

    for (const clipboardItem of clipboardItems) {
      for (const type of clipboardItem.types) {
        const blob = await clipboardItem.getType(type);
        // we can now use blob here
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

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

| Specification |
| --- |
| Clipboard API and events # dom-clipboarditem-gettype |

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

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

See also
--------

* Clipboard API
* Image support for Async Clipboard article
Ink: requestPresenter() method
==============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`requestPresenter()`** method of the `Ink` interface returns a `Promise` that fulfills with an `InkPresenter` object to handle rendering strokes.

Syntax
------


```js
requestPresenter(param)
```

### Parameters

`param` Optional

An `InkPresenterParam` object that contains the following property:

`presentationArea` Optional

An `Element` inside which rendering of ink strokes is confined (the element's border box, to be precise). If `param` is not included, or `presentationArea` is set to `null`, ink rendering is confined to the containing viewport by default.


### Return value

A `Promise` that resolves to an `InkPresenter` object instance.

### Exceptions

`Error` `DOMException`

An error is thrown and the operation is aborted if `presentationArea` is not a valid `Element`, or is not in the same document as the associated `Ink` object.

Example
-------


```js
async function inkInit() {
  const ink = navigator.ink;
  let presenter = await ink.requestPresenter({ presentationArea: canvas });

  //...
}
```

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

| Specification |
| --- |
| Ink API # dom-ink-requestpresenter |

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

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

See also
--------

* Enhancing Inking on the Web
OfflineAudioCompletionEvent: OfflineAudioCompletionEvent() constructor
======================================================================

 The **`OfflineAudioCompletionEvent()`** constructor of the Web Audio API creates a new
 `OfflineAudioCompletionEvent` object.


**Note:** You wouldn't generally use the constructor manually.
 `OfflineAudioCompletionEvent` events are dispatched to
 `OfflineAudioContext` instances for legacy reasons.


Syntax
------


```js
new OfflineAudioCompletionEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `complete`.


`options`

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`renderedBuffer`

The rendered `AudioBuffer` containing the audio data.


### Return value

A new `OfflineAudioCompletionEvent` object.

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

| Specification |
| --- |
| Web Audio API # dom-offlineaudiocompletionevent-offlineaudiocompletionevent |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
OfflineAudioCompletionEvent: renderedBuffer property
====================================================

 The **`renderedBuffer`** read-only property of the
 `OfflineAudioCompletionEvent` interface is an `AudioBuffer`
 containing the result of processing an `OfflineAudioContext`.

Value
-----

An `AudioBuffer`.

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

| Specification |
| --- |
| Web Audio API # dom-offlineaudiocompletionevent-renderedbuffer |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TouchList: length property
==========================

 The **`length`** read-only property indicates the number of
 items (touch points) in a given `TouchList`.

Value
-----

The number of touch points in `touchList`.

Examples
--------

 This code example illustrates the use of the `TouchList` interface's
 `item` method and the
 `length` property.


```js
const target = document.getElementById("target");

target.addEventListener(
  "touchstart",
  (ev) => {
    // If this touchstart event started on element target,
    // set touch to the first item in the targetTouches list;
    // otherwise set touch to the first item in the touches list
    const touch =
      ev.targetTouches.length >= 1
        ? ev.targetTouches.item(0)
        : ev.touches.item(0);
  },
  false,
);
```

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

| Specification |
| --- |
| Touch Events # dom-touchlist-length |

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

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