recursal/MDN huggingface dataset:
IMSC and other standards
========================

IMSC is the result of an international effort to bring together popular profiles of TTML, like EBU-TT-D and SMPTE-TT. This article provides an overview how IMSC is related to these other subtitle standards, and explains the differences between the versions of IMSC.

IMSC spec genealogy
-------------------

TTML Profiles for Internet Media Subtitles and Captions (or IMSC) is a constrained version of the Timed Text Markup Language for worldwide subtitles and captions family of specifications.

IMSC was designed to be a practical application of SMPTE-TT (SMPTE ST 2052-1), which is designated as a safe-harbor format by the FCC. As a result, most SMPTE-TT documents should render correctly using IMSC renderers (see the limitations), and the conversion guidelines from CTA 608/708 to SMPTE-TT (SMPTE RP 2052-10 and SMPTE RP 2052-11) are also applicable to IMSC.

IMSC is also a syntactic superset of both SDP-US and EBU-TT-D, such that documents that conform to either of these two formats are valid IMSC documents and can be rendered by IMSC renderers — see Compatibility with other TTML-based specifications for more details.

IMSC traces its origins to the CFF-TT format, and CFF-TT documents can be converted to IMSC relatively easily.

IMSC is unrelated to WebVTT, and does not use the same syntax. Basic conversion guidelines exist.

Active IMSC versions
--------------------

Two versions of IMSC are in use today:

* IMSC 1.0.1
* IMSC 1.1

IMSC 1.1 was designed such that valid IMSC 1.0.1 documents are valid IMSC 1.1 documents and will render as intended on an IMSC 1.1 renderer. It does however add important features on top of IMSC 1.0.1:

* Japanese text layout features such as ruby.
* Support for author-controlled luminance when compositing onto absolute luminance High-Dynamic Range video.
* Support for stereoscopic 3D.

**Note:** IMSC 1.1 also deprecates, but does not prohibit, a limited number features that have no practical use or for which better alternatives exist.

In summary, authors are encouraged to create IMSC 1.0.1 documents if possible and for maximal compatibility, and implementers are encouraged to implement support for IMSC 1.1 for worldwide coverage.

Summary
-------

This document gives you all you need to know about IMSC and its relationship with other specifications.
Subtitle placement in IMSC
==========================

IMSC allows for very explicit positioning of the text over the video content you are displaying it against. There are a few tricks and best practices that can be used in order to simplify the placement of the on-screen text.

Considering correct text placement
----------------------------------

Creating an IMSC document that has the proper text placement and flow is one of the most crucial things to get correct. Unlike some other subtitle formats, IMSC allows for very explicit placement of the text anywhere on the screen. With that said, the most common subtitle styles used today are bottom centered and top centered on the screen.

The <region> element
--------------------

The `<region>` element essentially creates a box on the screen for the text to appear inside. The on-screen text will never be displayed outside of this box. In addition to describing the size and position of the box in which the text can appear, the `<region>` element also defines the horizontal and vertical alignment of the text.

In the example below, we have defined two regions. Both region boxes are the same size, which is 80% of the image width and 80% of the image height. This box is centered on the screen.

The important items to consider here are:

* `tts:origin` — the upper left corner of the region box, specified as X Y coordinate values. This should be described in percentage values.
* `tts:extent` — describes how far to the right of the video the region box goes, then how far down.
* `tts:backgroundColor` — describes the color of the region box. This will most commonly be transparent, however you are welcome to fill it in with a color if that works for your design.
* `tts:showBackground` — should be set to `whenActive`. The other allowable value is `always`, which tells the IMSC decoder to display all region boxes with the value of `always` at the same time. This is very unlikely to be something you want to do.
* `tts:textAlign` — the horizontal text justification. Like a word processor, this can be set to `left`, `center`, or `right`. `center` is the most common text justification for subtitles.
* `tts:displayAlign` — the vertical alignment of the text. This can be set to `before`, `center`, or `after`. `before` means that the text will start from the very top of the region box, and flow downwards. `center` means the text will be vertically centered within the region box. After means that the text will start from the very bottom of the region box, and flow upwards.
Demos of open web technologies
==============================

