WebVTT: Web動画テキストトラック形式

W3C 勧告候補草案,

この文書の詳細情報
このバージョン:
https://www.w3.org/TR/2026/CRD-webvtt1-20260520/
最新公開バージョン:
https://www.w3.org/TR/webvtt1/
編集者草案:
https://w3c.github.io/webvtt/
以前のバージョン:
履歴:
https://www.w3.org/standards/history/webvtt1/
実装報告:
https://www.w3.org/wiki/TimedText/WebVTT_Implementation_Report
テストスイート:
https://github.com/web-platform-tests/wpt/tree/master/webvtt
フィードバック:
GitHub
編集者:
(招聘 専門家)
元編集者:
(NICTA CSIRO)
(Opera Software AS)
(Opera Software ASA)
(Google)
参加:
GitHub w3c/webvtt (新しい課題, 未解決の課題, 従来の 未解決バグ)
コミット:
GitHub w3c/webvtt/commits
@webvtt

Copyright © 2026 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.

概要

この仕様は、Web動画テキストトラック形式である WebVTT を定義する。その主な用途は、HTML <track> 要素に関連して外部 テキストトラックリソースをマークアップすることである。 WebVTT ファイルは、動画コンテンツのキャプションまたは字幕を提供し、さらにテキスト動画説明 [MAUR]、 コンテンツナビゲーションのためのチャプター、およびより一般には音声または 動画コンテンツに時間的に整列された任意の形式のメタデータを提供する。

この文書の状態

この節は、この文書の公開時点における状態を説明する。 現在の W3C 公開文書の一覧およびこの技術報告書の最新版は、 W3C 標準および草案索引で確認できる。

この文書は、W3C Timed Text Working Group により、 勧告トラックを用いて 勧告候補草案として公開された。 この文書は W3C 勧告となることを意図している。

この文書に関してコメントしたい場合は、メールの件名の先頭に [webvtt1] を付けて、public-tt@w3.org (購読, アーカイブ) まで送信してほしい。 すべてのコメントを歓迎する。

勧告候補としての公開は、W3C およびそのメンバーによる承認を意味しない。 勧告候補草案は、Working Group が後続の勧告候補スナップショットに 含めることを意図している、前回の勧告候補からの変更を統合する。 これは草案文書であり、いつでも他の文書により更新、置換、または廃止される可能性がある。 この文書を作業中のもの以外として引用することは不適切である。

この仕様が CR 段階を終了するには、 各規範的機能が Timed Text Working Group の 憲章 に定められた要件を満たし、十分な 実装 経験を示すことが期待され、 実装報告に記録される必要がある。 Working Group は実装が公開されていることを必須とはしないが、公開することを推奨する。

この文書は、W3C 特許ポリシーの下で運営されるグループによって作成された。 W3C は、そのグループの成果物に関連して行われた 特許開示の公開一覧を維持しており、 そのページには特許を開示するための手順も含まれる。 ある個人が、必須クレームを 含むとその個人が信じる特許について実際の知識を有する場合、その情報を W3C 特許ポリシー第6節に従って 開示しなければならない。

この文書は、2025年8月18日版 W3C プロセス文書に準拠する。

WebVTT 最初の公開作業草案の公開以降、 このバージョンに適用されたすべての変更の累積概要は、 FPWD WebVTT からの変更で入手できる。

1. 序論

この節は非規範的である。

WebVTT（Web Video Text Tracks）形式は、HTML <track> 要素に関連する外部テキスト トラックリソースをマークアップすることを目的としている。

WebVTT ファイルは、動画コンテンツのキャプションまたは字幕を提供し、さらにテキスト動画説明 [MAUR]、 コンテンツナビゲーションのためのチャプター、およびより一般には、音声または動画コンテンツと 時間的に整列された任意の形式のメタデータを提供する。

この仕様の現在のバージョンの大部分は、キャプション付けまたは字幕付けに WebVTT ファイルを使用する方法の説明に充てられている。この段階では、チャプターおよび 時間整列メタデータについての情報は最小限であり、動画説明については何もない。

この節では、導入としていくつかの WebVTT ファイルの例を示す。

1.1. 単純なキャプションファイル

この節は非規範的である。

WebVTT ファイルの主な用途は、動画コンテンツのキャプション付けまたは字幕付けである。 次は、インタビューにキャプションを付けるサンプルファイルである:

WEBVTT

00:11.000 --> 00:13.000
<v Roger Bingham>We are in New York City

00:13.000 --> 00:16.000
<v Roger Bingham>We're actually at the Lucern Hotel, just down the street

00:16.000 --> 00:18.000
<v Roger Bingham>from the American Museum of Natural History

00:18.000 --> 00:20.000
<v Roger Bingham>And with me is Neil deGrasse Tyson

00:20.000 --> 00:22.000
<v Roger Bingham>Astrophysicist, Director of the Hayden Planetarium

00:22.000 --> 00:24.000
<v Roger Bingham>at the AMNH.

00:24.000 --> 00:26.000
<v Roger Bingham>Thank you for walking down here.

00:27.000 --> 00:30.000
<v Roger Bingham>And I want to do a follow-up on the last conversation we did.

00:30.000 --> 00:31.500 align:right size:50%
<v Roger Bingham>When we e-mailed—

00:30.500 --> 00:32.500 align:left size:50%
<v Neil deGrasse Tyson>Didn't we talk about enough in that conversation?

00:32.000 --> 00:35.500 align:right size:50%
<v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos

00:32.500 --> 00:33.500 align:left size:50%
<v Neil deGrasse Tyson><i>Laughs</i>

00:35.500 --> 00:38.000
<v Roger Bingham>You know I'm so excited my glasses are falling off here.

WebVTT ファイルは一般に、キュー（定義）と呼ばれる、時間間隔に関連付けられたテキストセグメントの列から 構成されることがわかる。キャプション付けおよび字幕付けに加えて、 WebVTT は、通常キュー内で名前値ペアを配信するために用いられる時間整列メタデータにも使用できる。 WebVTT はチャプターの配信にも使用でき、これは音声/動画ファイルの周辺で文脈に応じたナビゲーションを助ける。 最後に、WebVTT はテキスト動画説明の配信にも使用できる。これは、時間間隔の視覚的内容を説明するテキストであり、 視覚障害のあるユーザーが文脈を理解できるように音声へ合成できる。

このバージョンの WebVTT は、キャプション付けおよび字幕付けのユースケースを解決することに重点を置く。 他のユースケースについては、さらなる仕様作業が可能である。 WebVTT ファイルがどの種類のユースケースに使用されるかは、そのファイルを使用するソフトウェアによって決定される。 たとえば、HTML ファイルで <track> 要素を通じて使用される場合、kind 属性が WebVTT ファイルをどのように解釈するかを定義する。

以下の小節では、特にキャプション付けおよび字幕付けに使用する場合の、WebVTT ファイル 形式の主要機能のいくつかについて概要を示す。

1.2. 複数行を持つキャプションキュー

この節は非規範的である。

キュー内の改行は尊重される。ユーザーエージェントは、キューをその幅に収める必要がある場合、 追加の改行も挿入する。したがって一般に、行区切りが明らかに必要である場合を除き、 作者はキューをすべて 1 行で書くことが推奨される。

公共サービス告知動画のこれらのキャプションは、行分割を示している:

WEBVTT

00:01.000 --> 00:04.000
Never drink liquid nitrogen.

00:05.000 --> 00:09.000
— It will perforate your stomach.
— You could die.

00:10.000 --> 00:14.000
The Organisation for Sample Public Service Announcements accepts no liability for the content of this advertisement, or for the consequences of any actions taken on the basis of the information provided.

最初のキューは単純であり、おそらく 1 行で表示される。2 つ目は、各話者につき 1 行ずつ、 2 行になる。3 つ目は、動画の幅に収まるように折り返され、おそらく複数行になる。 たとえば、3 つのキューは次のように見える可能性がある:

Never drink liquid nitrogen.

        — It will perforate your stomach.
                — You could die.

    The Organisation for Sample Public Service
    Announcements accepts no liability for the
    content of this advertisement, or for the
     consequences of any actions taken on the
        basis of the information provided.

キューの幅が小さい場合、次の例のように、最初の 2 つのキューも折り返される可能性がある。 ただし、2 つ目のキューの明示的な改行は依然として尊重されることに注意:

Never drink
    liquid nitrogen.

  — It will perforate
      your stomach.
    — You could die.

  The Organisation for
  Sample Public Service
  Announcements accepts
  no liability for the
     content of this
  advertisement, or for
   the consequences of
  any actions taken on
    the basis of the
  information provided.

また、行の長さが均衡を保つように折り返しが行われることにも注意。

1.3. キャプションのスタイル付け

この節は非規範的である。

video 要素を含む HTML ページに適用される CSS スタイルシートは、::cue、::cue()、::cue-region および ::cue-region() 疑似要素を使用して、動画内の WebVTT キューおよび領域を対象にできる。

この例では、HTML ページは style 要素内に CSS スタイルシートを持ち、 そのスタイルシートは動画内のすべてのキューをグラデーション背景およびテキスト色でスタイル付けし、 さらに動画内のキューに含まれるすべての WebVTT Bold Objects のテキスト色を変更する。

<!doctype html>
<html>
 <head>
  <title>Styling WebVTT cues</title>
  <style>
   video::cue {
     background-image: linear-gradient(to bottom, dimgray, lightgray);
     color: papayawhip;
   }
   video::cue(b) {
     color: peachpuff;
   }
  </style>
 </head>
 <body>
  <video controls autoplay src="video.webm">
   <track default src="track.vtt">
  </video>
 </body>
</html>

CSS スタイルシートは WebVTT ファイル自体に埋め込むこともできる。

スタイルブロックは、任意のヘッダーの後、最初のキューの前に配置され、 "STYLE" という行で始まる。コメントブロックはスタイルブロックと交互に配置できる。

空行はスタイルシート内に現れてはならない。削除するか、スペースまたは CSS コメント（例: /**/）で埋めることができる。

文字列 "-->" はスタイルシート内で使用できない。スタイルシートが "<!--" および "-->" で囲まれている場合、それらの文字列は単に削除できる。 CSS 文字列内に "-->" が現れる場合は、たとえば "--\>" のように CSS エスケープを使用できる。

この例は、WebVTT においてスタイルブロックでキューをどのようにスタイル付けできるかを示す。

WEBVTT

STYLE
::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}
/* Style blocks cannot use blank lines nor "dash dash greater than" */

NOTE comment blocks can be used between style blocks.

STYLE
::cue(b) {
  color: peachpuff;
}

hello
00:00:00.000 --> 00:00:10.000
Hello <b>world</b>.

NOTE style blocks cannot appear after the first cue.

1.4. その他のキャプションおよび字幕機能

この節は非規範的である。

WebVTT は、あまり使用されない機能もいくつかサポートする。

この例では、キューに識別子がある:

WEBVTT

test
00:00.000 --> 00:02.000
This is a test.

123
00:00.000 --> 00:02.000
That's an, an, that's an L!

crédit de transcription
00:04.000 --> 00:05.000
Transcrit par Célestes™

これにより、スタイルシートはキューを特定して対象にできる。