Mozilla supports a wide variety of exciting open web technologies, and we encourage their use. This page offers links to interesting demonstrations of these technologies.

If you know of a good demonstration or application of open web technology, please add a link to the appropriate section here.

2D Graphics
-----------

### Canvas

* Blob Sallad: an interactive blob using JavaScript and canvas (code demos)
* miniPaint: Image editor (source code)
* Zen Photon Garden (source code)
* Multi touch in canvas demo (source code)
### SVG

* Bubblemenu (visual effects and interaction)
* Blobular (interactive)
* Summer HTML image map creator (source code)
### Video

* Video 3D Animation "mozilla constantly evolving"
* Video 3D Animation "Floating Dance"
* Video 3D Animation "The Gravel Institute: Monopoly
3D Graphics
-----------

### WebGL

* Web Audio Fireworks
* Aquarium
* Dynamic cubemap
* Kai 'Opua (source code)
### Virtual Reality

* The Polar Sea (source code)
* Sechelt fly-through (source code)
CSS
---

* CSS floating logo "mozilla"
* CSS Blockout
* Rubik's cube
* Loader with blend modes
* CSS-based single page application (source code)
### Transformations

* Impress.js (source code)
* Flickr Polaroid Stack
Games
-----

* IoQuake3 (source code)
* Kai 'Opua (source code)
Web APIs
--------

### Notifications API

* HTML Notifications (source code)
### Web Audio API

* Audio Context states demo
* Audio analyser - graphical visualization of an audio signal
* IIR filter node
* Multi track
* Stereo-panner-node
### File API

* Slide My Text - presentation from plain text files
### Web Workers

* Web Worker Fractals
* Photo editor
* Coral generator
* Raytracer
* Fibonacci
WebDriver
=========

WebDriver is a remote control interface that enables introspection and control of user agents. It provides a platform- and language-neutral wire protocol as a way for out-of-process programs to remotely instruct the behavior of web browsers.

To have the ability to write instruction sets that can be run interchangeably in many browsers on different platforms is critical to deliver a consistent experience to users. With the new wave of developments on the web platform, the increase diversity in devices and demands for real interoperability between the technologies, WebDriver provides tooling for cross-browser testing.

Provided is a set of interfaces to discover and manipulate DOM elements in web documents and to control the behavior of a user agent. It is primarily intended to allow web authors to write tests that automate a user agent from a separate controlling process, but may also be used in such a way as to allow in-browser scripts to control a — possibly separate — browser.

Usage
-----

So what does WebDriver let you do and what does it look like? Since WebDriver is programming language neutral, the answer to this question depends on which WebDriver client you're using and the choice of language.

But using a popular client written in Python, your interaction with WebDriver might look like this:


```python
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support.expected_conditions import presence_of_element_located

with webdriver.Firefox() as driver:

    driver.get("https://google.com/ncr")
    wait = WebDriverWait(driver, 10)
    driver.find_element(By.NAME, "q").send_keys("cheese" + Keys.RETURN)
    wait.until(presence_of_element_located((By.XPATH, '//\*[@id="rcnt"]')))
    results = driver.find_elements(By.XPATH, "//a[@href]")

    for i, elem in enumerate(results):
        print(f'#{i} {elem.text} ({elem.get\_attribute("href")})')
```


This might produce output akin to this:
```

#1 Cheese - Wikipedia (https://en.wikipedia.org/wiki/Cheese)
```

Reference
---------

### Commands

Commands

* Close Window
* Get Element Attribute
* Get Element Property
* Get Element Tag Name
* Get Timeouts
* Get Window Handles
* Get Window Rect
* New Window
* Set Timeouts
* Set Window Rect
### Types

Types

* Error object
* Timeouts object
* WebElement
* WebWindow
### Capabilities

Capabilities

* acceptInsecureCerts
* firefoxOptions
* webSocketUrl
### Errors

Errors

* Insecure certificate
* Invalid argument
* Invalid cookie domain
* Invalid selector
* Invalid session ID
* JavaScript error
* Script timeout
* Stale element reference
* Unknown command
* Unknown error
* Unknown method
Specifications
--------------

* WebDriver
See also
--------

* Cross browser testing
* Selenium documentation
XML: Extensible Markup Language
===============================

The **Extensible Markup Language** is a strict serialization of the Document Object Model.

Parsing and serializing XMLAt times, you may need to parse XML content and convert it into a DOM tree, or, conversely, serialize an existing DOM tree into XML. In this article, we'll look at the objects provided by the web platform to make the common tasks of serializing and parsing XML easy.

XML introductionXML (Extensible Markup Language) is a markup language similar to HTML, but without predefined tags to use. Instead, you define your own tags designed specifically for your needs. This is a powerful way to store data in a format that can be stored, searched, and shared. Most importantly, since the fundamental format of XML is standardized, if you share or transmit XML across systems or platforms, either locally or over the internet, the recipient can still parse the data due to the standardized XML syntax.
XSLT: Extensible Stylesheet Language Transformations
====================================================

**Extensible Stylesheet Language Transformations (XSLT)** is an XML-based language used, in conjunction with specialized processing software, for the transformation of XML documents.

Although the process is referred to as "transformation," the original document is not changed; rather, a new XML document is created based on the content of an existing document. Then, the new document may be serialized (output) by the processor in standard XML syntax or in another format, such as HTML or plain text.

XSLT is most often used to convert data between different XML schemas or to convert XML data into web pages or PDF documents.

Documentation
-------------

XSLT Element Reference

Reference.

Transforming XML with XSLT

XSLT allows a stylesheet author to transform a primary XML document in two significant ways: manipulating and sorting the content, including a wholesale reordering of it if so desired, and transforming the content into a different format.

Specifying parameters using processing instructions

Firefox allows stylesheet parameters to be specified when using the `<?xml-stylesheet?>` processing instruction. This is done using the `<?xslt-param?>` PI described in this document.

XSLT Tutorial

This W3Schools tutorial teaches the reader how to use XSLT to transform XML documents into other formats, like XHTML.

What is XSLT?

This extensive introduction to XSLT and XPath assumes no prior knowledge of the technologies and guides the reader through background, context, structure, concepts and introductory terminology.

Common XSLT Errors

This article lists some common problems using XSLT in Firefox.

Related Topics
--------------

* XML, XPath
EXSLT
=====

EXSLT is a set of extensions to XSLT. There are a number of modules; those that are supported by Firefox are listed below:

Common (exsl)The EXSLT Common package provides basic functions that expand upon the capabilities of XSLT. The namespace for the Common package is `http://exslt.org/common`.

Math (math)The EXSLT Math package provides functions for working with numeric values and comparing nodes. The namespace for the Math package is `http://exslt.org/math`.

Regular expressions (regexp)The EXSLT Regular Expressions package provides functions that allow testing, matching, and replacing text using JavaScript style regular expressions. The namespace for the Regular Expressions package is `http://exslt.org/regular-expressions`.

Sets (set)The EXSLT Sets package offers functions that let you perform set manipulation. The namespace for these functions is `http://exslt.org/sets`.

Strings (str)The EXSLT Strings package provides functions that allow the manipulation of strings. The namespace for the Strings package is `http://exslt.org/strings`.

EXSLT modules
-------------

To use an EXSLT function, you need to declare the namespace the function is in, and then use the appropriate prefix when calling the function. For example, to use the regular expressions package:


```xml
<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:regexp="http://exslt.org/regular-expressions">
  <xsl:template match="/">
    …
    <xsl:value-of select="regexp:replace(/root/@value, 'before', 'gi', 'AFTER')"/>
    …
  </xsl:template>

</xsl:stylesheet>
```