/* style for cue: test */
::cue(#test) { color: lime; }

CSS の構文規則により、一部の文字は CSS 文字エスケープシーケンスでエスケープする必要がある。 たとえば、数字 0-9 で始まる ID はエスケープする必要がある。ID 123 は "\31 23" と表せる（31 は "1" の Unicode 符号位置を指す）。 CSS エスケープの詳細については、 Using character escapes in markup and CSS を参照。 

/* style for cue: 123 */
::cue(#\31 23) { color: lime; }
/* style for cue: crédit de transcription */
::cue(#crédit\ de\ transcription) { color: red; }

この例は、要素でクラスを使用する方法を示す。これはローカライズや スタイル付けの保守性に役立つ場合があり、キューテキスト内で言語の変更を示す方法も示している。

WEBVTT

04:02.500 --> 04:05.000
J'ai commencé le basket à l'âge de 13, 14 ans

04:05.001 --> 04:07.800
Sur les <i.foreignphrase><lang en>playground</lang></i>, ici à Montpellier

この例では、各キューが voice span を使用して誰が話しているかを示している。 最初のキューでは、話者を指定する span に "first" と "loud" の 2 つのクラスも注釈されている。 3 つ目のキューには、（特定の話者に関連付けられていない）イタリック体のテキストもある。 最後のキューには "loud" クラスのみが注釈されている。

WEBVTT

00:00.000 --> 00:02.000
<v.first.loud Esme>It's a blue apple tree!

00:02.000 --> 00:04.000
<v Mary>No way!

00:04.000 --> 00:06.000
<v Esme>Hee!</v> <i>laughter</i>

00:06.000 --> 00:08.000
<v.loud Mary>That's awesome!

特別な例外として、voice span がキューテキスト全体を覆う場合は、 閉じる必要がないことに注意。

スタイルシートはこれらの span をスタイル付けできる:

::cue(v[voice="Esme"]) { color: cyan }
::cue(v[voice="Mary"]) { color: lime }
::cue(i) { font-style: italic }
::cue(.loud) { font-size: 2em }

この例は、動画ビューポート内の明示的な位置にキューを配置する方法を示す。

WEBVTT

00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
Where did he go?

00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
I think he went down this lane.

00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
What are you waiting for?

これらの例のキューは水平であるため、"position" 設定は動画ビューポートの幅の割合を指す。 テキストが縦書きである場合、"position" 設定は動画ビューポートの高さを指す。

"line-left" または "line-right" は、キューの水平方向または垂直方向に依存しない形で、 "position" 設定が適用されるボックスの物理的な側だけを指す。 それはボックス内のテキスト自体の方向または位置に影響せず、関係もしない。

キューは動画ビューポートの幅の 35% だけを覆う。これは 3 つすべてのキューについての キュー ボックスの "size" である。

最初のキューの キュー ボックスは 10% の位置に配置されている。 "position" 設定内の "line-left" および "line-right" は、位置が キュー ボックスのどちら側を 指すかを示す。この場合、テキストは水平であるため、 "line-left" はボックスの左側を指し、したがってキューボックスは動画ビューポートの幅の 10% から 45% の位置に配置され、おそらく動画画像の左側にいる話者の下に表示される。 キューが縦書きであった場合、"line-left" 配置は動画ビューポートの高さの上端から行われ、 キューボックスは動画 ビューポートの高さの 35% を覆う。

最初のキューのキューボックス内のテキストは、"align" キュー設定を使用して整列される。 左から右へ描画されるテキストでは、"start" 整列はそのボックスの左側であり、 右から左へ描画されるテキストではボックスの右側である。したがって、テキストの方向性に依存せず、 それはその話者の下に留まる。翻訳の結果としてテキストの基本方向が 左から右から右から左へ、またはその逆に変わるときにボックスが移動するのを避けるため、 start 整列テキストではキューボックスの "center" 位置整列が既定であることに注意。

2 つ目のキューは、その キュー ボックスが動画ビューポート幅の 90% の位置に右揃えされている （"right" 揃えテキストはボックスを右揃えする）。同じ効果は、キューボックスを明示的に配置する "position:55%,line-left" でも実現できる。3 つ目のキューは、最初のキューと同じ配置された キューボックス内で中央揃えテキストを持つ。

この例は、2 人の異なる話者のロールアップキャプションを含む 2 つの領域を示す。 Fred のキューは動画の左半分にある領域で上へスクロールし、Bill のキューは動画の 右半分にある領域で上へスクロールする。Fred の最初のキューは 20 秒まで定義されているにもかかわらず、 その領域が 3 行に制限されており、12.5 秒に 4 つ目のキューが現れるため、12.5 秒で消える:

WEBVTT

REGION
id:fred
width:40%
lines:3
regionanchor:0%,100%
viewportanchor:10%,90%
scroll:up

REGION
id:bill
width:40%
lines:3
regionanchor:100%,100%
viewportanchor:90%,90%
scroll:up

00:00:00.000 --> 00:00:20.000 region:fred align:left
<v Fred>Hi, my name is Fred

00:00:02.500 --> 00:00:22.500 region:bill align:right
<v Bill>Hi, I'm Bill

00:00:05.000 --> 00:00:25.000 region:fred align:left
<v Fred>Would you like to get a coffee?

00:00:07.500 --> 00:00:27.500 region:bill align:right
<v Bill>Sure! I've only had one today.

00:00:10.000 --> 00:00:30.000 region:fred align:left
<v Fred>This is my fourth!

00:00:12.500 --> 00:00:32.500 region:fred align:left
<v Fred>OK, let's go.

領域は水平キューに対してのみ定義されることに注意。

1.5. WebVTT におけるコメント

この節は非規範的である。

WebVTT ファイルにはコメントを含めることができる。

コメントは、空行に先行され、単語 "NOTE"（その後にスペースまたは改行が続く）で始まり、最初の空行で終わるブロックにすぎない。

ここでは、1 行コメントを使用して、キューに関する潜在的な問題を記している。

WEBVTT

00:01.000 --> 00:04.000
Never drink liquid nitrogen.

NOTE I'm not sure the timing is right on the following cue.

00:05.000 --> 00:09.000
— It will perforate your stomach.
— You could die.

この例では、作者が多くのコメントを書いている。

WEBVTT

NOTE
This file was written by Jill. I hope
you enjoy reading it. Some things to
bear in mind:
- I was lip-reading, so the cues may
not be 100% accurate
- I didn't pay too close attention to
when the cues should start or end.

00:01.000 --> 00:04.000
Never drink liquid nitrogen.

NOTE check next cue

00:05.000 --> 00:09.000
— It will perforate your stomach.
— You could die.

NOTE end of file

1.6. チャプターの例

この節は非規範的である。

WebVTT ファイルは、動画のナビゲーションマーカーであるチャプターで構成できる。

チャプターはプレーンテキストであり、通常は単一行だけである。

この例では、講演が各スライドごとのチャプターに分割されている。

WEBVTT

NOTE
This is from a talk Silvia gave about WebVTT.

Slide 1
00:00:00.000 --> 00:00:10.700
Title Slide

Slide 2
00:00:10.700 --> 00:00:47.600
Introduction by Naomi Black

Slide 3
00:00:47.600 --> 00:01:50.100
Impact of Captions on the Web

Slide 4
00:01:50.100 --> 00:03:33.000
Requirements of a Video text format

1.7. メタデータの例

この節は非規範的である。

WebVTT ファイルは、時間整列メタデータで構成できる。

メタデータは任意の文字列にでき、多くの場合 JSON 構造として提供される。

空行は WebVTT キューの終わりを意味するため、メタデータブロック内に空行を 含めることはできないことに注意。

この例では、講演が各スライドごとのチャプターに分割されている。

WEBVTT

NOTE
Thanks to http://output.jsbin.com/mugibo

1
00:00:00.100 --> 00:00:07.342
{
 "type": "WikipediaPage",
 "url": "https://en.wikipedia.org/wiki/Samurai_Pizza_Cats"
}

2
00:07.810 --> 00:09.221
{
 "type": "WikipediaPage",
 "url" :"http://samuraipizzacats.wikia.com/wiki/Samurai_Pizza_Cats_Wiki"
}

3
00:11.441 --> 00:14.441
{
 "type": "LongLat",
 "lat" : "36.198269",
 "long": "137.2315355"
}

2. 適合性

この仕様におけるすべての図、例、および注記は非規範的であり、 非規範的であると明示されたすべての節も同様である。この仕様におけるそれ以外のすべては規範的である。

この文書の規範的部分におけるキーワード "MUST"、"MUST NOT"、"SHOULD"、"SHOULD NOT"、"MAY"、および "OPTIONAL" は、 RFC2119 に記述されているとおりに解釈される。この文書の規範的部分におけるキーワード "OPTIONALLY" は、 "MAY" および "OPTIONAL" と同じ規範的意味で解釈される。読みやすさのため、これらの語はこの仕様では すべて大文字では現れない。[RFC2119]

アルゴリズムの一部として命令形で表現された要件（たとえば "strip any leading space characters" または "return false and abort these steps"）は、そのアルゴリズムを導入する際に使用された キーワード（"must"、"should"、"may" など）の意味で解釈される。

アルゴリズムまたは特定の手順として表現された適合性要件は、最終結果が同等である限り、 任意の方法で実装してよい。（特に、この仕様で定義されるアルゴリズムは 理解しやすいことを意図しており、高性能であることを意図していない。）

2.1. 適合性クラス

この仕様は、ユーザーエージェント（実装者に関係する）および WebVTT ファイル（作者および オーサリングツール実装者に関係する）に対する適合性基準を説明する。

§ 4 構文 は、有効な WebVTT ファイルが何で構成されるかを定義する。作者は そこでの要件に従う必要があり、適合性チェッカーを使用することが推奨される。§ 6 構文解析 は、text/vtt とラベル付けされたファイルを、有効および 無効な WebVTT ファイルの両方について、 ユーザーエージェントがどのように解釈するかを定義する。構文解析 規則は、拡張性を確保し、かつ一部に構文 エラーがあるキューを依然として描画するため、構文が許容するよりも作者のエラーに寛容である。

たとえば、 2 つのキューの間の空行が 省略されていても、パーサーは 2 つのキューを作成する。これは明らかに誤りなので、 適合性チェッカーはそれをエラーとして報告するが、ユーザーにキューを描画することは 依然として有用である。

ユーザーエージェントはいくつかの（重なり合う可能性のある）カテゴリに分類され、 それぞれ異なる適合性要件を持つ。

スクリプティングをサポートするユーザーエージェント

この仕様のすべての処理要件が適用される。ユーザーエージェントはまた、 Web IDL 仕様に記述されているように、この仕様の IDL 断片に対する適合実装でなければならない。 [WEBIDL]

スクリプティングをサポートしないユーザーエージェント

この仕様のすべての処理要件が適用される。ただし、 § 6.5 WebVTT キューテキスト DOM 構築規則および § 9 API の要件を除く。

CSS をサポートしないユーザーエージェント

この仕様のすべての処理要件が適用される。ただし、§ 6 構文解析のうち スタイルシートおよび CSS に関係する部分、ならびに § 7 描画および § 8 CSS 拡張のすべてを除く。ユーザーエージェントは 代わりに、WebVTT キャプションまたは字幕キューテキストの内側のテキストのみを 適切な方法で描画し、特に § 5 WebVTT キャプションまたは字幕キューコンポーネントの既定クラスで定義される色クラスを サポートしなければならない。それ以外の スタイル付け指示は任意である。

完全な HTML CSS エンジンをサポートしないユーザーエージェント

この仕様のすべての処理要件が適用される。これには、 § 5 WebVTT キャプションまたは字幕キューコンポーネントの既定クラスで定義される色クラスも含まれる。 ただし、ユーザーエージェントは、 § 6 構文解析、§ 7 描画、および § 8 CSS 拡張における CSS 関連機能を、描画結果が 完全な CSS 対応レンダラーが生成するものと同等になるような方法で適用する必要がある。

完全な HTML CSS エンジンをサポートするユーザーエージェント

この仕様のすべての処理要件が適用される。ただし、許可される CSS スタイルは限定された集合のみである。なぜなら、完全な HTML CSS エンジンを サポートしないユーザーエージェントは CSS 機能の同等物を実装する必要があるからである。したがって、完全な CSS エンジンをサポートするユーザーエージェントは、 WebVTT に適用する CSS スタイルを制限し、WebVTT 仕様の範囲を超える余分な CSS スタイルが 混入することなく同一の描画を可能にしなければならない。

適合性チェッカー

適合性チェッカーは、WebVTT ファイルがこの仕様で説明される適用可能な 適合性基準に適合していることを検証しなければならない。この仕様の目的において、 "validator" という用語は適合性チェッカーと同等である。

オーサリングツール

オーサリングツールは、適合する WebVTT ファイルを生成しなければならない。他の形式を WebVTT に変換するツールも オーサリングツールであると見なされる。

オーサリングツールが非適合の WebVTT ファイルを編集するために使用される場合、 その編集セッション中に編集されなかったファイルの節に含まれる 適合性エラーを保持してよい（すなわち、 編集ツールは誤った内容を往復処理することが許される）。ただし、オーサリングツールは、 そのようにエラーが保持されている場合、出力が適合していると主張してはならない。

2.2. Unicode 正規化

この仕様の実装は、処理中に Unicode テキストを正規化してはならない。

たとえば、 文字 U+0041 LATIN CAPITAL LETTER A に U+030A COMBINING RING ABOVE が続く文字（分解文字列）、または 文字 U+212B ANGSTROM SIGN（互換文字）からなる識別子を持つキューは、 文字 U+00C5 LATIN CAPITAL LETTER A WITH RING ABOVE（合成済み文字）からなる ID を持つ キューを対象とするセレクターには一致しない。

3. データモデル

WebVTT のボックスモデルは、3 つの主要要素、すなわち動画ビューポート、キュー、 および 領域から構成される。動画ビューポートは、キューおよび領域が描画される描画領域である。キューは、 キュー行の集合から構成されるボックスである。領域は、キューをまとめて グループ化するために使用される動画ビューポートの部分領域である。キューは、動画ビューポート内に直接、 または動画ビューポート内に配置される 領域内のいずれかに配置される。

動画ビューポート内におけるキューの位置は、キュー設定の集合によって定義される。 動画ビューポート内における領域の位置は、領域設定の集合によって定義される。領域内にあるキューは、 そのキュー設定の限定された集合のみを使用できる。具体的には、キューが "vertical"、"line"、または "size" 設定を持つ場合、そのキューは領域から外れる。 そうでない場合、キューの幅はビューポートではなく領域幅に対する相対値として計算される。

3.1. 概要

この節は非規範的である。

WebVTT ファイルは、動画または音声リソースと時間的に整列されたデータの塊のための コンテナファイルである。したがって、時間整列データの直列化形式と見なすことができる。

WebVTT ファイルはヘッダーで始まり、その後に一連のデータブロックを含む。データブロックが 開始時刻と終了時刻を持つ場合、それは WebVTT キューと呼ばれる。コメントは別の種類のデータブロックである。

WebVTT ファイルでは、異なる種類のデータを運ぶことができる。HTML 仕様は、 キャプション、字幕、チャプター、音声説明、およびメタデータをデータ種類として識別し、 どれが使用されているかを text track kind 属性、すなわち text track 要素の属性で指定する [HTML]。

WebVTT ファイルは、1 種類のデータのみを含まなければならず、異なる種類のデータを混在させてはならない。 WebVTT ファイルのデータ種類は、HTML ファイルの text track 要素などによって外部から指定される。環境は、データを正しく解釈する責任を持つ。

WebVTT キャプションまたは字幕キューは、動画ビューポートの上に重ねて、または 動画ビューポートの部分領域である領域内に描画される。

3.2. WebVTT キュー

WebVTT キューは、 text track cue [HTML] であり、さらに 次のものから構成される:

キュー テキスト

キューの生テキスト、およびそれを解釈するための規則。

3.3. WebVTT キャプションまたは字幕キュー

WebVTT キャプションまたは字幕キューは、WebVTT キューであり、キュー テキストを描画し、DOM 断片に変換できるようにする次の追加プロパティを持つ:

キューボックス

WebVTT キューのキューボックスは、 そのキューのすべての行のテキストが描画される ボックスである。キューが領域の一部である場合、そのボックスは動画のビューポート内、 またはビューポート内の領域に描画される。

動画ビューポートまたは領域の寸法内における キューボックスの位置は、 WebVTT キュー位置および WebVTT キュー行の値に依存する。

行の長さによって必要になる場合、行は キューボックスの size 内で折り返される。

書字方向

書字方向は、次のいずれかである。

  • horizontal（行は 水平方向に延び、動画ビューポートの上端から垂直方向にオフセットされ、連続する行は 互いの下に表示される）、
  • vertical growing left（ 行は垂直方向に延び、動画ビューポートの右端から水平方向にオフセットされ、 連続する行は互いの左に表示される）、または
  • vertical growing right（ 行は垂直方向に延び、動画ビューポートの左端から水平方向にオフセットされ、 連続する行は互いの右に表示される）。

書字方向は、 line、position、 および size キュー 設定を、動画の 幅または高さのいずれかに関して解釈する方法に影響する。

既定では、書字方向は horizontal に設定される。

vertical growing left 書字方向は、縦書きの中国語、日本語、および韓国語に使用でき、vertical growing right 書字 方向は、縦書きのモンゴル語に使用できる。

snap-to-lines フラグ

line が整数個の行 （キューの最初の行の行寸法を使用する）であるか、それとも動画の寸法に対する割合であるかを示すブール値。 行が数えられる場合、このフラグは true に設定され、それ以外の場合は false に設定される。

フラグが false であるキューは、複数のキューが同じ場所にある場合の重なり回避を法として、 要求されたとおりにオフセットされる。

既定では、snap-to-lines フラグは true に設定される。

行

行は キュー ボックスの配置を定義する。

行は、 書字 方向、snap-to-lines フラグ、または他の表示中トラックが占める行によって定義されるように、 キューボックスを動画ビューポートの 上、右、または左からオフセットする。

行は、 行数、動画ビューポートの高さまたは幅に対する割合、または特殊値 auto のいずれかとして設定される。これは、オフセットが他の 表示中トラックに依存することを意味する。

既定では、行は auto に設定される。

書字方向が horizontal である場合、line の割合は動画の高さに対する相対値であり、それ以外の場合は動画の幅に対する相対値である。

WebVTT キューは、 算出行を持ち、その値は、 キューの他の側面に関して定義される次のアルゴリズムが返す値である:

  1. line が数値であり、WebVTT キューの WebVTT キュー snap-to-lines フラグ が false であり、かつ line が負または 100 より大きい場合、100 を返してこれらの手順を中止する。

    WebVTT パーサーは、line を 0..100 の範囲外の数値に設定し、同時に WebVTT キュー snap-to-lines フラグを false に設定することはないが、DOM API の snapToLines および line 属性を使用する場合、これは起こり得る。

  2. line が数値である場合、WebVTT キュー line の値を返して、これらの手順を中止する。（WebVTT キュー snap-to-lines フラグが true であるため、 0..100 の範囲内の値だけでなく任意の値が有効であるか、または値が 0..100 の範囲内であり、 したがってそのフラグの値にかかわらず有効である。）

  3. WebVTT キュー snap-to-lines フラグが WebVTT キューについて false である場合、 値 100 を返してこれらの手順を中止する。（line は特殊値 auto である。）

  4. cue を WebVTT キューとする。

  5. cue が キューのリスト内の text track に属していない場合、またはその text track が media element の text tracks のリスト内にない場合、−1 を返してこれらの手順を中止する。

  6. track を、その キューの リストに cue が含まれる text track とする。

  7. n を、text track mode が showing であり、かつ track より前に media element の text tracks のリストに含まれる text tracks の数とする。

  8. n を 1 増やす。

  9. n を負にする。

  10. n を返す。

たとえば、 2 つの text tracks が 1 つの media element 内で同時に showing であり、かつ各 text track が現在、WebVTT キューであって、その line がどちらも auto であるアクティブなものを持つ場合、 最初の text trackのキューの 算出行は −1 となり、 2 つ目は −2 となる。

行揃え

キュー ボックスの line に対する 揃えであり、次のいずれかである:

Start alignment
キューボックスの 上側（horizontal キューの場合）、左側（ vertical growing right の場合）、または右側（vertical growing left の場合）が line に揃えられる。
Center alignment
キューボックスは line の位置で中央揃えされる。
End alignment
キューボックスの 下側（horizontal キューの場合）、右側（ vertical growing right の場合）、または左側（vertical growing left の場合）が line に揃えられる。

既定では、行揃えは start に設定される。

行揃えは テキスト揃えとは別であり、右から左か左から右かというキュー テキストは 行揃えに影響しない。

位置

位置は、書字 方向によって定義される方向における キューボックスのインデントを定義する。

位置は、キューボックスの位置を パーセント値として与える数値、または特殊値 auto のいずれかである。これは、位置が キューの テキスト揃えに依存することを意味する。

キューが 領域内にない場合、パーセント値は動画寸法に対する割合として 解釈され、そうでない場合は領域 寸法に対する割合として解釈される。

既定では、位置は auto に設定される。

書字方向が horizontal である場合、position の割合は動画の幅に対する相対値であり、それ以外の場合は動画の高さに対する相対値である。

WebVTT キューは、 算出位置を持ち、その値は キューの他の側面に関して定義される次のアルゴリズムが返す値である:

  1. position が 0 から 100 までの数値である場合、 position の値を返して、これらの手順を中止する。（そうでない場合、 position は特殊値 auto である。）

  2. キューテキスト揃えが left である場合、0 を返してこれらの手順を中止する。

  3. キューテキスト揃えが right である場合、100 を返してこれらの手順を中止する。

  4. そうでない場合、50 を返してこれらの手順を中止する。

WebVTT キュー 位置揃えの既定値は center であるため、キューに WebVTT キューテキスト 揃え 設定がない場合、WebVTT キュー位置は既定で 50% になる。

右から左のキューテキストを持つ horizontal キューであっても、 キューボックスは動画ビューポートの左端から配置される。 これにより、左から右または右から左のキューテキスト、あるいはその両方で埋めることができる 描画空間テンプレートを定義できる。

WebVTT キューで、 size が 100% 以外であり、かつ テキスト揃えが start または end であるものについて、作者は既定の auto position を使用してはならない。

テキスト揃えが start または end である場合、auto position は 50% である。これは left および right 揃えテキストとは異なり、その場合 auto position はそれぞれ 0% および 100% である。 上記の要件が存在するのは、 start または end 揃えテキストに対して自動配置が機能しないことが 意外であり得るからである。キュー テキストは、左から右の基底方向を持つテキスト、右から左の基底方向を持つテキスト、 またはその両方（異なる行において）から構成され得るため、そのような自動配置は予期しない結果をもたらす。

位置揃え

書字方向の寸法における キュー ボックスの揃えであり、position が何に固定されるかを説明する。次のいずれかである:

Line-left alignment
キューボックスの 左側（horizontal キューの場合）または上側 （それ以外の場合）が position に揃えられる。
Center alignment
キューボックスは position の位置で中央揃えされる。
Line-right alignment
キューボックスの 右側（horizontal キューの場合）または下側 （それ以外の場合）が position に揃えられる。
Auto alignment
キューボックスの 揃えは、キューの テキスト揃えの値に依存する。

既定では、位置揃えは auto に設定される。

WebVTT キューは、 算出位置 揃えを持ち、その値は、キューの他の側面に 関して 定義される次のアルゴリズムが返す値である:

  1. WebVTT キュー位置揃えが auto でない場合、 WebVTT キュー位置揃えの値を返して これらの手順を中止する。

  2. WebVTT キューテキスト揃えが left である場合、 line-left を返して、これらの 手順を中止する。

  3. WebVTT キューテキスト揃えが right である場合、 line-right を返して、これらの 手順を中止する。

  4. WebVTT キューテキスト揃えが start である場合、 キューテキストの基底方向が左から右であれば line-left を返し、 そうでなければ line-right を返す。

  5. WebVTT キューテキスト揃えが end である場合、 キューテキストの基底方向が左から右であれば line-right を返し、 そうでなければ line-left を返す。

  6. そうでない場合、center を返す。

position は常に動画の左 （horizontal キューの場合）または上 （それ以外の場合）から測定されるため、WebVTT キュー位置揃えの line-left 値は、 horizontal キューと vertical キューで left と top の間で変化する。

サイズ

キューボックスのサイズを与える数値であり、 書字 方向によって定義されるように、動画に対する割合として解釈される。

既定では、WebVTT キューサイズは 100% に設定される。

書字方向が horizontal である場合、size の割合は動画の幅に対する相対値であり、それ以外の場合は動画の高さに対する相対値である。

テキスト揃え

書字方向の寸法における、 キューボックス内のすべてのテキスト行に対する揃えであり、 次のいずれかである:

Start alignment
各行のテキストは、ボックスの開始側に向かって個別に揃えられる。 その行の開始側は、unicode-bidi プロパティの plaintext 値に対する CSS 規則を使用して決定される。[CSS-WRITING-MODES-3]
Center alignment
テキストは、ボックスの開始側と終了側の間で中央揃えされる。
End alignment
各行のテキストは、ボックスの終了側に向かって個別に揃えられる。 その行の終了側は、unicode-bidi プロパティの plaintext 値に対する CSS 規則を使用して決定される。[CSS-WRITING-MODES-3]
Left alignment
テキストは、ボックスの左側（horizontal キューの場合）または上側 （それ以外の場合）に揃えられる。
Right alignment
テキストは、ボックスの右側（horizontal キューの場合）または下側 （それ以外の場合）に揃えられる。

既定では、テキスト揃えは center に設定される。

キュー内の各行の基底方向（これは、その行内の文字を表示する順序を決定するために Unicode 双方向 アルゴリズムによって使用される）は、CSS plaintext アルゴリズムを用いて、各行の最初の強い方向性を持つ文字を 調べることにより決定される。まれに、行の最初の強い文字がその行に誤った基底方向を生じさせる場合、 作者は行の先頭に U+200E LEFT-TO-RIGHT MARK または U+200F RIGHT-TO-LEFT MARK 文字を使用して修正できる。 [BIDI]

この例では、2 つ目のキューは右から左の基底方向を持ち、 ".I think ,يلاع" として描画される。（なお、下のテキストは すべての文字を左から右に示している。テキストエディターが必ずしも同じ 描画をするとは限らない。）

WEBVTT

00:00:07.000 --> 00:00:09.000
What was his name again?

00:00:09.000 --> 00:00:11.000
عالي, I think.

その行を左から右の基底方向に変更するには、行を U+200E LEFT-TO-RIGHT MARK 文字（"&lrm;" としてエスケープできる）で開始する。

行内の一部の埋め込みテキストの基底方向が、その行の周囲のテキストとは異なる必要がある場合、 対になった Unicode bidi formatting code 文字を使用することで実現できる。

この例では、bidi formatting code 文字が使用されないと仮定すると、キューテキストは "I’ve read the book 3 דנליונ times!" として描画される（すなわち、"3" が書名の誤った側にある）。これは Unicode 双方向アルゴリズムの効果によるものである。（ここでも、下のテキストはすべての文字を 左から右に示している。）

WEBVTT

00:00:04.000 --> 00:00:08.000
I've read the book נוילנד 3 times!

書名の前に U+2068 FIRST STRONG ISOLATE (FSI) 文字を置き、その後に U+2069 POP DIRECTIONAL ISOLATE (PDI) 文字を置いた場合、描画は意図した "I’ve read the book דנליונ 3 times!" になる。 （これらの文字は、それぞれ "&#x2068;" および "&#x2069;" として エスケープできる。）

既定のテキスト揃えは、キューテキストの基底方向にかかわらず center alignment である。各 行のテキスト揃えをその行の基底方向に一致させる（たとえば英語では左、ヘブライ語では右）には、start alignment を使用するか、反対方向の揃えには end alignment を使用する。

この例では、start alignment が使用される。最初の 行は基底方向が左から右であるため左揃えになり、2 つ目の行は 基底方向が右から左であるため右揃えになる。

WEBVTT

00:00:00.000 --> 00:00:05.000 align:start
Hello!
שלום!

これは次のように描画される:

Hello!
                                            !םולש

left alignment および right alignment は、行の基底方向にかかわらず キューテキストを左揃えまたは右揃えするために使用できる。

領域

キューが属する任意の WebVTT 領域。

既定では、領域は null に設定される。

テキストトラック描画を更新するための規則のうち WebVTT キューに関連付けられたものは、WebVTT テキストトラックの表示を更新するための規則である。

WebVTT キューであって、その アクティブフラグが設定されているものにおいて、 書字方向、snap-to-lines フラグ、line、 line alignment、position、position alignment、size、text alignment、region、または text の値が変化した場合、ユーザーエージェントは text track cue display state を空にし、その後 直ちに text track の WebVTT テキスト トラックの表示を更新するための規則を実行しなければならない。

3.4. WebVTT キャプションまたは字幕領域

WebVTT 領域は、 動画ビューポートの部分領域を表し、WebVTT キャプションまたは字幕キューのための限定された 描画領域を提供する。

領域は、キャプションまたは字幕キューをグループ化し、それらのキューを 一緒に描画できるようにする手段を提供する。これは上へスクロールする場合に特に重要である。

各 WebVTT 領域は、次のものから構成される:

識別子

U+0020 SPACE または U+0009 CHARACTER TABULATION 文字以外の 0 個以上の文字からなる任意の文字列。この文字列は、部分文字列 "-->"（U+002D HYPHEN-MINUS、U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN）を含んではならない。既定値は空文字列である。

幅

含まれるキューの各行のテキストが描画されるボックスの幅を与える数値であり、 動画幅に対する割合として解釈される。既定値は 100 である。

行数値

含まれるキューの各行のテキストが描画されるボックスの行数を与える数値。 既定値は 3 である。

WebVTT 領域は固定された描画領域を定義するため、領域が許容するより多くの 行を持つキューは切り取られる。スクロール領域では切り取りは上部で行われ、 非スクロール領域では下部で行われる。

領域アンカー点

動画ビューポートに固定され、たとえばフォントサイズの変更などにより領域が変化しても位置を変えない、 領域内の x 座標および y 座標を与える 2 つの数値。既定値は (0,100)、 すなわち領域の左下隅である。

領域ビューポートアンカー点

領域アンカー点が固定される動画ビューポート内の x 座標および y 座標を与える 2 つの数値。既定値は (0,100)、すなわち動画ビューポートの左下隅である。

スクロール値

次のいずれかである:

None
領域内のキューはスクロールせず、最初に描画された位置に固定されたままであることを示す。
Up
領域内のキューは領域の下部に追加され、新しいキューのすべての行が領域内で見えるようになるまで、 すでに領域内に表示されているキューを上へ押し上げることを示す。

次の図は、領域を動画ビューポートに固定する仕組みを示している。黒い 十字はアンカーであり、オレンジ色は領域内におけるアンカーのオフセットを、緑色は 動画ビューポート内におけるアンカーのオフセットを示す。掲示板にメモをピンで留めるようなものと考えるとよい:

WebVTT 領域の視覚的な説明

画像の説明: 動画ビューポート内に WebVTT 領域がある。 領域内には、黒い十字で示されたアンカー点がある。動画ビューポートの端からアンカーまでの 垂直方向および水平方向の距離は緑色の矢印で示され、これは 領域ビューポートアンカーの X および Y オフセットを表す。領域の端からアンカーまでの 垂直方向および水平方向の距離はオレンジ色の矢印で示され、これは領域アンカーの X および Y オフセットを表す。領域のサイズは、水平方向の軸については領域幅により、 垂直方向の軸については領域行数により表される。

構文解析のために、次のものも必要である:

text track 領域リスト

0 個以上の WebVTT 領域からなるリスト。

3.5. WebVTT チャプターキュー

WebVTT チャプターキューは、 WebVTT キューであり、その キューテキストは、 ナビゲーション対象としてチャプターを説明するチャプタータイトルとして解釈される。

チャプターキューは、音声または動画ファイルのタイムラインを連続した重ならない 区間としてマークアップする。さらに、これらの区間をサブチャプターに細分化して ナビゲーションツリーを構築することも可能である。

3.6. WebVTT メタデータキュー

WebVTT メタデータキューは、 WebVTT キューであり、その キューテキストは 時間整列メタデータとして解釈される。

4. 構文

4.1. WebVTT ファイル構造

WebVTT ファイルは、 UTF-8 として符号化され、WebVTT ファイル本体で構成され、 MIME 型 text/vtt でラベル付けされていなければならない。 [RFC3629]

WebVTT ファイル本体は、 次の構成要素から、次の順序で構成される:

  1. 任意の U+FEFF BYTE ORDER MARK (BOM) 文字。
  2. 文字列 "WEBVTT"。
  3. 任意で、U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（tab）文字のいずれか、 続けて U+000A LINE FEED (LF) または U+000D CARRIAGE RETURN (CR) 文字ではない任意個数の文字。
  4. ファイルマジックを含む行を終端し、それを本体の残りから分離するための、 2 つ以上の WebVTT 行終端子。
  5. 0 個以上の WebVTT 領域定義ブロック、WebVTT スタイル ブロック、および WebVTT コメント ブロック。これらは互いに 1 つ以上の WebVTT 行 終端子で分離される。
  6. 0 個以上の WebVTT 行終端子。
  7. 0 個以上の WebVTT キュー ブロックおよび WebVTT コメントブロック。これらは互いに 1 つ以上の WebVTT 行終端子で分離される。
  8. 0 個以上の WebVTT 行終端子。

WebVTT 行 終端子は、次のいずれかから構成される:

WebVTT 領域定義ブロックは、次の構成要素から、指定された 順序で構成される:

  1. 文字列 "REGION"（U+0052 LATIN CAPITAL LETTER R、U+0045 LATIN CAPITAL LETTER E、 U+0047 LATIN CAPITAL LETTER G、U+0049 LATIN CAPITAL LETTER I、U+004F LATIN CAPITAL LETTER O、U+004E LATIN CAPITAL LETTER N）。
  2. 0 個以上の U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（tab）文字。
  3. WebVTT 行終端子。
  4. WebVTT 領域設定リスト。
  5. WebVTT 行終端子。

WebVTT スタイルブロックは、 次の構成要素から、指定された順序で構成される:

  1. 文字列 "STYLE"（U+0053 LATIN CAPITAL LETTER S、U+0054 LATIN CAPITAL LETTER T、 U+0059 LATIN CAPITAL LETTER Y、U+004C LATIN CAPITAL LETTER L、U+0045 LATIN CAPITAL LETTER E）。
  2. 0 個以上の U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（tab）文字。
  3. WebVTT 行終端子。
  4. U+000A LINE FEED (LF) 文字および U+000D CARRIAGE RETURN (CR) 文字以外の 0 個以上の文字からなる任意の列。各文字は任意で次の文字と WebVTT 行 終端子により分離される。ただし、結果として得られる文字列全体は部分文字列 "-->"（U+002D HYPHEN-MINUS、U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN）を 含んではならない。この文字列は CSS スタイルシートを表す。関連する CSS 仕様で与えられる要件が適用される。 [CSS22]
  5. WebVTT 行終端子。

WebVTT キューブロックは、 次の構成要素から、指定された順序で構成される:

  1. 任意で、WebVTT キュー識別子、続けて WebVTT 行終端子。
  2. WebVTT キュー タイミング。
  3. 任意で、1 つ以上の U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（tab）文字、 続けて WebVTT キュー設定リスト。
  4. WebVTT 行終端子。
  5. キューペイロード: WebVTT キャプションまたは字幕キューテキスト、WebVTT チャプタータイトルテキスト、または WebVTT メタデータテキストのいずれかであるが、部分文字列 "-->"（U+002D HYPHEN-MINUS、U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN）を含んではならない。
  6. WebVTT 行終端子。

WebVTT キューブロックは、 WebVTT ファイル内の、 たとえば 1 つの字幕など、時間整列されたテキストまたはデータの 1 つに対応する。 キューペイロードは、キューに関連付けられた テキストまたはデータである。

WebVTT キュー 識別子は、部分文字列 "-->"（U+002D HYPHEN-MINUS、U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN）を 含まず、かつ U+000A LINE FEED (LF) 文字または U+000D CARRIAGE RETURN (CR) 文字を含まない、 1 個以上の任意の文字列である。

WebVTT キュー 識別子は、WebVTT ファイルのすべての WebVTT キューのすべての WebVTT キュー識別子の中で一意でなければならない。

WebVTT キュー識別子は、たとえば スクリプトまたは CSS から特定のキューを参照するために使用できる。

WebVTT キューブロックの WebVTT キュー タイミング部分は、次の構成要素から、指定された 順序で構成される:

  1. キューの開始時刻オフセットを表す WebVTT タイムスタンプ。 この WebVTT タイムスタンプによって表される時刻は、ファイル内のすべての 先行するキューの開始時刻オフセット以上でなければならない。
  2. 1 つ以上の U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（tab）文字。
  3. 文字列 "-->"（U+002D HYPHEN-MINUS、U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN）。
  4. 1 つ以上の U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（tab）文字。
  5. キューの終了時刻オフセットを表す WebVTT タイムスタンプ。 この WebVTT タイムスタンプによって表される時刻は、キューの開始時刻オフセットより大きくなければならない。

WebVTT キュータイミングは、WebVTT キュー ブロックの開始および終了オフセットを与える。異なるキューは重なってよい。キューは常に開始時刻順に列挙される。

WebVTT タイムスタンプは、 次の構成要素から、指定された順序で構成される:

  1. 任意で（hours が非ゼロの場合は必須）:
    1. 基数 10 の整数として hours を表す、2 つ以上の ASCII 数字。
    2. U+003A COLON 文字 (:)
  2. 0 ≤ minutes ≤ 59 の範囲内の基数 10 の整数として minutes を表す、 2 つの ASCII 数字。
  3. U+003A COLON 文字 (:)
  4. 0 ≤ seconds ≤ 59 の範囲内の基数 10 の整数として seconds を表す、 2 つの ASCII 数字。
  5. U+002E FULL STOP 文字 (.)。
  6. 千分の一秒 seconds-frac を基数 10 の整数として表す、3 つの ASCII 数字。

WebVTT タイムスタンプは、常に WebVTT ファイルが同期される メディアデータの 現在の再生 位置に対する相対値として解釈される。

WebVTT キュー 設定リストは、任意の順序の 0 個以上の WebVTT キュー設定からなる列で構成され、 互いに 1 つ以上の U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（tab）文字で分離される。各設定は、次の 構成要素から、指定された順序で構成される:

  1. WebVTT キュー設定名。
  2. U+003A COLON（colon）文字。
  3. WebVTT キュー設定値。

WebVTT キュー設定 名および WebVTT キュー設定値は、それぞれ U+000A LINE FEED (LF) 文字および - U+000D CARRIAGE RETURN (CR) 文字以外の 1 個以上の任意の文字列で構成される。ただし、結果として得られる文字列全体は 部分文字列 "-->"（U+002D HYPHEN-MINUS、U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN）を含んではならない。

WebVTT パーセント値は、 次の構成要素から構成される:

  1. 1 つ以上の ASCII 数字。
  2. 任意で:
    1. U+002E DOT 文字 (.)。
    2. 1 つ以上の ASCII 数字。
  3. U+0025 PERCENT SIGN 文字 (%)。

数値として解釈される場合、WebVTT パーセント値は 0..100 の範囲内でなければならない。

WebVTT コメント ブロックは、次の構成要素から、指定された順序で構成される:

  1. 文字列 "NOTE"。
  2. 任意で、次の構成要素から、指定された順序で構成されるもの:
    1. 次のいずれか:
      • U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（tab）文字。
      • WebVTT 行終端子。
    2. U+000A LINE FEED (LF) 文字および U+000D CARRIAGE RETURN (CR) 文字以外の 0 個以上の文字からなる任意の列。各文字は任意で次の文字と WebVTT 行終端子により分離される。ただし、結果として得られる文字列全体は部分文字列 "-->"（U+002D HYPHEN-MINUS、U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN）を含んではならない。
  3. WebVTT 行終端子。

WebVTT コメントブロックはパーサーにより無視される。

4.2. WebVTT キューペイロードの種類

4.2.1. WebVTT メタデータテキスト

WebVTT メタデータ テキストは、U+000A LINE FEED (LF) 文字および U+000D CARRIAGE RETURN (CR) 文字以外の 0 個以上の文字からなる任意の列で構成され、各文字は任意で次の文字と WebVTT 行終端子により分離される。（言い換えると、2 つの連続する WebVTT 行終端子を持たず、かつ WebVTT 行終端子で始まらず終わらない任意のテキストである。）

WebVTT メタデータ テキストキューは、スクリプト化されたアプリケーション（たとえば HTML text track において metadata text track kind を使用する場合）にのみ有用である。

4.2.2. WebVTT キャプションまたは字幕キューテキスト

WebVTT キャプションまたは字幕キューテキストは、任意の順序の 0 個以上の WebVTT キャプションまたは字幕キュー構成要素から構成される キューペイロードであり、各構成要素は任意で次のものと WebVTT 行終端子により分離される。

WebVTT キャプションまたは字幕キュー構成要素は、次のとおりである:

HTML 文字参照を除くすべての WebVTT キャプションまたは字幕キュー構成要素は、 ピリオド（'.'）表記を使用してキュー構成要素開始タグからキュー構成要素 クラス名を分離することにより、1 つ以上の キュー 構成要素クラス名を付加できる。クラス名は "period"（.）の直後に続かなければならない。

WebVTT キュー内部 テキストは、任意の WebVTT 行終端子、 続けて任意の順序の 0 個以上の WebVTT キャプションまたは字幕キュー構成要素から構成され、 各構成要素には任意で WebVTT 行終端子が続く。

WebVTT キュークラス spanは、注釈を許可しない WebVTT キュー span 開始タグ "c"、キュー テキストを表す WebVTT キュー内部テキスト、および WebVTT キュー span 終了タグ "c" から構成される。

WebVTT キューイタリック spanは、注釈を許可しない WebVTT キュー span 開始タグ "i"、イタリック体のテキストを表す WebVTT キュー内部テキスト、および WebVTT キュー span 終了タグ "i" から構成される。

WebVTT キュー太字 spanは、注釈を許可しない WebVTT キュー span 開始タグ "b"、 太字のテキストを表す WebVTT キュー内部テキスト、および WebVTT キュー span 終了タグ "b" から構成される。

WebVTT キュー 下線 spanは、注釈を許可しない WebVTT キュー span 開始タグ "u"、下線付きテキストを表す WebVTT キュー内部テキスト、および WebVTT キュー span 終了タグ "u" から構成される。

WebVTT キュー ruby spanは、次の構成要素から、指定された順序で構成される:

  1. 注釈を許可しない WebVTT キュー span 開始タグ "ruby"。
  2. 次の構成要素のグループが 1 回以上、指定された順序で現れるもの:
    1. ruby ベースを表す WebVTT キュー内部テキスト。
    2. 注釈を許可しない WebVTT キュー span 開始タグ "rt"。
    3. WebVTT キュー ruby テキスト span: ruby 注釈の ruby テキスト構成要素を表す WebVTT キュー内部 テキスト。
    4. WebVTT キュー span 終了タグ "rt"。これが WebVTT キュー ruby span内のこの 構成要素グループの最後の出現である場合、この最後の終了タグ文字列は 省略してよい。
  3. 最後の終了タグ文字列が省略されなかった場合: 任意で、WebVTT 行終端子。
  4. 最後の終了タグ文字列が省略されなかった場合: 0 個以上の U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（tab）文字。各文字には任意で WebVTT 行 終端子が続く。
  5. WebVTT キュー span 終了タグ "ruby"。

キュー配置は、ruby テキストではなく、ベースラインテキストの配置を制御する。

WebVTT における ruby は、HTML における ruby 機能のサブセットである。これらの機能が HTML および CSS でより成熟したとき、将来的には ruby ベーステキストのためのオブジェクトや 複雑な ruby もサポートするように拡張される可能性がある。[HTML] [CSS3-RUBY]

WebVTT キュー voice spanは、次の構成要素から、指定された順序で構成される:

  1. 注釈を要求する WebVTT キュー span 開始タグ "v"。注釈は 声の名前を表す。
  2. WebVTT キュー内部テキスト。
  3. WebVTT キュー span 終了タグ "v"。この WebVTT キュー voice span が、その WebVTT キャプションまたは 字幕キューテキスト列の唯一の 構成要素である場合、簡潔さのために終了タグを省略してよい。

WebVTT キュー language spanは、次の構成要素から、指定された順序で構成される:

  1. 注釈を要求する WebVTT キュー span 開始タグ "lang"。注釈は 後続の構成要素の言語を表し、有効な BCP 47 言語タグでなければならない。 [BCP47]
  2. WebVTT キュー内部テキスト。
  3. WebVTT キュー span 終了タグ "lang"。

有効な BCP 47 言語タグに関する上記の要件は作者要件であるため、 適合性チェッカーは言語タグの妥当性検査を行うが、他のユーザーエージェントは 行わない。

WebVTT キュー span 開始タグは tag name を持ち、注釈を 要求するか許可しないかのいずれかであり、次の構成要素から、指定された順序で 構成される:

  1. U+003C LESS-THAN SIGN 文字 (<)。
  2. tag name。
  3. 次の列が 0 回以上現れるもの:
    1. U+002E FULL STOP 文字 (.)
    2. キュー span の意味を説明するクラスを表す、U+0009 CHARACTER TABULATION（tab）文字、U+000A LINE FEED (LF) 文字、U+000D CARRIAGE RETURN (CR) 文字、U+0020 SPACE 文字、U+0026 AMPERSAND 文字 (&)、U+003C LESS-THAN SIGN 文字 (<)、U+003E GREATER-THAN SIGN 文字 (>)、および U+002E FULL STOP 文字 (.) 以外の 1 個以上の文字。

  4. 開始タグが注釈を要求する場合: U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（tab）文字、続けて次の構成要素のうち 1 つ以上。その表現を連結した値は、 U+0020 SPACE および U+0009 CHARACTER TABULATION（tab）文字以外の文字を少なくとも 1 つ含む:

  5. U+003E GREATER-THAN SIGN 文字 (>)。

WebVTT キュー span 終了 タグは tag name を持ち、次の構成要素から、 指定された順序で構成される:

  1. U+003C LESS-THAN SIGN 文字 (<)。
  2. U+002F SOLIDUS 文字 (/)。
  3. tag name。
  4. U+003E GREATER-THAN SIGN 文字 (>)。

WebVTT キュー タイムスタンプは、U+003C LESS-THAN SIGN 文字 (<)、 続けてキュー内のその地点がアクティブになる時刻を表す WebVTT タイムスタンプ、 続けて U+003E GREATER-THAN SIGN 文字 (>) から構成される。WebVTT タイムスタンプによって表される時刻は、キュー内の先行するすべての WebVTT キュータイムスタンプによって 表される時刻より大きく、かつキューの開始時刻 オフセットより大きく、キューの終了時刻オフセットより小さくなければならない。

WebVTT キューテキスト spanは、U+000A LINE FEED (LF) 文字、U+000D CARRIAGE RETURN (CR) 文字、U+0026 AMPERSAND 文字 (&)、および U+003C LESS-THAN SIGN 文字 (<) 以外の 1 個以上の文字から構成される。

WebVTT キュー span 開始タグ注釈テキストは、 U+000A LINE FEED (LF) 文字、U+000D CARRIAGE RETURN (CR) 文字、U+0026 AMPERSAND 文字 (&)、および U+003E GREATER-THAN SIGN 文字 (>) 以外の 1 個以上の文字から構成される。

4.2.3. WebVTT チャプタータイトルテキスト

WebVTT チャプター タイトルテキストは、次の構成要素を 0 個以上使用する キューテキストであり、 各構成要素は任意で次のものと WebVTT 行 終端子により分離される:

4.3. WebVTT 領域設定

WebVTT キュー 設定リストは、WebVTT 領域への参照を含むことができる。領域を定義するには、 WebVTT 領域定義ブロックを指定する。

WebVTT 領域 設定リストは、次の構成要素を 0 個以上、任意の順序で含み、 それぞれは 1 つ以上の U+0020 SPACE 文字、U+0009 CHARACTER TABULATION（tab）文字、または WebVTT 行終端子で区切られる。ただし、この文字列は 2 つの連続する WebVTT 行終端子を含んではならない。各構成要素は WebVTT 領域設定リスト文字列ごとに 2 回以上含まれてはならない。

WebVTT 領域設定リストは、領域の 寸法、配置、およびアンカーに関する設定オプションを与える。 たとえば、領域内のキュー群を、領域の中央および動画ビューポートの中央に 固定できるようにする。この例では、フォントサイズが大きくなると、 領域は中央からすべての方向へ均等に拡大する。

WebVTT 領域識別子設定は、次の構成要素から、指定された順序で 構成される:

  1. 文字列 "id"。

  2. U+003A COLON 文字 (:)。

  3. ASCII 空白以外の 1 個以上の文字からなる任意の文字列。この文字列は 部分文字列 "-->"（U+002D HYPHEN-MINUS、U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN）を含んではならない。

WebVTT 領域識別子設定は、 WebVTT ファイルのすべての WebVTT 領域におけるすべての WebVTT 領域識別子設定の中で一意でなければならない。

WebVTT 領域識別子設定は、 各 WebVTT キュー設定 リストに存在しなければならない。識別子がなければ、構文上、 WebVTT キューを WebVTT 領域に関連付けることはできない。

WebVTT 領域識別子設定は、領域に名前を与え、 その領域に属するキューから参照できるようにする。

WebVTT 領域 幅設定は、次の構成要素から、指定された順序で 構成される:

  1. 文字列 "width"。

  2. U+003A COLON 文字 (:)。

  3. WebVTT パーセント値。

WebVTT 領域幅設定は、キューが描画され、 それに基づいて揃えが計算される領域について、動画幅に対する割合として 固定幅を提供する。

WebVTT 領域 行数設定は、次の構成要素から、指定された順序で 構成される:

  1. 文字列 "lines"。

  2. U+003A COLON 文字 (:)。

  3. 1 つ以上の ASCII 数字。

WebVTT 領域行数設定は、キューが描画される領域について、 行数として固定高さを提供する。そのため、それがスクロール領域である場合、 ロールアップ領域の高さを定義する。

WebVTT 領域 アンカー設定は、次の構成要素から、指定された順序で 構成される:

  1. 文字列 "regionanchor"。

  2. U+003A COLON 文字 (:)。

  3. WebVTT パーセント値。

  4. U+002C COMMA 文字 (,)。

  5. WebVTT パーセント値。

WebVTT 領域アンカー設定は、 領域ボックス内で位置が固定される点を指定する 2 つのパーセント値のタプルを提供する。 最初のパーセント値は領域ボックスの左上隅からの x 次元を測り、 2 つ目のパーセント値は y 次元を測る。WebVTT 領域アンカー設定が与えられない場合、 アンカーは既定で 0%、100%（すなわち左下隅）になる。

WebVTT 領域ビューポートアンカー設定は、 次の構成要素から、指定された 順序で構成される:

  1. 文字列 "viewportanchor"。

  2. U+003A COLON 文字 (:)。

  3. WebVTT パーセント値。

  4. U+002C COMMA 文字 (,)。

  5. WebVTT パーセント値。

WebVTT 領域ビューポートアンカー設定は、 領域アンカー点が固定される動画ビューポート内の点を指定する 2 つのパーセント値のタプルを提供する。最初のパーセント値は動画ビューポートボックスの左上隅から x 次元を測り、2 つ目のパーセント値は y 次元を測る。 領域ビューポートアンカーが与えられない場合、既定で 0%、100%（すなわち左下隅）になる。

ブラウザーでは、領域は動画ビューポートに対して絶対配置された CSS ボックスに対応する。 すなわち、動画ビューポートを表す相対配置ボックスがあり、そのボックスを基準として 領域が絶対配置される。オーバーフローは隠される。

WebVTT 領域 スクロール設定は、次の構成要素から、指定された順序で 構成される:

  1. 文字列 "scroll"。

  2. U+003A COLON 文字 (:)。

  3. 文字列 "up"。

WebVTT 領域スクロール設定は、 領域内に描画されたキューが初期描画位置から移動し、ロールアップ、すなわち 動画ビューポートの上方向へ移動することを許可するかどうかを指定する。 scroll 設定が省略された場合、キューは描画位置から移動しない。

キューは、既存のキュー行の下に 1 行ずつ領域へ追加される。 既存の描画済みキュー行が削除され、かつそれが別のすでに描画されたキュー行の上にあった場合、 そのキュー行はその空間へ移動し、その結果、指定された方向にスクロールする。 新しいキュー行を領域へ追加するための十分な空間がない場合、 最上部のキュー行は可視領域の外へ押し出される（したがって overflow:hidden の中へ移動するにつれて徐々に見えなくなる）。これにより最終的に 新しいキュー行のための空間ができ、それを追加できるようになる。

スクロール方向がない場合、キュー行は領域の下部にある行に最も近い 空行に追加される。空行が利用できない場合、最も古い行が 置き換えられる。

4.4. WebVTT キュー設定

WebVTT キュー設定は、 WebVTT キュー設定リストの一部であり、 キューボックスの位置および揃え、ならびにその内部のキューテキストに関する 設定オプションを提供する。

たとえば、WebVTT キュー設定の集合により、キューボックスを左に揃えたり、 右上に配置しつつ内部のキューテキストを中央揃えにしたりできる。

WebVTT キュー設定 リストに現れてよい、現在利用可能な WebVTT キュー設定は次のとおりである:

これらの各設定は、WebVTT キュー設定 リストごとに 2 回以上含まれてはならない。

WebVTT 縦書きテキストキュー設定は、次の構成要素から、指定された順序で 構成される WebVTT キュー設定である:

  1. WebVTT キュー設定名としての文字列 "vertical"。

  2. U+003A COLON 文字 (:)。

  3. WebVTT キュー設定値として、次の文字列のいずれか: "rl"、"lr"。

WebVTT 縦書きテキストキュー設定は、 水平テキストレイアウトではなく縦書きテキスト レイアウトを使用するようにキューを設定する。縦書きテキストレイアウトは、たとえば日本語で使用されることがある。 既定は水平レイアウトである。

WebVTT 行キュー 設定は、次の構成要素から、指定された順序で 構成される:

  1. WebVTT キュー設定名としての文字列 "line"。

  2. U+003A COLON 文字 (:)。

  3. WebVTT キュー設定値として:
    1. オフセット値。次のいずれか:
      動画ビューポートに対する特定のオフセットを表す場合

      WebVTT パーセント値。

      または行番号を表す場合
      1. 任意で U+002D HYPHEN-MINUS 文字 (-)。
      2. 1 つ以上の ASCII 数字。
    2. 次の構成要素からなる任意の揃え値:
      1. U+002C COMMA 文字 (,)。
      2. 次の文字列のいずれか: "start"、"center"、 "end"

WebVTT 行キュー設定は、 書字 方向に直交する方向で、動画ビューポートの端からのキューボックスのオフセットを設定する。 水平キューでは、これは動画ビューポートの上端からの垂直オフセットであり、 垂直キューでは水平オフセットである。このオフセットは、start、center、または end のキューボックスに対するものであり、 WebVTT キュー行揃え値に依存する。既定では start である。 オフセットは、関連する書字モード依存の動画ビューポート寸法に対する割合、 または行番号のいずれかとして与えられる。行番号はキューの最初の行のサイズに基づく。 正の行番号は動画ビューポートの開始側から数え（最初の行は 0 番）、 負の行番号は動画ビューポートの終了側から数える（最後の行は −1 番）。

WebVTT 位置 キュー設定は、次の構成要素から、指定された順序で 構成される:

  1. WebVTT キュー設定名としての文字列 "position"。

  2. U+003A COLON 文字 (:)。

  3. WebVTT キュー設定値として:
    1. WebVTT パーセント値からなる位置値。
    2. 次の構成要素からなる任意の揃え値:
      1. U+002C COMMA 文字 (,)。
      2. 次の文字列のいずれか: "line-left"、"center"、 "line-right"

WebVTT 位置キュー設定は、 WebVTT 行キュー設定に直交する方向における キューボックスの インデント位置を設定する。水平キューでは、これは水平位置である。 キュー位置は動画ビューポートに対する割合として与えられる。この配置は、キューの 算出位置揃えに応じて、キューボックスの line-left、center、または line-rightに対するものであり、 その算出位置揃えは WebVTT 位置キュー設定によって上書きされる。

WebVTT サイズキュー 設定は、次の構成要素から、指定された順序で 構成される:

  1. WebVTT キュー設定名としての文字列 "size"。

  2. U+003A COLON 文字 (:)。

  3. WebVTT キュー設定値として: WebVTT パーセント値。

WebVTT サイズキュー設定は、 WebVTT 位置キュー設定と同じ方向における キューボックスのサイズを設定する。 水平 キューでは、これは キューボックスの幅である。それは 動画ビューポートの幅に対する割合として与えられる。

WebVTT 揃えキュー設定は、次の構成要素から、指定された順序で 構成される:

  1. WebVTT キュー設定名としての文字列 "align"。

  2. U+003A COLON 文字 (:)。

  3. WebVTT キュー設定値として、次の文字列のいずれか: "start", "center", "end", "left", "right"

WebVTT 揃えキュー設定は、 キュー内のテキストの揃えを設定する。"start" および "end" キーワードは、 キューテキストの各行の基底方向に相対的である。左から右の英語テキストでは、 "start" は左揃えを意味する。

WebVTT 領域キュー 設定は、次の構成要素から、指定された順序で 構成される:

  1. WebVTT キュー設定名としての文字列 "region"。

  2. U+003A COLON 文字 (:)。

  3. WebVTT キュー設定値として: WebVTT 領域 識別子。

WebVTT 領域キュー設定は、キューが "vertical"、"line"、または "size" キュー設定を持たない限り、領域の識別子を参照することによって キューを領域の一部にするよう設定する。 キューが領域の一部である場合、"position" および "align" に対するそのキュー設定は、 領域ボックスに相対的にキュー内のラインボックスに適用され、キューボックスの幅および高さは ビューポート寸法ではなく領域寸法に相対的に計算される。

4.5. キュー列のプロパティ

4.5.1. 入れ子のキューのみを使用する WebVTT ファイル

すべてのキューが次の規則に従う WebVTT ファイルは、 入れ子のキューのみを使用する WebVTT ファイルであると言う:

開始および終了時刻オフセット（それぞれ x1, y1）および（x2, y2）を持つ任意の 2 つのキュー cue1 および cue2 が与えられたとき、

次の例はこの定義に一致する:

WEBVTT

00:00.000 --> 01:24.000
Introduction

00:00.000 --> 00:44.000
Topics

00:44.000 --> 01:19.000
Presenters

01:24.000 --> 05:00.000
Scrolling Effects

01:35.000 --> 03:00.000
Achim's Demo

03:00.000 --> 05:00.000
Timeline Panel

この WebVTT ファイル内のキューを木構造として表現できることに注目:

ファイルにこのような形で表現できないキューがある場合、それらは 入れ子のキューのみを使用する WebVTT ファイルの 定義に一致しない。たとえば: 

WEBVTT

00:00.000 --> 01:00.000
The First Minute

00:30.000 --> 01:30.000
The Final Minute

この 90 秒の例では、2 つのキューは部分的に重なっており、最初のキューは 2 つ目のキューが終わる前に終わり、2 つ目のキューは最初のキューが終わる前に始まる。 したがって、これは 入れ子のキューのみを使用する WebVTT ファイルではない。

4.6. WebVTT ファイルの種類

WebVTT ファイルの構文定義は、キューを混在させた多種多様な WebVTT ファイルの作成を許可する。 しかし、通常作成される WebVTT ファイルの種類は、その小さな部分集合のみである。

適合性チェッカーは、WebVTT ファイルを検証する際、 これらの種類を検証するために構文検査を制限することを提案してよい。

4.6.1. メタデータコンテンツを使用する WebVTT ファイル

すべてのキューが WebVTT メタデータ テキストである キューペイロードを持つ WebVTT ファイルは、 メタデータコンテンツを使用する WebVTT ファイルであると言う。

4.6.2. チャプタータイトルテキストを使用する WebVTT ファイル

チャプタータイトルテキストを使用する WebVTT ファイルは、入れ子のキューのみを使用する WebVTT ファイルであり、 そのすべてのキューが WebVTT チャプタータイトルテキストである キューペイロードを持つ。

4.6.3. キャプションまたは字幕キューテキストを使用する WebVTT ファイル

すべてのキューが WebVTT キャプションまたは 字幕キューテキストである キューペイロードを持つ WebVTT ファイルは、 キャプションまたは字幕キュー テキストを使用する WebVTT ファイルであると言う。

5. WebVTT キャプションまたは字幕キュー構成要素の既定クラス

多くのキャプション形式には、限定されたテキスト色および テキスト背景色の部分集合を指定する単純な方法がある。したがって、WebVTT 仕様は、 作者が色付きテキストおよびテキスト背景を標準的な方法でマークアップできるように、 WebVTT キャプションまたは字幕キュー構成要素のための 既定の キュー 構成要素クラス名の集合を利用可能にする。

CSS スタイルシートをサポートするユーザーエージェントは、ユーザーエージェント スタイルシートを追加することにより、この節を実装してよい。

5.1. 既定のテキスト色

下の表の行の最初のセルにあるものと一致する 1 つ以上の クラス名を持つ WebVTT キャプションまたは字幕キュー構成要素は、 その color プロパティを、表示ヒントとして、その行の 2 番目のセルの値に設定しなければならない:

クラス名 color 値
white rgba(255,255,255,1)
lime rgba(0,255,0,1)
cyan rgba(0,255,255,1)
red rgba(255,0,0,1)
yellow rgba(255,255,0,1)
magenta rgba(255,0,255,1)
blue rgba(0,0,255,1)
black rgba(0,0,0,1)

キャプション制作の背景がある場合でも混同しないこと: lime クラスの色は、伝統的にキャプション制作で green という名前で使用されてきたものである（例: 608/708）。

既定の暗い背景では、blue および black クラスを使用しないこと。 読めないテキストになるためである。一般に、色のコントラストに関する指針については WCAG [WCAG20] を参照し、テキスト色、背景色、 さらに動画の色も考慮に入れるようにしてほしい。

5.2. 既定のテキスト背景色

下の表の行の最初のセルにあるものと一致する 1 つ以上の クラス名を持つ WebVTT キャプションまたは字幕キュー構成要素は、 その background-color プロパティを、表示ヒントとして、その行の 2 番目のセルの値に 設定しなければならない:

クラス名 background 値
bg_white rgba(255,255,255,1)
bg_lime rgba(0,255,0,1)
bg_cyan rgba(0,255,255,1)
bg_red rgba(255,0,0,1)
bg_yellow rgba(255,255,0,1)
bg_magenta rgba(255,0,255,1)
bg_blue rgba(0,0,255,1)
bg_black rgba(0,0,0,1)

bg_lime クラスの色は、伝統的にキャプション制作で green という名前で使用されてきたものである（例: 608/708）。

色および背景クラスの カスケードを決定する目的では、 出現順序がクラスのカスケードを決定する。

この例は、クラスの使用方法を示す。

WEBVTT

02:00.000 --> 02:05.000
<c.yellow.bg_blue>This is yellow text on a blue background</c>

04:00.000 --> 04:05.000
<c.yellow.bg_blue.magenta.bg_black>This is magenta text on a black background</c>

既定クラスは作者によって変更できる。たとえば ::cue(.yellow) {color:cyan} は、 .yellow クラス付きのすべてのテキストを cyan に変更する。

6. 構文解析

WebVTT ファイルの構文解析は、キャプション、字幕、 チャプター、メタデータを含むすべての種類の WebVTT ファイルで同じである。ほとんどの手順は、チャプターまたはメタデータファイルではスキップされる。

6.1. WebVTT ファイル構文解析

入力バイトストリーム、text track キューリスト output、および CSS スタイル シートの集合 stylesheets が与えられた WebVTT パーサーは、そのバイト ストリームを UTF-8 デコードアルゴリズムを用いて復号し、その結果得られる 文字列を、以下の WebVTT パーサーアルゴリズムに従って構文解析しなければならない。これにより、WebVTT キューが output に追加され、CSS スタイル シートが stylesheets に追加される。 [RFC3629]

WebVTT パーサー、特に その変換および構文解析手順は通常、 リソースのダウンロードに伴って入力バイトストリームが逐次更新される形で、 非同期に実行される。これは 逐次 WebVTT パーサーと呼ばれる。

WebVTT パーサーは、提供された バイトストリームを構文解析する前にファイル署名を検証する。その ストリームにこの WebVTT ファイル署名がない場合、パーサーは中止する。

WebVTT パーサー アルゴリズムは次のとおりである:

  1. input を、Unicode への変換後、かつ次の 変換が適用された、構文解析される文字列とする:

    • すべての U+0000 NULL 文字を U+FFFD REPLACEMENT CHARACTER に置換する。

    • 各 U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) 文字対を単一の U+000A LINE FEED (LF) 文字に置換する。

    • 残りのすべての U+000D CARRIAGE RETURN 文字を U+000A LINE FEED (LF) 文字に置換する。

  2. position を input 内へのポインターとし、初期状態では 文字列の先頭を指すものとする。 逐次 WebVTT パーサーにおいて、このアルゴリズム（または それが使用するさらなるアルゴリズム）が position ポインターを移動する場合、ユーザーエージェントは、 アルゴリズムが input 文字列の末尾を超えて 読み取ることが決してないように、ポインターを移動する前に、バイト ストリームから適切な追加文字が input に追加されるまで待たなければならない。 バイトストリームが終了し、すべての文字が input に追加された後は、アルゴリズムがそう指示した場合に、position ポインターを input の末尾を超えて移動してよい。

  3. seen cue を false とする。

  4. input の長さが 6 文字未満の場合、これらの手順を中止する。ファイルは正しい WebVTT ファイル署名で始まっておらず、したがって正常に 処理されなかった。

  5. input の長さがちょうど 6 文字であり、かつ "WEBVTT" と正確に等しくない場合、 これらの手順を中止する。ファイルは正しい WebVTT ファイル署名で始まっておらず、 したがって正常に処理されなかった。

  6. input の長さが 6 文字を超え、かつ先頭 6 文字が "WEBVTT" と正確に等しくない場合、または 7 文字目が U+0020 SPACE 文字、U+0009 CHARACTER TABULATION（tab）文字、または U+000A LINE FEED (LF) 文字でない場合、これらの手順を中止する。 ファイルは正しい WebVTT ファイル署名で始まっておらず、したがって 正常に処理されなかった。

  7. U+000A LINE FEED (LF) 文字ではない符号位置の 列を収集する。

  8. position が input の末尾を超えている場合、これらの手順を中止する。ファイルは 正常に処理されたが、有用なデータを含まないため、WebVTT キューは output に追加されなかった。

  9. position が示す文字は U+000A LINE FEED (LF) 文字である。 position を input 内の次の文字へ進める。

  10. position が input の末尾を超えている場合、これらの手順を中止する。ファイルは 正常に処理されたが、有用なデータを含まないため、WebVTT キューは output に追加されなかった。

  11. Header: position が示す文字が U+000A LINE FEED (LF) 文字でない場合、in header フラグを設定して WebVTT ブロックを収集する。そうでない場合、 position を input 内の次の文字へ進める。

  12. U+000A LINE FEED (LF) 文字である 符号位置の列を収集する。

  13. regions を空の text track 領域リストとする。

  14. Block loop: position が input の末尾を超えていない間:

    1. WebVTT ブロックを収集する。返された値を block とする。

    2. block が WebVTT キューである場合、block を text track キューリスト output に追加する。

    3. そうでなく、block が CSS スタイルシートである場合、block を stylesheets に追加する。

    4. そうでなく、block が WebVTT 領域オブジェクトである場合、block を regions に追加する。

    5. U+000A LINE FEED (LF) 文字である 符号位置の列を収集する。

  15. End: ファイルは終了した。これらの手順を中止する。WebVTT パーサーは完了した。 ファイルは正常に処理された。

上記のアルゴリズムが、任意で in header フラグを設定して WebVTT ブロックを収集すると言う場合、ユーザーエージェントは次の手順を実行しなければならない:

  1. input、position、seen cue および regions を、これらの手順を呼び出したアルゴリズム内の 同名の変数と同じものとする。

  2. line count を 0 とする。

  3. previous position を position とする。

  4. line を空文字列とする。

  5. buffer を空文字列とする。

  6. seen EOF を false とする。

  7. seen arrow を false とする。

  8. cue を null とする。

  9. stylesheet を null とする。

  10. region を null とする。

  11. Loop: ループ内で次の下位手順を実行する:

    1. U+000A LINE FEED (LF) 文字ではない符号位置の列を収集する。 もしあれば、それらの文字を line とする。

    2. line count を 1 増やす。

    3. position が input の末尾を超えている場合、seen EOF を true とする。 そうでない場合、position が示す文字は U+000A LINE FEED (LF) 文字である。 position を input 内の次の 文字へ進める。

    4. line が 3 文字の部分文字列 "-->"（U+002D HYPHEN-MINUS、 U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN）を含む場合、次の下位手順を実行する:

      1. in header が設定されておらず、かつ次の条件の少なくとも 1 つが true である場合:

        • line count が 1 である

        • line count が 2 であり、seen arrow が false である

        ...その場合、次の下位手順を実行する:

        1. seen arrow を true とする。

        2. previous position を position とする。

        3. Cue creation: cue を新しい WebVTT キューとし、 次のように初期化する:

          1. cue の text track cue identifier を buffer とする。

          2. cue の text track cue pause-on-exit flag を false とする。

          3. cue の WebVTT キュー領域を null とする。

          4. cue の WebVTT キュー書字 方向を horizontal とする。

          5. cue の WebVTT キュー snap-to-lines フラグを true とする。

          6. cue の WebVTT キュー行を auto とする。

          7. cue の WebVTT キュー行 揃えを start alignment とする。

          8. cue の WebVTT キュー位置を auto とする。

          9. cue の WebVTT キュー位置 揃えを auto とする。

          10. cue の WebVTT キューサイズを 100 とする。

          11. cue の WebVTT キューテキスト 揃えを center alignment とする。

          12. cue の キューテキストを空文字列とする。

        4. line から WebVTT キュー タイミングおよび設定を収集する。cue について regions を 使用する。 それが失敗した場合、cue を null とする。そうでない場合、buffer を空文字列とし、seen cue を true とする。

        そうでない場合、position を previous position とし、 loop から抜ける。

    5. そうでなく、line が空文字列である場合、loop から抜ける。

    6. そうでない場合、次の下位手順を実行する:

      1. in header が設定されておらず、かつ line count が 2 である場合、次の下位手順を実行する:

        1. seen cue が false であり、buffer が部分文字列 "STYLE" （U+0053 LATIN CAPITAL LETTER S、U+0054 LATIN CAPITAL LETTER T、U+0059 LATIN CAPITAL LETTER Y、U+004C LATIN CAPITAL LETTER L、U+0045 LATIN CAPITAL LETTER E）で始まり、かつ buffer 内の残りの 文字（ある場合）がすべて ASCII 空白である場合、次の 下位手順を実行する:

          1. stylesheet を、次のプロパティで CSS スタイルシートを 作成する結果とする: [CSSOM]

            location
            null
            parent CSS style sheet
            null
            owner node
            null
            owner CSS rule
            null
            media
            空文字列。
            title
            空文字列。
            alternate flag
            Unset.
            origin-clean flag
            Set.

          2. buffer を空文字列とする。

        2. そうでなく、seen cue が false であり、buffer が 部分文字列 "REGION"（U+0052 LATIN CAPITAL LETTER R、U+0045 LATIN CAPITAL LETTER E、U+0047 LATIN CAPITAL LETTER G、U+0049 LATIN CAPITAL LETTER I、U+004F LATIN CAPITAL LETTER O、U+004E LATIN CAPITAL LETTER N）で始まり、かつ buffer 内の残りの文字 （ある場合）がすべて ASCII 空白である場合、次の下位手順を実行する:

          1. Region creation: region を新しい WebVTT 領域とする。

          2. region の 識別子を空 文字列とする。

          3. region の 幅を 100 とする。

          4. region の 行数を 3 とする。

          5. region の アンカー点を (0,100) とする。

          6. region の ビューポートアンカー 点を (0,100) とする。

          7. region の スクロール値を none とする。

          8. buffer を空文字列とする。

      2. buffer が空文字列でない場合、U+000A LINE FEED (LF) 文字を buffer に追加する。

      3. line を buffer に追加する。

      4. previous position を position とする。

    7. seen EOF が true である場合、loop から抜ける。

  12. cue が null でない場合、cue の キューテキストを buffer とし、 cue を返す。

  13. そうでなく、stylesheet が null でない場合、buffer から スタイルシートを構文解析する。 それが規則のリストを返した場合、そのリストを stylesheet の CSS 規則として割り当てる。そうでない場合、 stylesheet の CSS 規則を空のリストに設定する。[CSSOM] [CSS-SYNTAX-3] 最後に、 stylesheet を返す。

  14. そうでなく、region が null でない場合、buffer から WebVTT 領域設定を収集する。 結果について region を使用する。region から WebVTT 領域オブジェクトを構築し、 それを返す。

  15. そうでない場合、null を返す。

6.2. WebVTT 領域設定 構文解析

WebVTT パーサーアルゴリズムが、文字列 input から text track のために WebVTT 領域設定を収集すると言う場合、ユーザーエージェントは次のアルゴリズムを実行しなければならない。

WebVTT 領域 オブジェクトは、WebVTT 領域を表す概念的構成物であり、 WebVTT ノード オブジェクトのリストのルートノードとして使用される。このアルゴリズムは WebVTT 領域 オブジェクトのリストを返す。

  1. settings を、input を 空白で分割する結果とする。

  2. リスト settings 内の各トークン setting について、次の下位手順を実行する:

    1. setting が U+003A COLON 文字 (:) を含まない場合、または setting 内の最初の U+003A COLON 文字 (:) が setting の最初または最後の文字である場合、next setting とラベル付けされた 手順へジャンプする。

    2. name を、setting の先頭から、その文字列内の 最初の U+003A COLON 文字 (:) の直前までの先頭部分文字列とする。

    3. value を、その文字列内の最初の U+003A COLON 文字 (:) の直後の文字から始まる setting の末尾部分文字列とする。

    4. name の値に適用される適切な下位手順を、次のように実行する:

      name が "id" に 大文字小文字を区別して一致する場合

      region の 識別子を value とする。

      そうでなく、name が "width" に 大文字小文字を区別して一致する場合

      value から パーセント文字列を構文解析することが percentage を返す場合、region の WebVTT 領域幅を percentage とする。

      そうでなく、name が "lines" に 大文字小文字を区別して一致する場合

      1. value が ASCII 数字以外の文字を含む場合、 next setting とラベル付けされた手順へジャンプする。

      2. value を整数として解釈し、number をその 数とする。

      3. region の WebVTT 領域行数を number とする。

      そうでなく、name が "regionanchor" に 大文字小文字を区別して一致する場合

      1. value が U+002C COMMA 文字 (,) を含まない場合、 next setting とラベル付けされた手順へジャンプする。

      2. anchorX を、value の先頭から、その文字列内の最初の U+002C COMMA 文字 (,) の直前までの先頭部分文字列とする。

      3. anchorY を、その文字列内の最初の U+002C COMMA 文字 (,) の直後の文字から始まる value の末尾部分文字列とする。

      4. anchorX から パーセント文字列を構文解析すること、または anchorY から パーセント文字列を構文解析することが percentage を返さない場合、next setting とラベル付けされた手順へジャンプする。

      5. region の WebVTT 領域アンカー点を、 anchorX および anchorY から計算された percentage 値の タプルとする。

      そうでなく、name が "viewportanchor" に 大文字小文字を区別して一致する場合

      1. value が U+002C COMMA 文字 (,) を含まない場合、 next setting とラベル付けされた手順へジャンプする。

      2. viewportanchorX を、value の先頭から、その文字列内の 最初の U+002C COMMA 文字 (,) の直前までの先頭部分文字列とする。

      3. viewportanchorY を、その文字列内の最初の U+002C COMMA 文字 (,) の直後の文字から始まる value の末尾部分文字列とする。

      4. viewportanchorX から パーセント文字列を構文解析すること、または viewportanchorY から パーセント 文字列を構文解析することが percentage を返さない場合、 next setting とラベル付けされた手順へジャンプする。

      5. region の WebVTT 領域ビューポート アンカー 点を、viewportanchorX および viewportanchorY から計算された percentage 値のタプルとする。

      そうでなく、name が "scroll" に 大文字小文字を区別して一致する場合

      1. value が文字列 "up" に 大文字小文字を区別して一致する場合、 region の スクロール値を up とする。

    5. Next setting: 次の設定があれば、それへ進む。

パーセント文字列を構文解析する規則は次のとおりである。 これは 0..100 の範囲内の数値、または何も返さないかのどちらかである。 アルゴリズムのいずれかの時点で「失敗する」と言う場合、これは その時点で中止され、何も返さないことを意味する。

  1. input を、構文解析される文字列とする。

  2. input が WebVTT パーセント値の構文に一致しない場合、失敗する。

  3. input から最後の文字を削除する。

  4. percentage を、浮動小数点数値を構文解析するための規則を用いて input を構文解析した結果とする。[HTML]

  5. percentage がエラーである場合、0 未満である場合、または 100 より大きい場合、失敗する。

  6. percentage を返す。

6.3. WebVTT キュー タイミングおよび設定構文解析

上記のアルゴリズムが、文字列 input から、text track 領域リスト regions を使用して WebVTT キュー cue のために WebVTT キュータイミングおよび設定を収集すると言う場合、 ユーザー エージェントは次のアルゴリズムを実行しなければならない。

  1. input を、構文解析される文字列とする。

  2. position を input 内へのポインターとし、初期状態では 文字列の先頭を指すものとする。

  3. 空白をスキップする。

  4. WebVTT タイムスタンプを収集する。そのアルゴリズムが失敗した場合、 これらの手順を中止して failure を返す。そうでない場合、cue の text track cue start timeを、収集された 時刻とする。

  5. 空白をスキップする。

  6. position にある文字が U+002D HYPHEN-MINUS 文字 (-) でない場合、これらの手順を中止して failure を返す。そうでない場合、 position を 1 文字前方へ移動する。

  7. position にある文字が U+002D HYPHEN-MINUS 文字 (-) でない場合、これらの手順を中止して failure を返す。そうでない場合、 position を 1 文字前方へ移動する。

  8. position にある文字が U+003E GREATER-THAN SIGN 文字 (>) でない場合、これらの手順を中止して failure を返す。そうでない場合、 position を 1 文字前方へ移動する。

  9. 空白をスキップする。

  10. WebVTT タイムスタンプを収集する。そのアルゴリズムが 失敗した場合、これらの手順を中止して failure を返す。そうでない場合、cue の text track cue end timeを、収集された 時刻とする。

  11. remainder を、position から始まる input の末尾部分文字列とする。

  12. remainder から WebVTT キュー設定を構文解析する。 cue について regions を使用する。

ユーザーエージェントが、text track 領域リスト regions を使用して text track cue cue のために、 文字列 input から WebVTT キュー設定を構文解析する場合、 ユーザーエージェントは次の手順を実行しなければならない:

  1. settings を、input を 空白で分割する結果とする。

  2. リスト settings 内の各トークン setting について、次の下位手順を実行する:

    1. setting が U+003A COLON 文字 (:) を含まない場合、または setting 内の最初の U+003A COLON 文字 (:) が setting の最初または最後の文字である場合、 next setting とラベル付けされた 手順へジャンプする。

    2. name を、setting の先頭から、その文字列内の最初の U+003A COLON 文字 (:) の直前までの先頭部分文字列とする。

    3. value を、その文字列内の最初の U+003A COLON 文字 (:) の直後の文字から始まる setting の末尾部分文字列とする。

    4. name の値に適用される適切な下位手順を、次のように実行する:

      name が "region" に 大文字小文字を区別して一致する場合

      1. cue の WebVTT キュー領域を、regions 内で WebVTT 領域のうち、その WebVTT 領域識別子が value である最後のものがあればそれとし、なければ null とする。

      name が "vertical" に 大文字小文字を区別して一致する場合

      1. value が文字列 "rl" に 大文字小文字を区別して一致する場合、 cue の WebVTT キュー書字 方向を vertical growing left とする。

      2. そうでなく、value が文字列 "lr" に 大文字小文字を区別して一致する場合、cue の WebVTT キュー書字 方向を vertical growing right とする。

      3. cue の WebVTT キュー書字 方向が horizontal でない場合、 cue の WebVTT キュー領域を null とする（垂直 領域は存在しない）。

      name が "line" に 大文字小文字を区別して一致する場合

      1. value が U+002C COMMA 文字 (,) を含む場合、 linepos を、その文字列内の最初の U+002C COMMA 文字 (,) の直前までの value の先頭 部分文字列とし、linealign を、その文字列内の 最初の U+002C COMMA 文字 (,) の直後の文字から始まる value の末尾部分文字列とする。

      2. そうでない場合、linepos を完全な value 文字列とし、 linealign を null とする。

      3. linepos が少なくとも 1 つの ASCII 数字を含まない場合、next setting とラベル付けされた手順へジャンプする。

      4. linepos の最後の文字が U+0025 PERCENT SIGN 文字 (%) である場合

        linepos から パーセント 文字列を構文解析することが失敗しない場合、number を 返された percentage とする。そうでなければ next setting とラベル付けされた手順へジャンプする。

        そうでない場合

        1. linepos が、U+002D HYPHEN-MINUS 文字 (-)、ASCII 数字、および U+002E DOT 文字 (.) 以外の文字を含む場合、next setting とラベル付けされた手順へジャンプする。

        2. linepos 内の最初の文字以外のいずれかの文字が U+002D HYPHEN-MINUS 文字 (-) である場合、next setting とラベル付けされた手順へジャンプする。

        3. U+002E DOT 文字 (.) が複数ある場合、 next setting とラベル付けされた手順へジャンプする。

        4. U+002E DOT 文字 (.) があり、その前の文字または その後の文字が ASCII 数字でない場合、または U+002E DOT 文字 (.) が最初または 最後の文字である場合、next setting とラベル付けされた手順へジャンプする。

        5. number を、浮動小数点数値を構文解析するための規則を用いて linepos を構文解析した結果とする。[HTML]

        6. number がエラーである場合、next setting とラベル付けされた手順へジャンプする。

      5. linealign が文字列 "start" に 大文字小文字を区別して一致する場合、 cue の WebVTT キュー行揃えを start alignment とする。

      6. そうでなく、linealign が文字列 "center" に 大文字小文字を区別して一致する場合、cue の WebVTT キュー行揃えを center alignment とする。

      7. そうでなく、linealign が文字列 "end" に 大文字小文字を区別して一致する場合、cue の WebVTT キュー行揃えを end alignment とする。

      8. そうでなく、linealign が null でない場合、next setting とラベル付けされた手順へジャンプする。

      9. cue の WebVTT キュー行を number とする。

      10. linepos の最後の文字が U+0025 PERCENT SIGN 文字 (%) である場合、 cue の WebVTT キュー snap-to-lines フラグを false とする。そうでない場合、true とする。

      11. cue の WebVTT キュー行が auto でない場合、 cue の WebVTT キュー領域を null とする（キューは 行オフセットで明示的に配置されたため、領域から外れる）。

      name が "position" に 大文字小文字を区別して一致する場合

      1. value が U+002C COMMA 文字 (,) を含む場合、 colpos を、その文字列内の最初の U+002C COMMA 文字 (,) の直前までの value の先頭 部分文字列とし、colalign を、その文字列内の 最初の U+002C COMMA 文字 (,) の直後の文字から始まる value の末尾部分文字列とする。

      2. そうでない場合、colpos を完全な value 文字列とし、 colalign を null とする。

      3. colpos から パーセント文字列を構文解析することが 失敗しない場合、number を 返された percentage とする。そうでなければ next setting とラベル付けされた手順へジャンプする（position の値は特殊値 auto のままである）。

      4. colalign が文字列 "line-left" に 大文字小文字を区別して一致する場合、cue の WebVTT キュー位置 揃えを line-left alignment とする。

      5. そうでなく、colalign が文字列 "center" に 大文字小文字を区別して一致する場合、cue の WebVTT キュー位置 揃えを center alignment とする。

      6. そうでなく、colalign が文字列 "line-right" に 大文字小文字を区別して一致する場合、cue の WebVTT キュー位置 揃えを line-right alignment とする。

      7. そうでなく、colalign が null でない場合、next setting とラベル付けされた手順へジャンプする。

      8. cue の position を number とする。

      name が "size" に 大文字小文字を区別して一致する場合

      1. value から パーセント文字列を構文解析することが 失敗しない場合、number を 返された percentage とする。そうでなければ next setting とラベル付けされた手順へジャンプする。

      2. cue の WebVTT キューサイズを number とする。

      3. cue の WebVTT キューサイズが 100 でない場合、 cue の WebVTT キュー領域を null とする（キューは明示的にサイズ指定されたため、領域から外れる）。

      name が "align" に 大文字小文字を区別して一致する場合

      1. value が文字列 "start" に 大文字小文字を区別して一致する場合、 cue の WebVTT キューテキスト揃えを start alignment とする。

      2. value が文字列 "center" に 大文字小文字を区別して一致する場合、 cue の WebVTT キューテキスト揃えを center alignment とする。

      3. value が文字列 "end" に 大文字小文字を区別して一致する場合、 cue の WebVTT キューテキスト揃えを end alignment とする。

      4. value が文字列 "left" に 大文字小文字を区別して一致する場合、 cue の WebVTT キューテキスト揃えを left alignment とする。

      5. value が文字列 "right" に 大文字小文字を区別して一致する場合、 cue の WebVTT キューテキスト揃えを right alignment とする。

    5. Next setting: 次のトークンがあれば、それへ進む。

この仕様が、ユーザーエージェントは WebVTT タイムスタンプを収集すると言う場合、 ユーザーエージェントは次の手順を実行しなければならない:

  1. input および position を、これらの手順を呼び出した アルゴリズム内の同名の変数と同じものとする。

  2. most significant units を minutes とする。

  3. position が input の末尾を超えている場合、エラーを返してこれらの手順を中止する。

  4. position が示す文字が ASCII 数字でない場合、エラーを返し、 これらの手順を中止する。

  5. 符号位置の列を収集する。それらは ASCII 数字であるものとし、収集された部分文字列を string とする。

  6. string を基数 10 の整数として解釈する。value1 をその 整数とする。

  7. string の長さがちょうど 2 文字でない場合、または value1 が 59 より大きい場合、most significant units を hours とする。

  8. position が input の末尾を超えている場合、または position にある文字が U+003A COLON 文字 (:) でない場合、エラーを返してこれらの手順を中止する。そうでない場合、position を 1 文字前方へ移動する。

  9. 符号位置の列を収集する。それらは ASCII 数字であるものとし、収集された部分文字列を string とする。

  10. string の長さがちょうど 2 文字でない場合、エラーを返してこれらの 手順を中止する。

  11. string を基数 10 の整数として解釈する。value2 をその 整数とする。

  12. most significant units が hours である場合、または position が input の末尾を超えておらず、かつ position にある文字が U+003A COLON 文字 (:) である場合、次の下位手順を実行する:

    1. position が input の末尾を超えている場合、または position にある文字が U+003A COLON 文字 (:) でない場合、エラーを返してこれらの手順を中止する。そうでない場合、 position を 1 文字前方へ移動する。

    2. 符号位置の列を収集する。 それらは ASCII 数字であるものとし、収集された部分文字列を string とする。

    3. string の長さがちょうど 2 文字でない場合、エラーを返してこれらの 手順を中止する。

    4. string を基数 10 の整数として解釈する。value3 をその 整数とする。

    そうでない場合（most significant units が hours でなく、かつ position が input の末尾を 超えている、または position にある文字が U+003A COLON 文字 (:) でない場合）、value3 に value2 の値を持たせ、 次に value2 に value1 の値を持たせ、次に value1 を 0 とする。

  13. position が input の末尾を超えている場合、または position にある文字が U+002E FULL STOP 文字 (.) でない場合、エラーを返してこれらの手順を中止する。そうでない場合、 position を 1 文字前方へ移動する。

  14. 符号位置の列を収集する。それらは ASCII 数字であるものとし、収集された部分文字列を string とする。

  15. string の長さがちょうど 3 文字でない場合、エラーを返してこれらの 手順を中止する。

  16. string を基数 10 の整数として解釈する。value4 をその 整数とする。

  17. value2 が 59 より大きい場合、または value3 が 59 より大きい場合、エラーを返してこれらの手順を中止する。

  18. result を value1×60×60 + value2×60 + value3 + value4∕1000 とする。

  19. result を返す。

6.4. WebVTT キューテキスト構文解析 規則

WebVTT ノードオブジェクトは、 キュー テキストの構成要素を表すために使用される概念的構成物であり、その処理を基礎となる構文に言及せずに記述できるようにする。

WebVTT ノードオブジェクトには、大きく 2 つのクラスがある: WebVTT 内部ノード オブジェクトおよび WebVTT リーフノードオブジェクトである。

WebVTT 内部ノードオブジェクトは、さらなる WebVTT ノードオブジェクトを含むことができるものである。これは概念的に HTML または DOM における要素に似ている。WebVTT 内部ノードオブジェクトは、 子である WebVTT ノードオブジェクトの順序付きリストを持つ。WebVTT 内部ノードオブジェクトは、その子の親であると言う。循環は発生せず、そのように構築された 親子関係は木構造を形成する。WebVTT 内部ノード オブジェクトは、クラス名の順序付きリストも持ち、これはそれらの 適用可能 クラスとして知られる。また、言語も持ち、これはそれらの 適用可能言語として知られ、BCP 47 言語タグとして 解釈される。 [BCP47]

ユーザーエージェントは、それが有効な言語タグでない場合、あるいは整形式の言語タグでさえない場合でも、 適用可能言語として言語タグを追加する。 [BCP47]

WebVTT 内部ノード オブジェクトには、いくつかの具体的なクラスがある:

WebVTT ノードオブジェクトのリスト

これらは、WebVTT ノード オブジェクトの木のルートノードとして使用される。

WebVTT クラスオブジェクト

これらは、適用可能 クラスを用いてキューの一部を注釈するために使用され、イタリックや太字などのさらなる意味を含意することなく、 キューテキスト内の テキスト span（WebVTT キュークラス span）を表す。

WebVTT イタリックオブジェクト

これらは、WebVTT キャプションまたは 字幕キューテキスト内のイタリック体テキストの span（WebVTT キューイタリック span）を表す。

WebVTT 太字オブジェクト

これらは、WebVTT キャプションまたは 字幕キューテキスト内の太字テキストの span（WebVTT キュー太字 span）を表す。

WebVTT 下線オブジェクト

これらは、WebVTT キャプションまたは字幕キューテキスト内の下線テキストの span（WebVTT キュー下線 span）を表す。

WebVTT ruby オブジェクト

これらは、WebVTT キャプションまたは字幕 キューテキスト内の ruby span（WebVTT キュー ruby span）を表す。

WebVTT ruby テキストオブジェクト

これらは、WebVTT キャプションまたは 字幕キューテキスト内の ruby テキスト span（WebVTT キュー ruby テキスト span）を表す。

WebVTT voice オブジェクト

これらは、WebVTT キャプションまたは字幕キューテキスト内の 特定の voice に関連付けられたテキスト span（WebVTT キュー voice span）を表す。WebVTT Voice Objectは値を持ち、それは voice の名前である。

WebVTT 言語オブジェクト

これらは、WebVTT キャプションまたは 字幕キューテキスト内のテキスト span（WebVTT キュー language span）を表し、周囲の テキストのものとは異なる可能性がある 適用可能言語があるキューの一部を、 イタリックや太字などのさらなる意味を含意することなく注釈するために使用される。

WebVTT リーフノードオブジェクトは、テキストなどのデータを含み、 子の WebVTT ノードオブジェクトを含むことができないものである。

WebVTT リーフノード オブジェクトには 2 つの具体的なクラスがある:

WebVTT テキストオブジェクト

テキストの断片。WebVTT テキストオブジェクトは値を持ち、それはそれが表すテキストである。

WebVTT タイムスタンプオブジェクト

タイムスタンプ。WebVTT タイムスタンプオブジェクトは値を持ち、それはタイムスタンプによって表される 時刻であり、秒および秒の小数部で表される。

WebVTT キュー テキスト構文解析規則は、次のアルゴリズムから構成される。入力は、 WebVTT キャプションまたは字幕キューテキストを含むと思われる文字列 input、および任意で フォールバック言語 language である。このアルゴリズムは WebVTT ノード オブジェクトのリストを返す。

  1. input を、構文解析される文字列とする。

  2. position を input 内へのポインターとし、初期状態では 文字列の先頭を指すものとする。

  3. result を、初期状態では空である WebVTT ノードオブジェクトのリストとする。

  4. current を WebVTT 内部ノードオブジェクト result とする。

  5. language stack を、初期状態では空の言語タグのスタックとする。

  6. language が設定されている場合、result の 適用可能言語を language に設定し、language を language stack にプッシュする。

  7. Loop: position が input の末尾を超えている場合、result を返して これらの手順を中止する。

  8. token を、WebVTT キュー テキストトークナイザーを呼び出した結果とする。

  9. token の型に応じて、適切な手順を実行する:

    token が文字列である場合

    1. 文字列トークン token の値を値とする WebVTT テキストオブジェクトを作成する。

    2. 新しく作成された WebVTT テキストオブジェクトを current に追加する。

    token が開始タグである場合

    開始タグトークン token の処理方法は、そのタグ名に依存し、次のとおりである:

    タグ名が "c" である場合

    WebVTT クラスオブジェクトを付加する。

    タグ名が "i" である場合

    WebVTT イタリックオブジェクトを付加する。

    タグ名が "b" である場合

    WebVTT 太字オブジェクトを付加する。

    タグ名が "u" である場合

    WebVTT 下線 オブジェクトを付加する。

    タグ名が "ruby" である場合

    WebVTT ruby オブジェクトを付加する。

    タグ名が "rt" である場合

    current が WebVTT ruby オブジェクトである場合、WebVTT ruby テキストオブジェクトを付加する。

    タグ名が "v" である場合

    WebVTT voice オブジェクトを付加する。そして、 その値をトークンの注釈文字列、または注釈 文字列がない場合は空文字列に設定する。

    タグ名が "lang" である場合

    トークンの注釈文字列の値、または注釈文字列がない場合は空文字列を language stack にプッシュする。その後、WebVTT 言語オブジェクトを付加する。

    そうでない場合

    そのトークンを無視する。

    上記の手順が、特定の具体的クラスの WebVTT 内部ノードオブジェクトを付加すると言う場合、ユーザーエージェントは次の手順を実行しなければならない:

    1. 指定された具体的クラスの新しい WebVTT 内部ノードオブジェクトを作成する。

    2. 新しいオブジェクトの 適用可能 クラスのリストを、トークン内のクラスのリストに設定する。ただし、空 文字列であるクラスは除外する。

    3. スタックが空でない場合、新しいオブジェクトの 適用可能 言語を、language stack の最上位のエントリに設定する。

    4. 新しく作成されたノードオブジェクトを current に追加する。

    5. current を新しく作成されたノードオブジェクトとする。

    token が終了タグである場合

    次の条件のいずれかが true である場合、current を current の親ノードとする。

    そうでなく、終了タグトークン token のタグ名が "lang" であり、 current が WebVTT 言語オブジェクトである場合、 current を current の親ノードとし、 language stack から最上位の値をポップする。

    そうでなく、終了タグトークン token のタグ名が "ruby" であり、 current が WebVTT ruby テキストオブジェクトである場合、 current を current の親ノードの親ノードとする。

    そうでない場合、そのトークンを無視する。

    token がタイムスタンプタグである場合

    1. input をタグ値とする。

    2. position を input 内へのポインターとし、初期状態では 文字列の先頭を指すものとする。

    3. WebVTT タイムスタンプを収集する。

    4. そのアルゴリズムが失敗せず、かつ position が現在 input の末尾を指している場合 （すなわち、タイムスタンプの後に後続文字がない場合）、収集された時刻を値とする WebVTT タイムスタンプ オブジェクトを作成し、それを current に追加する。

      そうでない場合、そのトークンを無視する。

  10. loop とラベル付けされた手順へジャンプする。

WebVTT キュー テキストトークナイザーは次のとおりである。これはトークンを発行し、そのトークンは、 文字列（値が文字列の列であるもの）、開始タグ（タグ名、クラスのリスト、 および任意で注釈を持つもの）、終了タグ（タグ名を持つもの）、またはタイムスタンプタグ（タグ 値を持つもの）のいずれかである。

  1. input および position を、これらの手順を呼び出したアルゴリズム内の 同名の変数と同じものとする。

  2. tokenizer state を WebVTT data state とする。

  3. result を空文字列とする。

  4. classes を空リストとする。

  5. Loop: position が input の末尾を超えている場合、c を end-of-file マーカーとする。 そうでない場合、c を position が指す input 内の文字とする。

    end-of-file マーカーは Unicode 文字ではなく、トークナイザーを終了させるために使用される。

  6. tokenizer state によって与えられる状態へジャンプする:

    WebVTT data state

    c の値に一致するエントリへジャンプする:

    U+0026 AMPERSAND (&)

    tokenizer state を HTML character reference in data state に設定し、 next とラベル付けされた手順へジャンプする。

    U+003C LESS-THAN SIGN (<)

    result が空文字列である場合、tokenizer state を WebVTT tag state に設定し、next とラベル付けされた手順へジャンプする。

    そうでない場合、値が result である文字列トークンを返して、これらの手順を中止する。

    End-of-file marker

    値が result である文字列トークンを返して、これらの手順を中止する。

    Anything else

    c を result に追加し、next とラベル付けされた手順へジャンプする。

    HTML character reference in data state

    HTML 文字参照を消費することを試みる。 追加で許可される 文字は指定しない。

    何も返されない場合、U+0026 AMPERSAND 文字 (&) を result に追加する。

    そうでない場合、返された文字トークンのデータを result に追加する。

    その後、いずれの場合も、tokenizer state を WebVTT data state に設定し、 next とラベル付けされた手順へジャンプする。

    WebVTT tag state

    c の値に一致するエントリへジャンプする:

    U+0009 CHARACTER TABULATION (tab) character
    U+000A LINE FEED (LF) character
    U+000C FORM FEED (FF) character
    U+0020 SPACE character

    tokenizer state を WebVTT start tag annotation state に設定し、 next とラベル付けされた手順へジャンプする。

    U+002E FULL STOP character (.)

    tokenizer state を WebVTT start tag class state に設定し、 next とラベル付けされた手順へジャンプする。

    U+002F SOLIDUS character (/)

    tokenizer state を WebVTT end tag state に設定し、next とラベル付けされた手順へジャンプする。

    ASCII 数字

    result を c に設定し、tokenizer state を WebVTT timestamp tag state に設定し、 next とラベル付けされた手順へジャンプする。

    U+003E GREATER-THAN SIGN character (>)

    position を input 内の次の文字へ進め、その後、 下の次の "end-of-file marker" エントリへジャンプする。

    End-of-file marker

    タグ名が空文字列で、クラスも注釈もない開始タグを返し、 これらの手順を中止する。

    Anything else

    result を c に設定し、tokenizer state を WebVTT start tag state に設定し、 next とラベル付けされた手順へジャンプする。

    WebVTT start tag state

    c の値に一致するエントリへジャンプする:

    U+0009 CHARACTER TABULATION (tab) character
    U+000C FORM FEED (FF) character
    U+0020 SPACE character

    tokenizer state を WebVTT start tag annotation state に設定し、 next とラベル付けされた手順へジャンプする。

    U+000A LINE FEED (LF) character

    buffer を c に設定し、tokenizer state を WebVTT start tag annotation state に設定し、next とラベル付けされた手順へジャンプする。

    U+002E FULL STOP character (.)

    tokenizer state を WebVTT start tag class state に設定し、 next とラベル付けされた手順へジャンプする。

    U+003E GREATER-THAN SIGN character (>)

    position を input 内の次の文字へ進め、その後、 下の次の "end-of-file marker" エントリへジャンプする。

    End-of-file marker

    タグ名が result で、クラスも注釈もない開始タグを返し、これらの手順を 中止する。

    Anything else

    c を result に追加し、next とラベル付けされた手順へジャンプする。

    WebVTT start tag class state

    c の値に一致するエントリへジャンプする:

    U+0009 CHARACTER TABULATION (tab) character
    U+000C FORM FEED (FF) character
    U+0020 SPACE character

    classes に値が buffer であるエントリを追加し、 buffer を空文字列に設定し、 tokenizer state を WebVTT start tag annotation state に設定し、next とラベル付けされた手順へジャンプする。

    U+000A LINE FEED (LF) character

    classes に値が buffer であるエントリを追加し、 buffer を c に設定し、tokenizer state を WebVTT start tag annotation state に設定し、 next とラベル付けされた手順へジャンプする。

    U+002E FULL STOP character (.)

    classes に値が buffer であるエントリを追加し、 buffer を空文字列に設定し、 next とラベル付けされた手順へジャンプする。

    U+003E GREATER-THAN SIGN character (>)

    position を input 内の次の文字へ進め、その後、 下の次の "end-of-file marker" エントリへジャンプする。

    End-of-file marker

    classes に値が buffer であるエントリを追加し、その後、 タグ名が result で、classes に与えられたクラスを持つが 注釈を持たない開始タグを返し、これらの 手順を中止する。

    Anything else

    c を buffer に追加し、next とラベル付けされた手順へジャンプする。

    WebVTT start tag annotation state

    c の値に一致するエントリへジャンプする:

    U+0026 AMPERSAND (&)

    tokenizer state を HTML character reference in annotation state に設定し、 next とラベル付けされた手順へジャンプする。

    U+003E GREATER-THAN SIGN character (>)

    position を input 内の次の文字へ進め、その後、 下の次の "end-of-file marker" エントリへジャンプする。

    End-of-file marker

    buffer から先頭および末尾の ASCII 空白文字をすべて削除し、 buffer 内の 1 つ以上の連続する ASCII 空白文字の列を 単一の U+0020 SPACE 文字で置換する。その後、タグ名が result で、classes に与えられたクラスを持ち、 buffer を注釈として持つ開始タグを返し、これらの 手順を中止する。

    Anything else

    c を buffer に追加し、next とラベル付けされた手順へジャンプする。

    HTML character reference in annotation state

    HTML 文字参照を消費することを試みる。 追加で許可される 文字は U+003E GREATER-THAN SIGN (>) とする。

    何も返されない場合、U+0026 AMPERSAND 文字 (&) を buffer に追加する。

    そうでない場合、返された文字トークンのデータを buffer に追加する。

    その後、いずれの場合も、tokenizer state を WebVTT start tag annotation state に設定し、 next とラベル付けされた手順へジャンプする。

    WebVTT end tag state

    c の値に一致するエントリへジャンプする:

    U+003E GREATER-THAN SIGN character (>)

    position を input 内の次の文字へ進め、その後、 下の次の "end-of-file marker" エントリへジャンプする。

    End-of-file marker

    タグ名が result である終了タグを返し、これらの手順を中止する。

    Anything else

    c を result に追加し、next とラベル付けされた手順へジャンプする。

    WebVTT timestamp tag state

    c の値に一致するエントリへジャンプする:

    U+003E GREATER-THAN SIGN character (>)

    position を input 内の次の文字へ進め、その後、 下の次の "end-of-file marker" エントリへジャンプする。

    End-of-file marker

    タグ名が result であるタイムスタンプタグを返し、これらの手順を中止する。

    Anything else

    c を result に追加し、next とラベル付けされた手順へジャンプする。

  7. Next: position を input 内の次の文字へ進める。

  8. loop とラベル付けされた手順へジャンプする。

上記のアルゴリズムが、HTML 文字参照を消費することを試みると言う場合、それは HTML で定義されるように 文字参照を消費することを試みることを意味する。[HTML]

HTML 仕様が文字を消費すると言う場合、この文脈では、 position を input 内の次の文字へ進めることを意味する。文字を再消費すると言う場合、それは position を input 内の前の文字へ戻すことを意味する。"EOF" は、この仕様における end-of-file マーカーと同等である。最後に、この文脈は （セミコロン欠落の処理に関して）"as part of an attribute" ではない。

6.5. WebVTT キューテキスト DOM 構築規則

getCueAsHTML() メソッドを介して VTTCue インターフェイスの WebVTT キューの内容を取得する目的では、それを DocumentFragment に構文解析する必要がある。この節ではその方法を説明する。

WebVTT ノードオブジェクトのリストを、Document owner の DOM 木へ変換するには、ユーザー エージェントは、WebVTT ノードオブジェクトの木と同型の DOM ノードの木を作成しなければならない。WebVTT ノードオブジェクトから DOM ノードへの対応関係は次のとおりである:

WebVTT ノード オブジェクト DOM ノード
WebVTT ノードオブジェクトのリスト DocumentFragment ノード。
WebVTT 領域オブジェクト DocumentFragment ノード。
WebVTT クラスオブジェクト HTML span 要素。
WebVTT イタリックオブジェクト HTML i 要素。
WebVTT 太字オブジェクト HTML b 要素。
WebVTT 下線オブジェクト HTML u 要素。
WebVTT ruby オブジェクト HTML ruby 要素。
WebVTT ruby テキストオブジェクト HTML rt 要素。
WebVTT voice オブジェクト HTML span 要素であり、title 属性が WebVTT voice オブジェクトの値に設定されたもの。
WebVTT 言語オブジェクト HTML span 要素であり、lang 属性が WebVTT 言語オブジェクトの 適用可能 言語に設定されたもの。
WebVTT テキストオブジェクト Text ノードであり、その data が WebVTT テキスト オブジェクトの値であるもの。
WebVTT タイムスタンプオブジェクト ProcessingInstruction ノードであり、その target が "timestamp" であり、その data が WebVTT タイムスタンプであり、 WebVTT タイムスタンプオブジェクトの値を表し、すべての任意 構成要素が含まれ、hours 構成要素が 10 未満であれば先頭ゼロを 1 つ付け、それ以外の場合は 先頭 ゼロを付けないもの。

上記の対応付けの一部として作成される HTML 要素は、 その namespaceURI を HTML 名前空間に設定し、HTML 仕様で定義される適切な IDL インターフェイスを使用し、 対応する WebVTT 内部ノード オブジェクトに 適用可能クラスがある場合、これらすべてのクラスを連結して得られる文字列を class 属性に設定しなければならない。各クラスは次のものと単一の U+0020 SPACE 文字で区切られる。

DOM 木内のすべてのノードの ownerDocument 属性は、与えられた document owner に設定されなければならない。

上で説明されていない、または上で定義された特性に依存しない DOM ノードのすべての特性は、 その初期値のままにしなければならない。

6.6. チャプター タイトルを抽出するための WebVTT 規則

WebVTT キュー cue に対する チャプタータイトルを抽出するための WebVTT 規則は 次のとおりである:

  1. nodes を、cue の キュー テキストに WebVTT キュー テキスト構文解析規則を適用することによって得られる WebVTT ノードオブジェクトのリストとする。

  2. nodes 内の各 WebVTT テキストオブジェクトの値を、pre-order の深さ優先探索順に連結したものを返す。 ただし、WebVTT ruby テキスト オブジェクトおよびその子孫は除外する。

7. 描画

この節では、ユーザーエージェントにおいて WebVTT キャプションまたは 字幕キューを視覚的に描画する方法を、ある程度詳しく説明する。処理モデルは、 CSS が利用可能な HTML の media 要素とかなり密接に結び付いている。CSS をサポートしないユーザーエージェントは、 スタイル付けおよび配置機能なしに、プレーンテキストのみを描画することが期待される。 完全な HTML CSS エンジンをサポートしないユーザーエージェントは、完全な CSS エンジンを持つユーザーエージェントが描画するものと同等の視覚表現を 描画することが期待される。

7.1. 処理モデル

WebVTT テキストトラックの表示を更新するための規則は、 次の手順を適用することにより、media 要素（具体的には video 要素）または他の再生 機構の text tracksを描画する。与えられた media 要素または他の再生機構について、これらの 規則を使用するすべての text tracksは、複数トラックからの字幕の重なりを避けるため、一緒に描画される。 このアルゴリズムを呼び出すとき、フォールバック言語 language を設定してよい。

HTML では、audio 要素は視覚的な描画領域を持たないため、この アルゴリズムは audio 要素では中止される。作者が音声リソース用の WebVTT キャプションまたは字幕を作成する場合、 ユーザーエージェントに描画させるために、それらを video 要素内で公開する必要がある。

下の手順の出力は、media 要素または他の再生機構の描画領域を覆う CSS ボックスの集合であり、 ユーザーエージェントはそれをユーザーに適した方法で描画することが期待される。

規則は次のとおりである:

  1. media 要素が audio 要素である場合、または描画領域を持たない他の再生 機構である場合、これらの手順を中止する。

  2. video を media 要素または他の再生機構とする。

  3. output を、絶対配置された CSS ブロックボックスの空リストとする。

  4. ユーザーエージェントが video に対してユーザーインターフェイスを ユーザーに公開している場合、ユーザーインターフェイスと同じ領域を覆う、完全に透明な配置済み CSS ブロック ボックスを 1 つ以上 output に追加する。

  5. これらの規則が前回実行されたとき、ユーザーエージェントが video に対してユーザーインターフェイスを公開していなかったが、 現在は公開している場合、任意で reset を true とする。そうでない場合、reset を false とする。

  6. tracks を、video の text tracks のリストの部分集合とする。その text track 描画を更新するための規則が、これらの WebVTT テキストトラックの表示を更新するための 規則であり、かつその text track mode が showing であるものとする。

  7. cues を、text track cues の空リストとする。

  8. tracks 内の各 track track について、track の キューのリストに含まれる キューのうち、text track cue active flag が設定されているものすべてを cues に追加する。

  9. regions を、WebVTT 領域の空リストとする。

  10. tracks 内の各 track track について、track の 領域の リストに含まれる、識別子を持つ 領域すべてを regions に追加する。

  11. reset が false である場合、regions 内の各 WebVTT 領域 region について、 regionNode を WebVTT 領域オブジェクトとする。

  12. 各 regionNode について、次の手順を適用する:

    1. regionNode に CSS プロパティを適用するための変数を、次のように準備する:

      • regionWidth を WebVTT 領域幅とする。width を regionWidth vw とする（vw は CSS 単位である）。[CSS-VALUES]

      • lineHeight を 6vh とし（vh は CSS 単位である）[CSS-VALUES]、 regionHeight を WebVTT 領域行数とする。lines を lineHeight に regionHeight を掛けたものとする。

      • viewportAnchorX を WebVTT 領域 アンカーの x 次元とし、 regionAnchorX を WebVTT 領域 アンカーの x 次元とする。leftOffset を regionAnchorX に width を掛け、100.0 で割ったものとする。 left を、viewportAnchorX vw から leftOffset を引いたものとする。

      • viewportAnchorY を WebVTT 領域 アンカーの y 次元とし、 regionAnchorY を WebVTT 領域 アンカーの y 次元とする。topOffset を regionAnchorY に lines を掛け、100.0 で割ったものとする。 top を、viewportAnchorY vh から topOffset を引いたものとする。

    2. CSS 仕様の用語を、次の制約内で regionNode に適用し、 それにより初期包含ブロックを基準に配置された CSS ボックス box を得る:

      1. スタイルシートは regionNode に関連付けられない。（regionNode は、 そのボックスが生成された後、下で説明するようにスタイルシートを使用して 再スタイル付けされる。）

      2. regionNode 上のプロパティは、次の節で定義されるように値を設定される。（その 節は、このアルゴリズムで先に計算された値を持つ変数の一部を使用する。）

      3. 動画ビューポート（および初期包含ブロック）は video の描画領域である。

    3. CSS ボックス box を output に追加する。

  13. reset が false である場合、cues 内の各 WebVTT キュー cue について、cue の text track cue display state が CSS ボックスの集合を持つならば:

    • cue の WebVTT キュー領域が null でない場合、それらのボックスを その領域の box に追加し、cue を cues から削除する。

    • そうでない場合、それらのボックスを output に追加し、cue を cues から削除する。

  14. 対応する CSS ボックスがまだ output に追加されていない cues 内の各 WebVTT キュー cue について、text track cue orderで、次の下位手順を実行する:

    1. nodes を、cue の キューテキストに、 WebVTT キューテキスト構文解析規則を適用して得られる WebVTT ノードオブジェクトのリストとする。 フォールバック言語 language が与えられている場合はそれを用いる。

    2. cue の WebVTT キュー領域が null である場合、次の 下位手順を実行する:

      1. WebVTT キュー設定を適用することにより、 nodes から CSS ボックス boxes を得る。

      2. cue の text track cue display stateが、 boxes 内の CSS ボックスを持つようにする。

      3. boxes 内の CSS ボックスを output に追加する。

    3. そうでない場合、次の下位手順を実行する:

      1. region を cue の WebVTT キュー領域とする。

      2. region の WebVTT 領域スクロール設定が up であり、かつ region がすでに 1 つの子を持つ場合、region の transition-property を top に設定し、transition-duration を 0.433s に設定する。

      3. offset を、cue の 算出 位置に region の WebVTT 領域幅を掛け、100 で割ったものとする （すなわち、それを領域幅に対する割合として解釈する）。

      4. cue の 算出位置 揃えを使用して、次のように offset を調整する:

        算出位置 揃えが center alignment である場合

        region の WebVTT 領域幅の半分を offset から引く。

        算出位置 揃えが line-right alignment である場合

        region の WebVTT 領域幅を offset から引く。

      5. left を offset % とする。[CSS-VALUES]

      6. 初期包含ブロックを基準に配置された CSS ボックスの集合 boxes を取得する。

      7. boxes 内にラインボックスがない場合、cue について これらの下位手順の残りをスキップする。 キューは無視される。

      8. cue の text track cue display stateが、 boxes 内の CSS ボックスを持つようにする。

      9. boxes 内の CSS ボックスを region に追加する。

      10. CSS ボックス boxes 全体の高さが region ボックスの高さより小さい場合、diff を 2 つの高さの値の絶対差とする。 top を diff だけ増やし、 それを regionNode に再適用する。

  15. output を返す。

ユーザーエージェントは、上記のアルゴリズムによるキューの配置をユーザーが上書きすることを許可してよい。たとえば、 video 上の別の位置へドラッグすることや、さらには video の外へ完全に移動することなどである。

7.2. キュー設定の処理

上記の処理アルゴリズムが、ユーザーエージェントは WebVTT キュー 設定を適用することによって WebVTT ノードオブジェクトのリスト nodes から CSS ボックスを得ることを要求する場合、ユーザー エージェントは次のアルゴリズムを実行しなければならない。

  1. WebVTT キュー書字方向が horizontal である場合、 writing-mode を "horizontal-tb" とする。そうでなく、WebVTT キュー書字方向が vertical growing left である場合、writing-mode を "vertical-rl" とする。そうでない場合、WebVTT キュー書字 方向は vertical growing right である。writing-mode を "vertical-lr" とする。

  2. 次のリストから適切な規則に従って、cue の maximum size の値を決定する:

    算出位置揃えが line-left である場合

    maximum size を、100 から 算出位置を引いたものとする。

    算出位置揃えが line-right である場合

    maximum size を 算出位置とする。

    算出位置揃えが center であり、かつ 算出位置が 50 以下である場合

    maximum size を、算出位置に 2 を掛けたものとする。

    算出位置揃えが center であり、かつ 算出位置が 50 より大きい場合

    maximum size を、100 から 算出 位置を引き、その結果に 2 を掛けたものとする。

  3. WebVTT キュー サイズが maximum size より小さい場合、size を WebVTT キュー サイズとする。そうでない場合、size を maximum size とする。

  4. WebVTT キュー書字方向が horizontal である場合、width を size vw とし、height を auto とする。そうでない場合、width を auto とし、height を size vh とする。 （これらは、描画のための CSS プロパティを設定するために次節で使用される CSS 値である。vw および vh は CSS 単位である。）[CSS-VALUES]

  5. 次のリストから適切な規則に従って、cue の x-position または y-position の値を 決定する:

    WebVTT キュー書字方向が horizontal である場合
    算出位置揃えが line-left alignment である場合

    x-position を 算出 位置とする。

    算出位置揃えが center alignment である場合

    x-position を、算出 位置から size の半分を引いたものとする。

    算出位置揃えが line-right alignment である場合

    x-position を、算出 位置から size を引いたものとする。

    WebVTT キュー書字方向が vertical growing left または vertical growing right である場合
    算出位置揃えが line-left alignment である場合

    y-position を 算出 位置とする。

    算出位置揃えが center alignment である場合

    y-position を、算出 位置から size の半分を引いたものとする。

    算出位置揃えが line-right alignment である場合

    y-position を、算出 位置から size を引いたものとする。

  6. cue について、まだ計算されていない x-position または y-position のいずれかの値を、 次のリストから適切な規則に従って決定する:

    WebVTT キュー snap-to-lines フラグが false である場合
    WebVTT キュー書字方向が horizontal である場合

    y-position を 算出行とする。

    WebVTT キュー書字方向が vertical growing left または vertical growing right である場合

    x-position を 算出行とする。

    WebVTT キュー snap-to-lines フラグが true である場合
    WebVTT キュー書字方向が horizontal である場合

    y-position を 0 とする。

    WebVTT キュー書字方向が vertical growing left または vertical growing right である場合

    x-position を 0 とする。

    これらは最終位置ではなく、下でボックス寸法を計算するために使用される一時的な位置にすぎない。

  7. left を x-position vw とし、top を y-position vh とする。（これらは、 描画のための CSS プロパティを設定するために次節で使用される CSS 値である。vw および vh は CSS 単位である。）[CSS-VALUES]

  8. 初期包含ブロックを基準に配置された CSS ボックスの集合 boxes を取得する。

  9. boxes 内にラインボックスがない場合、cue についてこれらの下位手順の残りをスキップする。 キューは無視される。

  10. 次のリストから適切な手順に従って、boxes の位置を調整する:

    cue の WebVTT キュー snap-to-lines フラグが true である場合

    このアルゴリズムの多くの手順は、WebVTT キュー書字 方向によって異なる。"Horizontal" とラベル付けされた手順は、 WebVTT キュー書字方向が horizontal である場合にのみ従わなければならず、 "Vertical" とラベル付けされた手順は、 WebVTT キュー書字方向が vertical growing left または vertical growing right のいずれかである場合に従わなければならず、"Vertical Growing Left" とラベル付けされた手順は、WebVTT キュー書字方向が vertical growing left である場合にのみ従わなければならず、"Vertical Growing Right" とラベル付けされた手順は、WebVTT キュー書字方向が vertical growing right である場合にのみ従わなければならない。

    1. Horizontal: full dimension を video の描画 領域の高さとする。

      Vertical: full dimension を video の描画 領域の幅とする。

    2. Horizontal: step を boxes 内の最初のラインボックスの高さとする。

      Vertical: step を boxes 内の最初のラインボックスの幅とする。

    3. step が 0 である場合、下の done positioning とラベル付けされた手順へジャンプする。

    4. line を cue の 算出行とする。

    5. line に 0.5 を加えてから floor することにより、整数に丸める。

    6. Vertical Growing Left: line に 1 を加えてから、それを負にする。

    7. position を、step と line を掛けた結果とする。

    8. Vertical Growing Left: position を boxes 内のボックスの境界 ボックスの幅だけ減らし、その後 position を step だけ増やす。

    9. line が 0 未満である場合、position を max dimension だけ増やし、 step を負にする。

    10. Horizontal: boxes 内のすべてのボックスを、 position によって与えられる距離だけ下へ移動する。

      Vertical: boxes 内のすべてのボックスを、 position によって与えられる距離だけ右へ移動する。

    11. boxes 内のすべてのボックスの位置を、その specified position として記憶する。

    12. title area を、video の描画領域全体を覆うボックスとする。

    13. Step loop: boxes 内のどのボックスも output 内のどのボックスとも重ならず、かつ boxes 内のすべてのボックスが title area ボックス内に完全に含まれる場合、下の done positioning とラベル付けされた手順へジャンプする。

    14. Horizontal: step が負であり、boxes 内の 最初のラインボックスの上端が現在 title area の上端より上にある場合、または step が正であり、boxes 内の最初のラインボックスの下端が title area の下端より下にある場合、switch direction とラベル付けされた手順へジャンプする。

      Vertical: step が負であり、boxes 内の 最初のラインボックスの左端が現在 title area の左端より左にある場合、 または step が正であり、boxes 内の最初のラインボックスの右端が title area の右端より右にある場合、 switch direction とラベル付けされた手順へジャンプする。

    15. Horizontal: boxes 内のすべてのボックスを、 step によって与えられる距離だけ下へ移動する。（step が負である場合、 絶対的にはボックスが上方向へ移動する結果となる。）

      Vertical: boxes 内のすべてのボックスを、 step によって与えられる距離だけ右へ移動する。（step が負である場合、 絶対的にはボックスが左方向へ移動する結果となる。）

    16. step loop とラベル付けされた手順へ戻る。

    17. Switch direction: switched が true である場合、 boxes 内のすべてのボックスを削除し、 下の done positioning とラベル付けされた手順へジャンプする。

    18. そうでない場合、boxes 内のすべてのボックスを、先の手順で決定された specified position へ戻す。

    19. step を負にする。

    20. switched を true に設定する。

    21. step loop とラベル付けされた手順へ戻る。

    cue の WebVTT キュー snap-to-lines フラグが false である場合

    1. bounding box を、boxes 内のボックスの境界ボックスとする。

    2. 次のリストから適切な手順を実行する:

      WebVTT キュー書字方向 が horizontal である場合
      WebVTT キュー行 揃えが center alignment である場合

      boxes 内のすべてのボックスを bounding box の高さの半分だけ上へ移動する。

      WebVTT キュー行 揃えが end alignment である場合

      boxes 内のすべてのボックスを bounding box の高さだけ上へ移動する。

      WebVTT キュー書字方向 が vertical growing left または vertical growing right である場合
      WebVTT キュー行 揃えが center alignment である場合

      boxes 内のすべてのボックスを bounding box の幅の半分だけ左へ移動する。

      WebVTT キュー行 揃えが end alignment である場合

      boxes 内のすべてのボックスを bounding box の幅だけ左へ移動する。

    3. boxes 内のどのボックスも output 内のどのボックスとも重ならず、かつ boxes 内のすべてのボックスが video の描画領域内にある場合、 下の done positioning とラベル付けされた手順へジャンプする。

    4. boxes 内のボックス相互の相対位置を維持しつつ、 boxes 内のどのボックスも output 内のどのボックスとも 重ならず、かつ boxes 内のすべてのボックスが video の描画領域内に入るように、 boxes 内のボックスを移動できる位置がある場合、それらのボックスを現在位置に最も近いそのような位置へ移動し、 その後、下の done positioning とラベル付けされた手順へジャンプする。 現在位置からの距離が等しいそのような位置が複数ある場合、その中で最も高いものを使用する。 その高さにも複数ある場合、その中で最も左のものを使用する。

    5. そうでない場合、下の done positioning とラベル付けされた手順へジャンプする。（残念ながらボックスは重なる。）

  11. Done positioning: boxes を返す。

7.3. CSS ボックスの取得

上記の処理アルゴリズムが、ユーザーエージェントは CSS ボックスの集合 boxes を取得することを要求する場合、 次の制約内で CSS 仕様の用語を nodes に適用する: [CSS22]

boxes を、初期包含ブロックの子孫として生成されたボックスとその位置とする。

7.4. WebVTT ノードオブジェクトへの CSS プロパティの適用

WebVTT テキストトラックの表示を更新するための規則に従うとき、ユーザーエージェントは、 この節で定義されるように、CSS ユーザーエージェントカスケード レイヤーで WebVTT ノードオブジェクトのプロパティを設定しなければならない。[CSS22]

（ルートの）WebVTT ノードオブジェクトのリストを、次の CSS 設定で初期化する:

変数 writing-mode、top、left、width、および height は、それらの 名前を持つ値であり、WebVTT テキストトラックの表示を更新するための規則によって、 WebVTT キューについて決定されたものである。その テキストから WebVTT ノード オブジェクトのリストが 構築された。

（ルートの）WebVTT ノード オブジェクトのリスト上の text-align プロパティは、 対応する キューの WebVTT キューテキスト揃えが、 下の表の最初のセルにある値である行の、2 番目のセルの値に設定されなければならない:

WebVTT キューテキスト揃え text-align 値
Start alignment start
Center alignment center
End alignment end
Left alignment left
Right alignment right

（ルートの）WebVTT ノードオブジェクトのリスト上の font 一括 プロパティは、 5vh sans-serif に設定されなければならない。[CSS-VALUES]

（ルートの）WebVTT ノードオブジェクトのリスト上の color プロパティは rgba(255,255,255,1) に設定されなければならない。[CSS3-COLOR]

WebVTT キュー背景ボックス および WebVTT ruby テキストオブジェクト上の background 一括プロパティは、 rgba(0,0,0,0.8) に設定されなければならない。[CSS3-COLOR]

（ルートの）WebVTT ノード オブジェクトのリスト上の white-space プロパティは pre-line に設定されなければならない。[CSS22]

WebVTT イタリックオブジェクト上の font-style プロパティは italic に設定されなければならない。

WebVTT 太字 オブジェクト上の font-weight プロパティは bold に設定されなければならない。

WebVTT 下線オブジェクト上の text-decoration プロパティは underline に設定されなければならない。

WebVTT ruby オブジェクト上の display プロパティは ruby に設定されなければならない。[CSS3-RUBY]

WebVTT ruby テキストオブジェクト上の display プロパティは ruby-text に設定されなければならない。[CSS3-RUBY]

すべての WebVTT 領域 オブジェクトは、次の CSS 設定で初期化される:

変数 width、height、top、および left は、それらの 名前を持つ値であり、 WebVTT テキストトラックの表示を更新するための規則によって、 WebVTT 領域について決定されたものである。その 領域から WebVTT 領域オブジェクトが構築された。

すべての WebVTT 領域オブジェクトの子は、さらに次の CSS 設定で初期化される:

他のすべての非継承プロパティは初期値に設定されなければならない。ルートの WebVTT ノードオブジェクトのリスト上の継承プロパティは、 media 要素が存在する場合、その WebVTT キューが 描画される対象である media 要素から値を継承しなければならない。media 要素が存在しない場合（すなわち、 text track が別のメディア再生機構のために描画されている場合）、ルートの WebVTT ノードオブジェクトのリストおよび WebVTT 領域 オブジェクト上の継承プロパティは、初期値を取らなければならない。

media 要素または他の再生機構に適用されるスタイルシートがある場合、 それらは次の節で定義されるように解釈されなければならない。

8. CSS 拡張

この節では、いくつかの CSS 擬似要素および擬似クラスと、それらが WebVTT にどのように適用されるかを規定する。この節は、CSS を サポートしないユーザーエージェントには適用されない。

8.1. 導入

この節は非規範的である。

::cue 擬似要素はキューを表す。

::cue(selector) 擬似要素は、与えられたセレクターに一致するキューまたは キュー内の要素を表す。

::cue-region 擬似要素は領域を表す。

::cue-region(selector) 擬似要素は、与えられたセレクターに一致する領域または 領域内の要素を表す。

他のすべての擬似要素と同様に、これらの擬似要素は video 要素の文書ツリー内に直接存在するわけではない。

:past および :future 擬似クラスは、::cue(selector) 内で使用して、 WebVTT 内部ノードオブジェクトを、現在の再生位置に基づいて一致させることができる。

次の表は、与えられたセレクターで選択できるものの例を、関連するオブジェクトを生成するための WebVTT 構文とともに示している。

セレクター（CSS 構文例） 一致対象（WebVTT 構文例）

::cue

video::cue {
  color: yellow;
}

任意の WebVTT ノードオブジェクトのリスト。

WEBVTT

00:00:00.000 --> 00:00:08.000
Yellow!

00:00:08.000 --> 00:00:16.000
Also yellow!

ID セレクター in ::cue() 

video::cue(#cue1) {
  color: yellow;
}

キューの text track cue identifier が与えられた ID に 一致する任意の WebVTT ノードオブジェクトのリスト。

WEBVTT

cue1
00:00:00.000 --> 00:00:08.000
Yellow!

型セレクター in ::cue() 

video::cue(c),
video::cue(i),
video::cue(b),
video::cue(u),
video::cue(ruby),
video::cue(rt),
video::cue(v),
video::cue(lang) {
  color: yellow;
}

与えられた名前を持つ WebVTT 内部ノードオブジェクト。

WEBVTT

00:00:00.000 --> 00:00:08.000
<c>Yellow!</c>
<i>Yellow!</i>
<u>Yellow!</u>
<b>Yellow!</b>
<u>Yellow!</u>
<ruby>Yellow! <rt>Yellow!</rt></ruby>
<v Kathryn>Yellow!</v>
<lang en>Yellow!</lang>

全称セレクター in ::cue() 

video::cue(*:not(:root)) {
  color: yellow;
}

すべての WebVTT 内部ノードオブジェクト

WEBVTT

00:00:00.000 --> 00:00:08.000
White!
<c>Yellow!</c>
<i>Yellow!</i>
<u>Yellow!</u>

クラスセレクター in ::cue() 

video::cue(.loud) {
  color: yellow;
}

与えられた 適用可能クラスを持つ WebVTT 内部ノードオブジェクト（ルートの WebVTT ノードオブジェクトのリストを除く）。 

WEBVTT

00:00:00.000 --> 00:00:08.000
<c.loud>Yellow!</c>
<i.loud>Yellow!</i>
<u.loud>Yellow!</u>
<b.loud>Yellow!</b>
<u.loud>Yellow!</u>
<ruby.loud>Yellow! <rt.loud>Yellow!</rt></ruby>
<v.loud Kathryn>Yellow!</v>
<lang.loud en>Yellow!</lang>

属性セレクター in ::cue() 

video::cue([lang="en-US"]) {
  color: yellow;
}
video::cue(lang[lang="en-GB"]) {
  color: cyan;
}
video::cue(v[voice="Kathryn"] {
  color: lime;
}

"lang" については、与えられた 適用可能言語を持つ、ルートの WebVTT ノードオブジェクトのリストまたは WebVTT 言語オブジェクト。 "voice" については、与えられた voice を持つ WebVTT voice オブジェクト。 

WEBVTT

00:00:00.000 --> 00:00:08.000
Yellow!

00:00:08.000 --> 00:00:16.000
<lang en-GB>Cyan!</lang>

00:00:16.000 --> 00:00:24.000
<v Kathryn>I like lime.</v>

WebVTT ノードオブジェクトのリストの 適用可能言語は、HTML の srclang 属性によって設定できる。 

<video ...>
 <track src="example-attr.vtt"
        srclang="en-US" default>
</video>

:lang() 擬似クラス in ::cue()

video::cue(:lang(en)) {
  color: yellow;
}
video::cue(:lang(en-GB)) {
  color: cyan;
}

与えられた言語範囲に一致する 適用可能言語を持つ WebVTT 内部ノードオブジェクト。 

WEBVTT

00:00:00.000 --> 00:00:08.000
Yellow!

00:00:08.000 --> 00:00:16.000
<lang en-GB>Cyan!</lang>

上と同様に、WebVTT ノードオブジェクトのリストの 適用可能言語は、 HTML の srclang 属性によって設定できる。

:past および :future 擬似クラス in ::cue()

video::cue(:past) {
  color: yellow;
}
video::cue(:future) {
  color: cyan;
}

WebVTT タイムスタンプオブジェクトを持つキュー内の WebVTT 内部ノードオブジェクトであり、 現在の再生位置に依存する。 

WEBVTT

00:00:00.000 --> 00:00:08.000
<c>No match (no timestamps)</c>

00:00:08.000 --> 00:00:16.000
No match <00:00:12.000> (no elements)

00:00:16.000 --> 00:00:24.000
<00:00:16.000> <c>This</c>
<00:00:18.000> <c>can</c>
<00:00:20.000> <c>match</c>
<00:00:22.000> <c>:past/:future</c>
<00:00:24.000>

::cue-region

video::cue-region {
  color: yellow;
}

任意の領域（WebVTT 領域オブジェクトのリスト）。

WEBVTT

REGION
id:editor-comments
regionanchor:0%,0%
viewportanchor:0%,0%

00:00:00.000 --> 00:00:08.000
No match (normal cue)

00:00:08.000 --> 00:00:16.000 region:editor-comments
Yellow!

ID セレクター in ::cue-region()

video::cue-region(#scroll) {
  color: cyan;
}

与えられた ID に一致する WebVTT 領域識別子を持つ任意の領域（WebVTT 領域オブジェクトのリスト）。

WEBVTT

REGION
id:editor-comments
width:40%
regionanchor:0%,100%
viewportanchor:10%,90%

REGION
id:scroll
width:40%
regionanchor:100%,100%
viewportanchor:90%,90%
scroll:up

00:00:00.000 --> 00:00:08.000
No match (normal cue)

00:00:08.000 --> 00:00:16.000 region:editor-comments
Yellow!

00:00:10.000 --> 00:00:16.000 region:scroll
Over here it's Cyan!

8.2. 処理モデル

ユーザーエージェントが WebVTT テキストトラックの表示を更新するための規則に従って、1 つ以上の WebVTT キューを描画している場合、描画に使用される WebVTT ノードオブジェクトのリスト内の WebVTT ノード オブジェクトは、以下で定義される特定の擬似セレクターによって一致させることができる。これらのセレクターは、 WebVTT テキスト トラックの表示を更新するための規則の適用間であっても（この規則はアクティブなキューの集合が変化したときにのみ実行される）、 キューが描画されている間に、個々の WebVTT ノード オブジェクトへの一致を開始または停止できる。下で説明する擬似要素をサポートするユーザーエージェントは、それに応じて描画を動的に更新しなければならない。 white-space または font 一括に対応するプロパティのいずれか（ line-height を含む）の値が変化した場合、WebVTT キューの text track cue display state は 空にされ、text track の text track 描画を更新するための規則が 直ちに再実行されなければならない。

擬似要素は、セレクターによって一致した要素に適用される。この節の目的では、 その要素を一致要素とする。以下の節で定義される擬似要素は、 一致要素のために描画されている WebVTT キューの一部のスタイル付けに影響する。

一致要素が video 要素でない場合、 下で定義される擬似要素は、この仕様によれば効果を持たない。

text tracks モデルを実装する CSS ユーザーエージェントは、::cue、 ::cue(selector)、::cue-region および ::cue-region(selector) 擬似要素、ならびに :past および :future 擬似クラスを実装しなければならない。

8.2.1. ::cue 擬似要素

::cue 擬似要素（引数なし）は、一致要素のために構築された任意の WebVTT ノード オブジェクトのリストに一致する。ただし、background 一括に対応するプロパティは、WebVTT ノードオブジェクトのリストではなく、 WebVTT キュー背景ボックスに適用されなければならないという例外がある。

引数なしの ::cue 擬似要素には、次のプロパティが適用される。擬似要素に設定された他のプロパティは 無視されなければならない:

::cue(selector) 擬似要素（引数あり）は、 CSS セレクターからなる引数を持たなければならない [SELECTORS4]。これは、一致要素のために構築された WebVTT 内部ノード オブジェクトのうち、与えられた CSS セレクターにも一致するものに一致する。ノードは次のように扱われる:

引数ありの ::cue() 擬似要素には、次のプロパティが適用される:

さらに、セレクターが :past および :future 擬似クラスを含まない場合、引数ありの ::cue() 擬似要素には、次のプロパティが適用される:

適用されないプロパティは無視されなければならない。

特別な例外として、background 一括に対応するプロパティは、それらが WebVTT ノードオブジェクトのリストに適用されるはずであった場合、 代わりに WebVTT キュー 背景ボックスに適用されなければならない。

8.2.2. :past および :future 擬似クラス

:past および :future 擬似クラスは、場合によって WebVTT ノードオブジェクトに一致する。[SELECTORS4]

:past 擬似クラスは、過去にある WebVTT ノードオブジェクトにのみ一致する。

WebVTT ノードオブジェクト c は、WebVTT キューの WebVTT ノードオブジェクトのリストの pre-order の深さ優先探索において、一致要素である media 要素の 現在の再生 位置より小さい値を持つ WebVTT タイムスタンプオブジェクトが、 WebVTT ノードオブジェクト c の完全に後に存在する場合、過去にある。

:future 擬似クラスは、未来にある WebVTT ノード オブジェクトにのみ一致する。

WebVTT ノードオブジェクト c は、WebVTT キューの WebVTT ノードオブジェクトのリストの pre-order の深さ優先探索において、一致要素である media 要素の 現在の再生 位置より大きい値を持つ WebVTT タイムスタンプオブジェクトが、 WebVTT ノードオブジェクト c の完全に前に存在する場合、未来にある。

8.2.3. ::cue-region 擬似要素

擬似要素は、セレクターによって一致した要素に適用される。この節の目的では、 その要素を一致要素とする。下で定義される擬似要素は、一致要素のために描画されている text track 領域のスタイル付けに影響する。

一致要素が video 要素でない場合、下で定義される擬似要素は、 この仕様によれば効果を持たない。

::cue-region 擬似要素（引数なし）は、一致要素のために構築された任意の WebVTT 領域 オブジェクトのリストに一致する。

::cue-region(selector) 擬似要素（引数あり）は、 CSS セレクターからなる引数を持たなければならない [SELECTORS4]。これは、一致要素のために構築された WebVTT 領域オブジェクトのリストのうち、 与えられた CSS セレクターにも次のように一致するものに一致する:

::cue-region(selector) について、他のセレクター照合は定義されていない。

::cue に適用されるものと同じプロパティが、::cue-region 擬似要素に適用される。 擬似要素に設定された他のプロパティは無視されなければならない。

ユーザーエージェントが WebVTT テキストトラックの表示を更新するための規則に従って、1 つ以上の text track 領域を描画している場合、 描画に使用される WebVTT 領域 オブジェクトは、上記の擬似要素によって一致させることができる。擬似要素をサポートするユーザーエージェントは、それに応じて描画を動的に更新しなければならない。 white-space または font 一括に対応するプロパティのいずれか（ line-height を含む）の値が 変化した場合、その領域内のすべての WebVTT キューの text track cue display state は空にされ、 text track の text track 描画を更新するための規則が直ちに再実行されなければならない。

9. API

9.1. VTTCue インターフェイス

次のインターフェイスは、DOM API で WebVTT キューを公開するために使用される:

enum AutoKeyword { "auto" };
typedef (double or AutoKeyword) LineAndPositionSetting;
enum DirectionSetting { "" /* horizontal */, "rl", "lr" };
enum LineAlignSetting { "start", "center", "end" };
enum PositionAlignSetting { "line-left", "center", "line-right", "auto" };
enum AlignSetting { "start", "center", "end", "left", "right" };
[Exposed=Window]
interface VTTCue : TextTrackCue {
  constructor(double startTime, unrestricted double endTime, DOMString text);
  attribute VTTRegion? region;
  attribute DirectionSetting vertical;
  attribute boolean snapToLines;
  attribute LineAndPositionSetting line;
  attribute LineAlignSetting lineAlign;
  attribute LineAndPositionSetting position;
  attribute PositionAlignSetting positionAlign;
  attribute double size;
  attribute AlignSetting align;
  attribute DOMString text;
  DocumentFragment getCueAsHTML();
};
cue = new VTTCue( startTime, endTime, text )

addCue() メソッドで使用するための新しい VTTCue オブジェクトを返す。

startTime 引数は、text track cue start timeを設定する。

endTime 引数は、text track cue end timeを設定する。その値が正の Infinity である場合、 VTTCue オブジェクトは 非有界 text track cueを表す。

text 引数は キューテキストを設定する。

cue . region

このキューが属する VTTRegion オブジェクトがあればそれを返し、なければ null を返す。

設定可能である。

cue . vertical [ = value ]

WebVTT キュー書字方向を表す文字列を、次のように返す:

それが horizontal である場合

空文字列。

それが vertical growing left である場合

文字列 "rl"。

それが vertical growing right である場合

文字列 "lr"。

設定可能である。

cue . snapToLines [ = value ]

WebVTT キュー snap-to-lines フラグが true の場合は true を返し、 それ以外の場合は false を返す。

設定可能である。

cue . line [ = value ]

WebVTT キュー 行を返す。値が auto である場合、 文字列 "auto" が返される。

設定可能である。

cue . lineAlign [ = value ]

WebVTT キュー行揃えを表す文字列を、次のように返す:

それが start alignment である場合

文字列 "start"。

それが center alignment である場合

文字列 "center"。

それが end alignment である場合

文字列 "end"。

設定可能である。

cue . position [ = value ]

WebVTT キュー位置を返す。値が auto である場合、文字列 "auto" が 返される。

設定可能である。

cue . positionAlign [ = value ]

WebVTT キュー位置揃えを表す文字列を、次のように返す:

それが line-left alignment である場合

文字列 "line-left"。

それが center alignment である場合

文字列 "center"。

それが line-right alignment である場合

文字列 "line-right"。

それが automatic alignment である場合

文字列 "auto"。

設定可能である。

cue . size [ = value ]

WebVTT キュー サイズを返す。

設定可能である。

cue . align [ = value ]

WebVTT キューテキスト揃えを表す文字列を、次のように返す:

それが start alignment である場合

文字列 "start"。

それが center alignment である場合

文字列 "center"。

それが end alignment である場合

文字列 "end"。

それが left alignment である場合

文字列 "left"。

それが right alignment である場合

文字列 "right"。

設定可能である。

cue . text [ = value ]

キューテキストを、未構文解析の生の形式で返す。

設定可能である。

fragment = cue . getCueAsHTML()

キューテキストを、HTML 要素およびその他の DOM ノードからなる DocumentFragment として返す。

VTTCue(startTime, endTime, text) コンストラクターは、呼び出されたとき、次の手順を実行しなければならない:

  1. 新しい WebVTT キューを作成する。 cue をその WebVTT キューとする。

  2. cue の text track cue start timeを、 startTime 引数の値とする。

  3. endTime 引数の値が負の Infinity または Not-a-Number (NaN) 値である場合、 TypeError 例外を投げる。そうでない場合、cue の text track cue end timeを、 endTime 引数の値とする。

  4. cue の キューテキストを text 引数の値とし、チャプタータイトルを抽出するための規則を チャプター タイトルを抽出するための WebVTT 規則とする。

  5. cue の text track cue identifierを空文字列とする。

  6. cue の text track cue pause-on-exit flagを false とする。

  7. cue の WebVTT キュー領域を null とする。

  8. cue の WebVTT キュー書字方向を horizontal とする。

  9. cue の WebVTT キュー snap-to-lines フラグを true とする。

  10. cue の WebVTT キュー行を auto とする。

  11. cue の WebVTT キュー行揃えを start alignment とする。

  12. cue の WebVTT キュー位置を auto とする。

  13. cue の WebVTT キュー位置揃えを auto とする。

  14. cue の WebVTT キューサイズを 100 とする。

  15. cue の WebVTT キューテキスト揃えを center alignment とする。

  16. cue を表す VTTCue オブジェクトを返す。

region 属性は、取得時には、VTTCue オブジェクトが表す WebVTT キューの WebVTT キュー領域を表す VTTRegion オブジェクトがあればそれを返し、なければ null を返さなければならない。設定時には、WebVTT キュー領域を 新しい値に設定しなければならない。

vertical 属性は、取得時には、VTTCue オブジェクトが表す WebVTT キューの WebVTT キュー書字 方向が下の表の最初のセルにある行の、2 番目のセルの文字列を返さなければならない:

WebVTT キュー書字方向 vertical 値
Horizontal ""（空文字列）
Vertical growing left "rl"
Vertical growing right "lr"

設定時には、WebVTT キュー書字方向を、上の表で 2 番目のセルが新しい値に 大文字小文字を区別して一致する行の最初の セルに与えられた値に設定しなければならない。

snapToLines 属性は、取得時には、 VTTCue オブジェクトが表す WebVTT キューの WebVTT キュー snap-to-lines フラグが true の場合は true を返し、 それ以外の場合は false を返さなければならない。設定時には、WebVTT キュー snap-to-lines フラグを 新しい値に設定しなければならない。

line 属性は、取得時には、VTTCue オブジェクト が表す WebVTT キューの WebVTT キュー 行を返さなければならない。特別値 auto は、文字列 "auto" として表されなければならない。 設定時には、 WebVTT キュー 行を新しい値に設定しなければならない。新しい値が文字列 "auto" である場合、それは特別値 auto として解釈されなければならない。

snapToLines 属性および line 属性を任意の順序で設定できるようにするため、API は、line が 0..100 の範囲外の値を持つときに snapToLines を false に設定すること、またはその逆を拒否しない。

lineAlign 属性は、取得時には、 VTTCue オブジェクトが表す WebVTT キューの WebVTT キュー行 揃えが下の表の最初のセルにある行の、2 番目のセルの文字列を返さなければならない:

WebVTT キュー行揃え lineAlign 値
Start alignment "start"
Center alignment "center"
End alignment "end"

設定時には、WebVTT キュー行揃えを、上の表で 2 番目のセルが新しい値に 大文字小文字を区別して一致する行の最初の セルに与えられた値に設定しなければならない。

position 属性は、取得時には、VTTCue オブジェクトが表す WebVTT キューの WebVTT キュー 位置を返さなければならない。特別値 auto は、文字列 "auto" として表されなければならない。 設定時には、新しい値が負であるか 100 より大きい場合、IndexSizeError 例外を投げなければならない。そうでない場合、WebVTT キュー位置を新しい値に設定しなければならない。新しい 値が文字列 "auto" である場合、それは特別値 auto として解釈されなければならない。

positionAlign 属性は、取得時には、 VTTCue オブジェクトが表す WebVTT キューの WebVTT キュー位置 揃えが下の表の最初のセルにある行の、2 番目のセルの文字列を返さなければならない:

WebVTT キュー位置揃え positionAlign 値
Line-left alignment "line-left"
Center alignment "center"
Line-right alignment "line-right"
Automatic alignment "auto"

設定時には、WebVTT キュー位置揃えを、上の表で 2 番目のセルが新しい値に 大文字小文字を区別して一致する行の最初の セルに与えられた値に設定しなければならない。

size 属性は、取得時には、VTTCue オブジェクトが表す WebVTT キューの WebVTT キュー サイズを返さなければならない。設定時には、新しい 値が負であるか 100 より大きい場合、IndexSizeError 例外を投げなければならない。 そうでない場合、WebVTT キュー サイズを新しい値に設定しなければならない。

align 属性は、取得時には、VTTCue オブジェクト が表す WebVTT キューの WebVTT キューテキスト揃え が下の表の最初のセルにある行の、2 番目のセルの文字列を返さなければならない:

WebVTT キューテキスト揃え align 値
Start alignment "start"
Center alignment "center"
End alignment "end"
Left alignment "left"
Right alignment "right"

設定時には、WebVTT キューテキスト揃えを、上の表で 2 番目のセルが新しい値に 大文字小文字を区別して一致する行の最初の セルに与えられた値に設定しなければならない。

text 属性は、取得時には、VTTCue オブジェクト が表す WebVTT キューの生の キュー テキストを返さなければならない。設定時には、キュー テキストを新しい値に設定しなければならない。

getCueAsHTML() メソッドは、キューテキストに WebVTT キューテキスト構文解析規則を適用した結果に、 WebVTT キューテキスト DOM 構築規則を適用することにより、 キューテキストを、entry settings object によって指定される responsible document 用の DocumentFragment に変換しなければならない。

getCueAsHTML() にはフォールバック言語は提供されない。これは、 DocumentFragment が言語情報を公開できないためである。

9.2. VTTRegion インターフェイス

次のインターフェイスは、DOM API で WebVTT 領域を公開するために使用される:

enum ScrollSetting { "" /* none */, "up" };
[Exposed=Window]
interface VTTRegion {
  constructor();
  attribute DOMString id;
  attribute double width;
  attribute unsigned long lines;
  attribute double regionAnchorX;
  attribute double regionAnchorY;
  attribute double viewportAnchorX;
  attribute double viewportAnchorY;
  attribute ScrollSetting scroll;
};
region = new VTTRegion()

新しい VTTRegion オブジェクトを返す。

region . id

text track 領域識別子を返す。設定可能である。

region . width

WebVTT 領域幅を、動画幅に対するパーセントとして返す。設定可能である。新しい値が 0..100 の範囲内にない場合、 IndexSizeError を投げる。

region . lines

text track 領域の高さを行数として返す。設定可能である。新しい値が負である場合、 IndexSizeError を投げる。

region . regionAnchorX

WebVTT 領域アンカー X オフセットを、領域幅に対するパーセントとして返す。設定可能である。 新しい値が 0..100 の範囲内にない場合、IndexSizeError を投げる。

region . regionAnchorY

WebVTT 領域アンカー Y オフセットを、領域高さに対するパーセントとして返す。設定可能である。 新しい値が 0..100 の範囲内にない場合、IndexSizeError を投げる。

region . viewportAnchorX

WebVTT 領域ビューポートアンカー X オフセットを、動画幅に対するパーセントとして返す。設定可能である。 新しい値が 0..100 の範囲内にない場合、IndexSizeError を投げる。

region . viewportAnchorY

WebVTT 領域ビューポートアンカー Y オフセットを、動画高さに対するパーセントとして返す。設定可能である。 新しい値が 0..100 の範囲内にない場合、IndexSizeError を投げる。

region . scroll

WebVTT 領域スクロールを表す文字列を、次のように返す:

未設定である場合

空文字列。

up である場合

文字列 "up"。

設定可能である。

VTTRegion() コンストラクターは、呼び出されたとき、次の手順を実行しなければならない:

  1. 新しい WebVTT 領域を作成する。region をその WebVTT 領域とする。

  2. region の WebVTT 領域識別子を空文字列とする。

  3. region の WebVTT 領域幅を 100 とする。

  4. region の WebVTT 領域行数を 3 とする。

  5. region の text track region regionAnchorX を 0 とする。

  6. region の text track region regionAnchorY を 100 とする。

  7. region の text track region viewportAnchorX を 0 とする。

  8. region の text track region viewportAnchorY を 100 とする。

  9. region の WebVTT 領域スクロールを空文字列とする。

  10. region を表す VTTRegion オブジェクトを返す。

id 属性は、取得時には、VTTRegion オブジェクトが表す WebVTT 領域の WebVTT 領域 識別子を返さなければならない。設定時には、 WebVTT 領域識別子を新しい値に設定しなければならない。

width 属性は、取得時には、VTTRegion オブジェクトが表す WebVTT 領域の WebVTT 領域幅を返さなければならない。設定時には、 新しい値が負であるか 100 より大きい場合、IndexSizeError 例外を投げなければならない。そうでない場合、WebVTT 領域幅を新しい値に設定しなければならない。

lines 属性は、取得時には、VTTRegion オブジェクトが表す WebVTT 領域の WebVTT 領域行数を返さなければならない。設定時には、 WebVTT 領域 行数を新しい値に設定しなければならない。

regionAnchorX 属性は、取得時には、 VTTRegion オブジェクトが表す WebVTT 領域の WebVTT 領域 アンカー X オフセットを返さなければならない。設定時には、新しい値が負であるか 100 より大きい場合、 IndexSizeError 例外を投げなければならない。そうでない場合、WebVTT 領域アンカー X 距離を 新しい値に設定しなければならない。

regionAnchorY 属性は、取得時には、 VTTRegion オブジェクトが表す WebVTT 領域の WebVTT 領域 アンカー Y オフセットを返さなければならない。設定時には、新しい値が負であるか 100 より大きい場合、 IndexSizeError 例外を投げなければならない。そうでない場合、WebVTT 領域アンカー Y 距離を 新しい値に設定しなければならない。

viewportAnchorX 属性は、取得時には、 VTTRegion オブジェクトが表す WebVTT 領域の WebVTT 領域ビューポートアンカー X オフセットを返さなければならない。 設定時には、新しい値が負であるか 100 より大きい場合、 IndexSizeError 例外を投げなければならない。そうでない場合、WebVTT 領域ビューポートアンカー X 距離を新しい値に設定しなければならない。

viewportAnchorY 属性は、取得時には、 VTTRegion オブジェクトが表す WebVTT 領域の WebVTT 領域ビューポートアンカー Y オフセットを返さなければならない。 設定時には、新しい値が負であるか 100 より大きい場合、 IndexSizeError 例外を投げなければならない。そうでない場合、WebVTT 領域ビューポートアンカー Y 距離を新しい値に設定しなければならない。

scroll 属性は、取得時には、 VTTRegion オブジェクトが表す WebVTT 領域の WebVTT 領域スクロール 設定が下の表の最初のセルにある行の、2 番目のセルの文字列を返さなければならない:

WebVTT 領域スクロール scroll 値
None ""（空文字列）
Up "up"

設定時には、WebVTT 領域スクロールを、上の表で 2 番目のセルが新しい値に 大文字小文字を区別して一致する行の最初のセルに与えられた値に設定しなければならない。

10. IANA に関する考慮事項

10.1. text/vtt

この登録はコミュニティレビュー用であり、レビュー、承認、および IANA への登録のために IESG に提出される。

型名:
text
サブタイプ名:
vtt
必須パラメーター:
N/A
任意パラメーター:
N/A
符号化に関する考慮事項:
8bit（常に UTF-8）
セキュリティに関する考慮事項:

テキストトラックファイル自体は、機密情報がデータ内に含まれていない限り、直接的なリスクをもたらさない。 しかし実装は、text tracks を処理するときに、特定のオリジンに基づく制限が尊重されることを保証するため、 特定の規則に従うことが求められる。これらの規則を正しく実装できない場合、情報漏えい、クロスサイトスクリプティング攻撃などが発生し得る。

相互運用性に関する考慮事項:

適合する内容と適合しない内容の両方を処理するための規則は、この仕様で定義される。

公開仕様:
この文書が関連する仕様である。
このメディア型を使用するアプリケーション:
Web ブラウザーおよびその他の動画プレーヤー。
追加情報:
マジックナンバー:

WebVTT ファイルはすべて、次のいずれかのバイト列で始まる（ここで "EOF" はファイルの終端を意味する）:

  • EF BB BF 57 45 42 56 54 54 0A
  • EF BB BF 57 45 42 56 54 54 0D
  • EF BB BF 57 45 42 56 54 54 20
  • EF BB BF 57 45 42 56 54 54 09
  • EF BB BF 57 45 42 56 54 54 EOF
  • 57 45 42 56 54 54 0A
  • 57 45 42 56 54 54 0D
  • 57 45 42 56 54 54 20
  • 57 45 42 56 54 54 09
  • 57 45 42 56 54 54 EOF

（任意の UTF-8 BOM、ASCII 文字列 "WEBVTT"、そして 空白、タブ、改行、またはファイルの終端。）

ファイル拡張子:
"vtt"
Macintosh ファイルタイプコード:
この型に対して推奨される特定の Macintosh ファイルタイプコードはない。
詳細情報の連絡先氏名およびメールアドレス:
Silvia Pfeiffer <silviapfeiffer1@gmail.com>
想定される用途:
Common
使用上の制限:
制限は適用されない。
著者:
Silvia Pfeiffer <silviapfeiffer1@gmail.com>, Simon Pieters <simonp@opera.com>, Philip Jägenstedt <philipj@opera.com>, Ian Hickson <ian@hixie.ch>
変更管理者:
W3C

text/vtt リソースにおいて、フラグメント識別子は意味を持たない。

プライバシーおよび セキュリティに関する考慮事項

テキストベース形式のセキュリティ

あらゆるテキストベース形式と同様に、バッファーオーバーラン、値のオーバーフロー（たとえば、与えられた ワード長をオーバーフローする整数の文字列表現）などを引き起こし得る悪意ある内容を構築することは可能である。 実装者は、過度に長い行、フィールド値、または符号化値がセキュリティ上の問題を引き起こさないように、 パーサーの実装に注意を払うべきである。

スタイル付けに関連するプライバシーおよび セキュリティ

WebVTT は CSS スタイルシートを埋め込むことができ、それらは CSS をサポートするユーザーエージェントで適用される。 このような状況では、次の注意点を伴って、CSS のプライバシーおよびセキュリティに関する考慮事項が適用される。

そのようなスタイルシートは外部リソースを取得できず、 ユーザーエージェントがこれを許可しないことがプライバシー上重要である。そうでなければ、WebVTT ファイルは、 ユーザーが特定の動画を視聴したとき、さらにはその動画内の現在時刻までも、第三者に通知されるように作成され得る。

ユーザーエージェントがユーザースタイルシートを提供することは可能であるが、その存在および性質は、 同じユーザーエージェント（たとえばブラウザー）内で実行されるスクリプトからは検出できない。なぜなら、そのようなスタイルシートの CSS オブジェクトモデルはスクリプトに公開されず、getComputedStyle() API では ::before および ::after 以外の擬似要素について算出スタイルを取得する方法がないためである。 [CSSOM]

スクリプトに関連するセキュリティ

WebVTT はスクリプトを含まず、またスクリプトを有効にしない。ユーザーエージェントが WebVTT ファイルに埋め込まれたスクリプトを 実行する手段をサポートしないことが重要である。

しかし、キャプションや字幕を提示するのではなく、スクリプトシステムへの時限入力（「トリガー」）を提供するよう設計された ファイルを構築し配信することは可能である。不適切に書かれたスクリプトまたはスクリプトシステムは、その後、 セキュリティ、プライバシー、またはその他の問題を引き起こし得るが、この考慮事項は実際にはスクリプトシステムに適用される。 WebVTT はこれらのトリガーをそのタイムスタンプで供給するため、悪意あるファイルはそのようなトリガーを非常に高速に提示し、 過度なリソース消費を引き起こす可能性がある。

選好のプライバシー

WebVTT ファイルを選択し、ダウンロードまたは解釈させるユーザーエージェントは、ユーザーがキャプションまたは字幕を必要としていること、 さらにユーザーのキャプションまたは字幕に関する 言語選好を、オリジンサーバーに示す可能性がある。 これはユーザーに関する（小さな）情報片である。しかし、キャプションファイルの提供、およびそれを取得して消費するかどうかの選択は、 実際にはキャプション形式自体の特性ではなく、その提供を行う形式またはプロトコル（たとえば HTML 要素）の特性である。 [HTML]

謝辞

WebVTT テキストトラックファイル形式の基礎として使用された SRT ファイル形式を持つ SubRip ソフトウェアプログラムに取り組んだ、 Zuggy および ai4spam を特に含む SubRip コミュニティに感謝する。

WebVTT が当初規定されていた HTML 標準に取り組んだ Ian Hickson および多くの人々に感謝する。 [HTML]

有用なコメントを寄せてくれた Addison Phillips, Alastor Wu, Andreas Tai, Anna Cavender, Anne van Kesteren, Benjamin Schaaf, Brian Quass, Caitlin Potter, Courtney Kennedy, Cyril Concolato, Dae Kim, David Singer, Eric Carlson, fantasai, Frank Olivier, Fredrik Söderquist, Giuseppe Pascale, Glenn Adams, Glenn Maynard, John Foliot, Kyle Huey, Lawrence Forooghian, Loretta Guarino Reid, Ms2ger, Nigel Megitt, Ralph Giles, Richard Ishida, Rick Eyre, Ronny Mennerich, Theresa O’Connor, and Victor Cărbune に感謝する。

索引

この仕様で定義される用語

参照によって定義される用語

参考文献

規範的参考文献

[BCP47]
A. Phillips, Ed.; M. Davis, Ed.. Tags for Identifying Languages. September 2009. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc5646
[BIDI]
Manish Goregaokar मनीष गोरेगांवकर; Robin Leroy. Unicode Bidirectional Algorithm. 13 August 2025. Unicode Standard Annex #9. URL: https://www.unicode.org/reports/tr9/tr9-51.html
[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. URL: https://drafts.csswg.org/css-align/
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. URL: https://drafts.csswg.org/css-backgrounds/
[CSS-CASCADE-6]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 6. URL: https://drafts.csswg.org/css-cascade-6/
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou. CSS Color Module Level 4. URL: https://drafts.csswg.org/css-color-4/
[CSS-DISPLAY-3]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 3. URL: https://drafts.csswg.org/css-display/
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 4. URL: https://drafts.csswg.org/css-display-4/
[CSS-FLEXBOX-1]
Elika Etemad; Tab Atkins Jr.; Rossen Atanassov. CSS Flexible Box Layout Module Level 1. URL: https://drafts.csswg.org/css-flexbox/
[CSS-FLEXBOX-2]
CSS Flexible Box Layout Module Level 2. Editor's Draft. URL: https://drafts.csswg.org/css-flexbox-2/
[CSS-FONTS-4]
Chris Lilley. CSS Fonts Module Level 4. URL: https://drafts.csswg.org/css-fonts-4/
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. URL: https://drafts.csswg.org/css-overflow-3/
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr.. CSS Positioned Layout Module Level 3. URL: https://drafts.csswg.org/css-position-3/
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad. CSS Box Sizing Module Level 3. URL: https://drafts.csswg.org/css-sizing-3/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3. URL: https://drafts.csswg.org/css-syntax/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal. CSS Text Module Level 3. URL: https://drafts.csswg.org/css-text-3/
[CSS-TEXT-4]
Elika Etemad; et al. CSS Text Module Level 4. URL: https://drafts.csswg.org/css-text-4/
[CSS-TEXT-DECOR-4]
Elika Etemad; Koji Ishii. CSS Text Decoration Module Level 4. URL: https://drafts.csswg.org/css-text-decor-4/
[CSS-TRANSITIONS-1]
Chris Marrin; et al. CSS Transitions Module Level 1. URL: https://drafts.csswg.org/css-transitions/
[CSS-UI-4]
Tab Atkins Jr.; Florian Rivoal. CSS Basic User Interface Module Level 4. URL: https://drafts.csswg.org/css-ui-4/
[CSS-VALUES]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. URL: https://drafts.csswg.org/css-values-4/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. URL: https://drafts.csswg.org/css-writing-modes-3/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. URL: https://drafts.csswg.org/css-writing-modes-4/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. URL: https://drafts.csswg.org/css2/
[CSS22]
Bert Bos. Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification. URL: https://drafts.csswg.org/css2/
[CSS3-COLOR]
Tantek Çelik; Chris Lilley; David Baron. CSS Color Module Level 3. URL: https://drafts.csswg.org/css-color-3/
[CSS3-RUBY]
Elika Etemad; et al. CSS Ruby Annotation Layout Module Level 1. URL: https://drafts.csswg.org/css-ruby-1/
[CSSOM]
Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). URL: https://drafts.csswg.org/cssom/
[DOM]
Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[INFRA]
Anne van Kesteren; Domenic Denicola. Infra Standard. Living Standard. URL: https://infra.spec.whatwg.org/
[MIMESNIFF]
Gordon P. Hemsley. MIME Sniffing Standard. Living Standard. URL: https://mimesniff.spec.whatwg.org/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[RFC3629]
F. Yergeau. UTF-8, a transformation format of ISO 10646. November 2003. Internet Standard. URL: https://www.rfc-editor.org/rfc/rfc3629
[SELECTORS-3]
Tantek Çelik; et al. Selectors Level 3. URL: https://drafts.csswg.org/selectors-3/
[SELECTORS4]
Elika Etemad; Tab Atkins Jr.. Selectors Level 4. URL: https://drafts.csswg.org/selectors/
[WEBIDL]
Edgar Chen; Timothy Gu. Web IDL Standard. Living Standard. URL: https://webidl.spec.whatwg.org/

非規範的参考文献

[MAUR]
Shane McCarron; Michael Cooper; Mark Sadecki. Media Accessibility User Requirements. WD. URL: https://www.w3.org/TR/media-accessibility-reqs/
[WCAG20]
Ben Caldwell; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 11 December 2008. REC. URL: https://www.w3.org/TR/WCAG20/

IDL 索引

enum AutoKeyword { "auto" };
typedef (double or AutoKeyword) LineAndPositionSetting;
enum DirectionSetting { "" /* horizontal */, "rl", "lr" };
enum LineAlignSetting { "start", "center", "end" };
enum PositionAlignSetting { "line-left", "center", "line-right", "auto" };
enum AlignSetting { "start", "center", "end", "left", "right" };
[Exposed=Window]
interface VTTCue : TextTrackCue {
  constructor(double startTime, unrestricted double endTime, DOMString text);
  attribute VTTRegion? region;
  attribute DirectionSetting vertical;
  attribute boolean snapToLines;
  attribute LineAndPositionSetting line;
  attribute LineAlignSetting lineAlign;
  attribute LineAndPositionSetting position;
  attribute PositionAlignSetting positionAlign;
  attribute double size;
  attribute AlignSetting align;
  attribute DOMString text;
  DocumentFragment getCueAsHTML();
};

enum ScrollSetting { "" /* none */, "up" };
[Exposed=Window]
interface VTTRegion {
  constructor();
  attribute DOMString id;
  attribute double width;
  attribute unsigned long lines;
  attribute double regionAnchorX;
  attribute double regionAnchorY;
  attribute double viewportAnchorX;
  attribute double viewportAnchorY;
  attribute ScrollSetting scroll;
};