### Common

The EXSLT Common package provides basic functions that expand upon the capabilities of XSLT. The namespace for the Common package is `http://exslt.org/common`.

#### Functions

* `exsl:node-set()`
* `exsl:object-type()`
### Math

The EXSLT Math package provides functions for working with numeric values and comparing nodes. The namespace for the Math package is `http://exslt.org/math`.

#### Functions

* `math:highest()`
* `math:lowest()`
* `math:max()`
* `math:min()`
### Regular expressions

The EXSLT Regular Expressions package provides functions that allow testing, matching, and replacing text using JavaScript style regular expressions.

The EXSLT Regular Expressions namespace is `http://exslt.org/regular-expressions`.

#### Functions

* `regexp:match()`
* `regexp:replace()`
* `regexp:test()`
### Sets

The EXSLT Sets package offers functions that let you perform set manipulation. The namespace for these functions is `http://exslt.org/sets`.

#### Functions

* `set:difference()`
* `set:distinct()`
* `set:intersection()`
* `set:has-same-node()`
* `set:leading()`
* `set:trailing()`
### Strings

The EXSLT Strings package provides functions that allow the manipulation of strings. The namespace for the Strings package is `http://exslt.org/strings`.

#### Functions

* `str:concat()`
* `str:split()`
* `str:tokenize()`
See also
--------

* EXSLT website
XPath
=====

XPath stands for XML Path Language. It uses a non-XML syntax to provide a flexible way of addressing (pointing to) different parts of an XML document. It can also be used to test addressed nodes within a document to determine whether they match a pattern or not.

XPath is mainly used in XSLT, but can also be used as a much more powerful way of navigating through the DOM of any XML-like language document using `XPathExpression`, such as HTML and SVG, instead of relying on the `Document.getElementById()` or `Document.querySelectorAll()` methods, the `Node.childNodes` properties, and other DOM Core features.

XPath uses a path notation (as in URLs) for navigating through the hierarchical structure of an XML document. It uses a non-XML syntax so that it can be used in URIs and XML attribute values.

**Note:** Support for XPath varies widely; it's supported reasonably well in Firefox (although there are no plans to improve support further), while other browsers implement it to a lesser extent, if at all. If you need a polyfill, you may consider js-xpath or wicked-good-xpath.

Documentation
-------------

Introduction to using XPath in JavaScript

Describes a non-XSLT use of XPath.

XPath:Axes

List and definition of the axes defined in the XPath specification. Axes are used to describe the relationships between nodes.

XPath:Functions

List and description of the core XPath functions and XSLT-specific additions to XPath.

Transforming XML with XSLT

XSLT uses XPath to address code segments in an XML document that it wishes to transform.

XPath snippets

These are JavaScript utility functions, that can be used in your own code, based on DOM Level 3 XPath APIs.

What is XSLT?

This extensive introduction to XSLT and XPath assumes no prior knowledge of the technologies, and guides the reader through background, context, structure, concepts, and introductory terminology.

Tools
-----

XPath tester

An online XPath Builder/Debugger.

Related Topics
--------------

* XSLT, XML, DOM
* Comparison of CSS Selectors and XPath
MathML
======

**Mathematical Markup Language (MathML)** is an XML-based language for describing mathematical notation.

MathML was originally designed as a general-purpose specification for browsers, office suites, computer algebra systems, EPUB readers, LaTeX-based generators. However, this approach was not very adapted to the Web: the subset focusing on semantics has never been implemented in browsers while the subset focusing on math layout led to incomplete and inconsistent browser implementations.

MathML Core is a subset with increased implementation details based on rules from LaTeX and the Open Font Format. It is tailored for browsers and designed specifically to work well with other web standards including HTML, CSS, DOM, JavaScript.

Below you will find links to documentation, examples, and tools to work with MathML. MDN uses MathML Core as a reference specification but, due to an erratic standardization history, legacy MathML features may still show up in existing implementations and web content.

**Note:** It is highly recommended that developers and authors switch to MathML Core, perhaps relying on other web technologies to cover missing use cases. The Math WG is maintaining a set of MathML polyfills to facilitate that transition.

MathML reference
----------------

MathML element reference

Details about each MathML element and compatibility information for desktop and mobile browsers.

MathML attribute reference

Information about MathML attributes that modify the appearance or behavior of elements.

MathML examples

MathML samples and examples to help you understand how it works.

Authoring MathML

Suggestions and tips for writing MathML, including suggested MathML editors and how to integrate their output into Web content.

MathML tutorial

A gentle introduction to MathML.

Getting help from the community
-------------------------------

* W3C Math Home
* Raise issues on GitHub w3c/mathml repository
* www-math w3.org mail archive
Tools
-----

* W3C Validator
* W3C's wiki page
Related topics
--------------

* CSS
* HTML
* SVG
Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVG: Scalable Vector Graphics
=============================

Getting Started with SVG
------------------------

**Scalable Vector Graphics (SVG)** is an XML-based markup language for describing two-dimensional based vector graphics.

As such, it's a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including CSS, DOM, JavaScript, and SMIL. SVG is, essentially, to graphics what HTML is to text.

SVG images and their related behaviors are defined in XML text files, which means they can be searched, indexed, scripted, and compressed. Additionally, this means they can be created and edited with any text editor or with drawing software.

Compared to classic bitmapped image formats such as JPEG or PNG, SVG-format vector images can be rendered at any size without loss of quality and can be easily localized by updating the text within them, without the need of a graphical editor to do so. With proper libraries, SVG files can even be localized on-the-fly.

SVG has been developed by the World Wide Web Consortium (W3C) since 1999.

See also, SVG Tutorial.

Documentation
-------------

SVG element reference

Details about each SVG element.

SVG attribute reference

Details about each SVG attribute.

SVG DOM interface reference

Details about the SVG DOM API, for interaction with JavaScript.

Applying SVG effects to HTML content

SVG works together with HTML, CSS and JavaScript.

Tools
-----

* SVG Test Suite
* Markup Validator
Examples
--------

* SVG authoring guidelines
* SVG as an image
* SVG animation with SMIL
* SVG art gallery
* D3 (JavaScript library for visualizing data with HTML, SVG, and CSS)
shortcuts
=========

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

|  |  |
| --- | --- |
| Type | `Array` |

The `shortcuts` member defines an array of shortcuts or links to key tasks or pages within a web app. A user agent can use these values to assemble a context menu to be displayed by the operating system when a user engages with the web app's icon. When user invokes a shortcut, the user agent will navigate to the address given by shortcut's `url` member.

Shortcut item values
--------------------

Shortcut objects may contain the following values (only `name` and `url` are required):

| Member | Description |
| --- | --- |
| `name` | A string that can be displayed to the user in a context menu. |
| `short_name` | 
 A string that can be displayed where there is insufficient space to
 display the full name of the shortcut.
  |
| `description` | 
 A string that describes the purpose of the shortcut. It may be exposed
 to assistive technology.
  |
| `url` | A URL within the application that opens when the shortcut is activated. |
| `icons` | 
 A set of icons that represent the shortcut. They can be used, e.g., in
 the context menu. When included, the icon set must include a 96x96 pixel
 icon.
  |

Examples
--------

The following is a list of shortcuts a calendar app might have:


```json
"shortcuts" : [
  {
    "name": "Today's agenda",
    "url": "/today",
    "description": "List of events planned for today"
  },
  {
    "name": "New event",
    "url": "/create/event"
  },
  {
    "name": "New reminder",
    "url": "/create/reminder"
  }
]
```

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

| Specification |
| --- |
| Web Application Manifest # shortcuts-member |

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

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

See also
--------

* Creating shortcut action menus for PWAs