WebVTT：ウェブビデオテキストトラック形式

W3C 候補勧告

このバージョン:
https://www.w3.org/TR/2019/CR-webvtt1-20190404/
最新公開バージョン:
https://www.w3.org/TR/webvtt1/
編集者ドラフト:
https://w3c.github.io/webvtt/
以前のバージョン:
テストスイート:
https://github.com/web-platform-tests/wpt/tree/master/webvtt
編集者:
(CSIRO)
以前の編集者:
(Opera Software AS)
(NICTA)
(Opera Software ASA)
(Google)
参加方法:
GitHub w3c/webvtt (新しい課題, 未解決の課題, 従来の未解決バグ)
コミット履歴:
GitHub w3c/webvtt/commits
@webvtt

Copyright © 2019 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply.

概要

この仕様はWebVTT、Webビデオテキストトラック形式を定義します。主な用途は、HTML <track> 要素と関連づけて外部テキストトラックリソースをマークアップすることです。 WebVTTファイルは、ビデオコンテンツのキャプションや字幕、テキストビデオ記述 [MAUR]、コンテンツのナビゲーション用チャプター、音声またはビデオコンテンツと時刻同期したあらゆるメタデータの提供をおこないます。

この仕様は Draft Community Group Report および Web Media Text Tracks Community Group に基づいています。

この文書の位置付け

この節は公開時点での文書の位置付けを説明します。他の文書が本書に取って代わる場合があります。最新のW3C出版物と、この技術報告書の最新版はW3C技術報告書インデックス https://www.w3.org/TR/で確認できます。

本書は W3C Timed Text Working Group により候補勧告として作成されました。本書は W3C 勧告となる予定です。本書へのコメントは public-tt@w3.org (購読, アーカイブ) まで、件名の冒頭に [webvtt] と付けて送信してください。ご意見を歓迎します。 W3Cは本書を候補勧告として公開することで、文書が安定していると考えられること、および開発者コミュニティによる実装を推奨していることを示しています。本書は、広範なレビューの機会を確保するため、少なくとも2019年5月2日まで候補勧告のままとなります。

ワーキンググループの 実装報告書 もご参照ください。

この仕様がCR段階を終了するには、本仕様で定義されるすべての機能について、少なくとも2つの独立した実装が実装報告書で文書化されている必要があります。実装報告書は、テストスイートに対する実装者提供のテスト結果に基づきます。ワーキンググループは、実装が公開されていることを必須としませんが、公開を推奨します。

以下の機能はリスクがあり、候補勧告期間中に削除される可能性があります：

初公開ワーキングドラフト WebVTT First Public Working Draft 公開以降に本バージョンへ適用された全変更の累積サマリーは、Changes from FPWD WebVTTで入手できます。

便宜上、このバージョンと以前のWebVTTワーキングドラフトとの差分を示した完全な差分は、Diff from previous Working Draft WebVTTに公開されています。

候補勧告として公開することは、W3Cメンバーシップによる支持を意味しません。本書はドラフト文書であり、随時更新、置き換え、廃止される場合があります。作業途中の成果物以外で引用することは適切ではありません。

この文書は W3C特許ポリシー の下で活動するグループによって作成されました。W3Cは、本グループの成果物に関連して提供された特許開示の公開リストを管理しています。そのページには特許情報開示の手順も記載されています。ある個人が本質的クレームを含むと信じる特許について実際に知っている場合は、W3C特許ポリシー第6節に従って情報開示しなければなりません。

この文書は、2019年3月1日付W3Cプロセス文書に従います。

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ファイルのユースケース種別は利用するソフトウェアによって決まります。たとえば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つ目は発話者ごとに2行、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ボールドオブジェクト の文字色を変更しています。

<!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は、あまり利用されない機能にも対応しています。

この例のようにキューにはIDを付与できます：

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構文上、0-9 で始まるIDなどはエスケープが必要です。ID 123 は "\31 23"（31は"1"のUnicode値）で表現できます。詳細は マークアップや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スパンで指定しています。最初のキューでは"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スパンに限りクローズ不要という特例があります。

スパンは下記のようにスタイル可能です：

::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"設定はビデオ幅のパーセンテージを指します。テキストが垂直ならビデオ高さのパーセンテージに適用されます。

"line-left"、"line-right"はキューボックスにおける"position"基準側（横/縦方向問わず）で、テキスト自体のボックス内位置や方向とは無関係です。

各キューはビデオ幅の35%のみカバーします。これは全キューに共通のキューボックスの"size"です。

1つ目のキューはキューボックスを10%位置に配置します。textが水平なので "line-left"は左側を指し、10%〜45%にキューボックスが位置します。verticalキューの場合、topから35%となります。

テキストは"align"設定で揃えられます。左→右テキストならstartがbox左端・右→左はbox右端です。つまりテキストの方向性に関わらず話者下の位置に固定されます。start揃え時、方向性によりboxが移動しないようcenterが既定です。

2つ目のキューはビデオ幅90%で右揃え、"right"揃えキューボックスです。同効果は"position:55%,line-left"とも指定できます。3つ目は1つ目同様中心揃えです。

この例では2つの話者、2つのリージョンにロールアップキャプションが表示されます。Fredは左半分、Billは右半分。Fredの1つ目のキューは20秒だが12.5秒で消えるのは3行制限で4つ目出現時に押し出されるためです： 

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ファイルはチャプターで構成できます。これは映像のナビゲーションマーカーです。

チャプターは通常1行のプレーンテキストです。

この例ではトークを各スライドごとにチャプター化しています。

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

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つのキューを生成します。これは明らかにミスなので適合チェッカーはエラーとして指摘しますが、ユーザーにキューを表示することは依然として有用です。

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

User agents that support scripting

本仕様のすべての処理要件が適用されます。ユーザーエージェントは本仕様の IDL 断片に対しても適合する実装でなければなりません（Web IDL 仕様で定義されているとおり）。 [WEBIDL-1]

User agents with no scripting support

本仕様のすべての処理要件が適用されますが、§6.5 WebVTT キューテキスト DOM 構築規則 と §9 API の要件は除外されます。

User agents that do not support CSS

本仕様のすべての処理要件が適用されますが、スタイルシートおよび CSS に関連する §6 解析 の一部、および §7 レンダリング と §8 CSS 拡張 の全ては適用されません。代わりに、ユーザーエージェントは WebVTT キャプションまたは字幕キューテキスト 内のテキストのみを適切な方法でレンダリングし、§5 WebVTT キャプションまたは字幕キューコンポーネントの既定クラス で定義された色クラスを明示的にサポートしなければなりません。その他のスタイリング指示は任意です。

User agents that do not support a full HTML CSS engine

本仕様のすべての処理要件が適用されます。特に §5 WebVTT キャプションまたは字幕キューコンポーネントの既定クラス で定義された色クラスも含まれます。しかしながら、ユーザーエージェントは §6 解析、§7 レンダリング、および §8 CSS 拡張 にある CSS 関連機能を、フル機能の CSS をサポートするレンダラーと等価な結果を生成する方法で適用する必要があります。

User agents that support a full HTML CSS engine

本仕様のすべての処理要件が適用されます。ただし、フル CSS エンジンをサポートしないユーザーエージェントが CSS 機能の同等物を実装する必要があるため、許可される CSS スタイルは限定されます。フル CSS エンジンをサポートするユーザーエージェントは、WebVTT に対して適用する CSS スタイルを限定し、仕様外の余計な CSS スタイルが混入しないようにする必要があります。

Conformance checkers

適合チェッカーは WebVTT ファイル が本仕様で記述された適用される適合基準に従っているかを検証しなければなりません。本仕様において「validator」は適合チェッカーと同義です。

Authoring tools

オーサリングツールは、適合する 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 要素で規定します。 [HTML51].

WebVTT ファイルは一種類のデータのみを含めるべきであり、異なる種類のデータを混在させてはなりません。WebVTT ファイルのデータ種類は外部で指定されます（例：HTML ファイルの text track 要素）。環境はデータを正しく解釈する責任を負います。

WebVTT のキャプションまたは字幕キューは、ビデオビューポートの上にオーバーレイとして、またはビデオビューポートのサブ領域であるリージョンにレンダリングされます。

3.2. WebVTT キュー

WebVTT キュー は、さらに次を含む text track cue [HTML51] です：

キューテキスト

キューの生テキストと、その解釈のルール。

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

WebVTT キャプションまたは字幕キュー は、WebVTT キュー の一種であり、キューテキスト をレンダリングし DOM 断片に変換するための次の追加プロパティを持ちます：

キューボックス

WebVTT キュー のキューボックスは、その中ですべての行のテキストがレンダリングされるボックスです。キューがリージョンの一部である場合はリージョン内に、そうでなければビデオのビューポート内にレンダリングされます。

キューボックス のビデオビューポートまたはリージョン内での位置は、WebVTT キュー位置 と WebVTT キューライン の値に依存します。

行の長さに応じて、行は キューボックス の サイズ に収まるように折り返されます。

書字方向

書字方向は次のいずれかです：

  • 水平（行は水平方向に伸び、ビデオビューポートの上端から垂直方向にオフセットされ、連続する行は下に表示される）,
  • 左方向に成長する垂直（行は垂直に伸び、ビデオビューポートの右端から水平方向にオフセットされ、連続する行は左側に表示される）, または
  • 右方向に成長する垂直（行は垂直に伸び、ビデオビューポートの左端から水平方向にオフセットされ、連続する行は右側に表示される）.

書字方向は、line、position、および size の解釈に影響し、それらをビデオの幅または高さに対して解釈するかを決めます。

デフォルトでは、書字方向は 水平 に設定されています。

左方向に成長する垂直書字方向は中国語・日本語・韓国語の縦書きに使用でき、右方向に成長する垂直書字方向はモンゴル語の縦書きに使用できる可能性があります。

snap-to-lines フラグ

最初の行の行高を用いて行が整数行数であるか、あるいはビデオの寸法の割合であるかを示すブール値です。行が数えられている場合はフラグは true、そうでない場合は false に設定されます。

フラグが false のキューは、同じ位置に複数のキューがある場合に重なり回避を考慮して要求どおりにオフセットされます。

デフォルトでは snap-to-lines フラグ は true に設定されます。

ライン

ライン は キューボックス の位置付けを定義します。

ライン は書字方向、snap-to-lines フラグ、または他に表示中のトラックによって占められている行に応じて、キューボックスをビデオの上端、右端、または左端からオフセットします。

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

デフォルトでは ライン は auto に設定されます。

もし書字方向が 水平 であれば、ラインのパーセンテージはビデオの高さを基準とし、そうでなければ幅を基準とします。

WebVTT キュー には、以下のアルゴリズムによって返される値を持つ 計算済みライン があります。これはキューの他の側面に基づいて定義されます：

  1. もし ライン が数値であり、かつその snap-to-lines フラグ が false、さらに ライン が負または 100 より大きい場合は、100 を返してこれらの手順を中止します。

    WebVTT パーサは ライン を 0..100 範囲外の数値に設定し、かつ snap-to-lines フラグ を false に設定することはありませんが、DOM API の snapToLines および line 属性を使用した場合にはこのようなことが発生する可能性があります。

  2. もし ライン が数値であれば、その ライン の値を返してこれらの手順を中止します。（snap-to-lines フラグが true の場合は 0..100 範囲外の任意の値も有効、あるいは値が 0..100 範囲内であればそのフラグの値にかかわらず有効です。）

  3. もし該当 snap-to-lines フラグ が false であれば、値 100 を返してこれらの手順を中止します。（ライン が特殊値 auto である場合。）

  4. 変数 cue を該当の WebVTT キュー とします。

  5. もし cue が テキストトラックのキューの一覧 に含まれていない、またはその テキストトラック が メディア要素のテキストトラック一覧 に含まれていない場合は −1 を返してこれらの手順を中止します。

  6. 変数 track を、該当の cue が含まれている テキストトラック とします。

  7. 変数 n を、テキストトラック のうち、その モード が showing であり、かつ track の前にメディア要素のテキストトラック一覧に存在するトラックの数とします。

  8. n を1増やします。

  9. n に符号を付け替えます（負にします）。

  10. n を返します。

たとえば、あるメディア要素で同時に2つのテキストトラックが showing になっており、それぞれのテキストトラックにアクティブな WebVTT キュー があり、その line が両方とも auto の場合、最初のテキストトラックのキューの計算済みラインは −1、2番目は −2 になります。

ライン揃え

キューボックスのラインに対する揃え方で、次のいずれかです：

開始揃え（Start alignment）
キューボックスの上側（水平キューの場合）、左側（vertical growing right の場合）、または右側（vertical growing left の場合）がラインに揃えられます。
中央揃え（Center alignment）
キューボックスはライン上で中央に配置されます。
終端揃え（End alignment）
キューボックスの下側（水平キューの場合）、右側（vertical growing right の場合）、または左側（vertical growing left の場合）がラインに揃えられます。

デフォルトで ライン揃え は start に設定されます。

ライン揃えは テキスト揃え とは別物です — 右から左と左から右のキューテキストはライン揃えには影響しません。

位置（position）

位置 は、書字方向に沿ったキューボックスのインデントを定義します。

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

キューが リージョン 内でない場合、パーセンテージ値はビデオの寸法に対する割合として解釈されます。リージョン内であればリージョン寸法に対する割合として解釈されます。

デフォルトでは 位置 は auto に設定されます。

書字方向が 水平 の場合、位置のパーセンテージはビデオの幅に対して相対的に解釈され、そうでなければ高さに対して相対的に解釈されます。

WebVTT キュー には、以下のアルゴリズムによって返される値を持つ 計算済み位置 があります：

  1. もし 位置 が 0 から 100 の間の数値であれば、その値を返して手順を中止します。（それ以外の場合、位置は特殊値 auto です。）

  2. もし テキスト揃え が left であれば、0 を返して手順を中止します。

  3. もし テキスト揃え が right であれば、100 を返して手順を中止します。

  4. それ以外の場合、50 を返して手順を中止します。

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

水平キューで右から左のテキストであっても、キューボックスはビデオビューポートの左端から位置指定されます。これにより左から右、右から左、または両方のテキストを収容できるレンダリングスペーステンプレートを定義できます。

サイズが 100% でない WebVTT キュー に対して、テキスト揃えが start または end の場合、作成者はデフォルトの auto 位置を使用してはなりません。

テキスト揃えが start または end の場合、auto 位置は 50% です。これは left と right 揃えのテキストに対して auto がそれぞれ 0% と 100% になるのとは異なります。この要件は、キューのテキストが行ごとに左→右または右→左の基底方向を持ち得るため、自動配置が予期しない結果になる可能性があるため導入されています。

位置揃え（position alignment）

書字方向の次元におけるキューボックスの揃えを記述し、位置がどの部分にアンカーされるかを表します。次のいずれかです：

ライン左揃え（line-left）
キューボックスの左側（水平キューの場合）または上側（それ以外の場合）が位置に揃えられます。
中央揃え（center）
キューボックスは位置で中央に配置されます。
ライン右揃え（line-right）
キューボックスの右側（水平キューの場合）または下側（それ以外の場合）が位置に揃えられます。
自動揃え（auto）
キューボックスの揃えはキューの テキスト揃え の値に依存します。

デフォルトで 位置揃え は auto に設定されます。

WebVTT キューは、以下のアルゴリズムによって返される値を持つ 計算済み位置揃え を持ちます：

  1. もし 位置揃え が auto でなければ、その値を返して手順を中止します。

  2. もし テキスト揃え が left であれば、line-left を返して手順を中止します。

  3. もし テキスト揃え が right であれば、line-right を返して手順を中止します。

  4. もし テキスト揃え が start であれば、キューテキストの基底方向が左→右の場合は line-left を、そうでなければ line-right を返して手順を中止します。

  5. もし テキスト揃え が end であれば、基底方向が左→右のとき line-right を、そうでなければ line-left を返して手順を中止します。

  6. それ以外の場合、center を返します。

位置は常にビデオの左（水平キューの場合）または上（それ以外の場合）から測定されるため、位置揃え の line-left の値は、水平と垂直のキューで left と top の間で変化します。

サイズ

キューボックスのサイズを示す数値であり、書字方向によって定義されるビデオに対するパーセンテージとして解釈されます。

デフォルトで WebVTT キューサイズ は 100% に設定されます。

書字方向が 水平 の場合、サイズのパーセンテージはビデオの幅に対して相対的に解釈され、そうでなければ高さに対して相対的に解釈されます。

テキスト揃え

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

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

デフォルトで テキスト揃え は 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 フォーマットコード文字を使用して達成できます。

この例では、bidi フォーマットコード文字が使用されていないと仮定すると、キューテキストは "I’ve read the book 3 דנליונ times!" のようにレンダリングされます（つまり "3" が書籍タイトルの反対側に来てしまう）。

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 です。各行のテキスト揃えをその行の基底方向と一致させたい場合（例：英語は左揃え、ヘブライ語は右揃え）、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 cue において、その active flag が設定された状態で 書字方向、行にスナップするフラグ、行、 行揃え、位置、位置揃え、サイズ、文字揃え、リージョン、または テキスト が変更された場合、ユーザーエージェントは テキストトラックキュー表示状態 を空にし、直ちにその テキストトラック の WebVTT テキストトラックの表示を更新するための規則 を実行しなければなりません。

3.4. WebVTT キャプションまたは字幕のリージョン

A WebVTT region はビデオビューポートの一部分を表し、WebVTT キャプションまたは字幕キュー のための限定されたレンダリング領域を提供します。

リージョンはキャプションや字幕のキューをグループ化して一緒に描画する手段を提供し、特に上方向へのスクロール時に重要です。

各 WebVTT リージョン は以下から構成されます：

識別子

U+0020 SPACE または U+0009 CHARACTER TABULATION（タブ）以外の任意の長さ（0文字以上）の文字列。文字列はサブストリング "-->" を含んではならない。デフォルトは空文字列。

幅

各行のテキストがレンダリングされるボックスの幅を示す数値で、ビデオ幅に対するパーセンテージとして解釈されます。デフォルトは 100 です。

行数値

各行のテキストがレンダリングされるボックス内の行数を示す数値。デフォルトは 3 です。

WebVTT リージョンは固定されたレンダリング領域を定義するため、リージョンが許容する行数より多い行を持つキューは切り捨てられます。スクロールするリージョンでは切り捨ては上側で発生し、スクロールしないリージョンでは下側で発生します。

リージョンアンカーポイント

リージョン内の x および y 座標を表す 2 つの数値で、これがビデオビューポートに固定され、フォントサイズの変更などでリージョンが移動しても位置が変わりません。デフォルトは (0,100)、すなわちリージョンの左下隅です。

リージョンビューポートアンカーポイント

リージョンアンカーポイントが固定されるビデオビューポート内の x および y 座標を表す 2 つの数値。デフォルトは (0,100)、すなわちビデオビューポートの左下隅です。

スクロール値

次のいずれか：

None
リージョン内のキューはスクロールせず、最初に描画された位置に固定されることを示します。
Up
リージョン内のキューがリージョンの下端に追加され、既に表示されているキューを上方に押し上げて、新しいキューの全行がリージョン内に見えるようになることを示します。

以下の図はリージョンをビデオビューポートにアンカーする仕組みを説明します。黒い十字がアンカーで、オレンジはリージョン内でのアンカーのオフセット、緑はビデオビューポート内でのアンカーのオフセットを示します。付箋をボードにピンで留めるように考えてください：

visual explanation of WebVTT regions
図の説明: ビデオビューポート内に WebVTT リージョンがあります。リージョン内には黒い十字で示されたアンカーポイントがあります。ビデオビューポートの端からアンカーまでの垂直・水平方向の距離は緑の矢印で示され、これがリージョンビューポートアンカーの X および Y オフセットを表します。リージョンの端からアンカーまでの垂直・水平方向の距離はオレンジの矢印で示され、これがリージョンアンカーの X および Y オフセットを表します。リージョンのサイズは水平方向に対しては region width、垂直方向に対しては region lines で表されます。

パースのために、次も必要です：

テキストトラックのリージョン一覧

ゼロ個以上の WebVTT リージョン のリスト。

3.5. WebVTT チャプターキュー

A WebVTT chapter cue は、WebVTT cue で、その cue text がチャプターのナビゲーション対象を記述するチャプタータイトルとして解釈されるものです。

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

3.6. WebVTT メタデータキュー

A WebVTT metadata cue は、WebVTT cue で、その cue text が時間に整列したメタデータとして解釈されるものです。

4. 構文

4.1. WebVTT ファイル構造

A WebVTT ファイル は、UTF-8 でエンコードされ、MIME タイプ text/vtt が付与された WebVTT ファイル本文 で構成されなければなりません。[RFC3629]

A WebVTT ファイル本文 は、次のコンポーネントを以下の順序で含みます：

  1. 任意の U+FEFF バイトオーダーマーク（BOM）文字。
  2. 文字列 "WEBVTT"。
  3. 任意で U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（タブ）文字と、それに続く U+000A LINE FEED（LF）または U+000D CARRIAGE RETURN（CR） 以外の任意の数の文字。
  4. ファイルマジック行を終了し本文と区切るための 2 個以上の WebVTT 行終端。
  5. ゼロ個以上の WebVTT リージョン定義ブロック、WebVTT スタイルブロック、および WebVTT コメントブロック が、それぞれ 1 個以上の WebVTT 行終端 で区切られて並ぶ。
  6. ゼロ個以上の WebVTT 行終端。
  7. ゼロ個以上の WebVTT キューブロック および WebVTT コメントブロック が、それぞれ 1 個以上の WebVTT 行終端 で区切られて並ぶ。
  8. ゼロ個以上の WebVTT 行終端。

A WebVTT 行終端 は次のいずれかで構成されます：

A 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. ゼロ個以上の U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（タブ）文字。
  3. WebVTT 行終端。
  4. WebVTT リージョン設定リスト。
  5. WebVTT 行終端。

A 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. ゼロ個以上の U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（タブ）文字。
  3. WebVTT 行終端。
  4. U+000A LINE FEED（LF）文字および U+000D CARRIAGE RETURN（CR）文字以外の任意の文字の 0 個以上の並びで、各要素は任意で次の要素と WebVTT 行終端 で区切られる。ただし、全体の結果文字列はサブストリング "-->" を含んではならない。文字列は CSS スタイルシートを表し、関連する CSS 仕様で与えられる要件が適用される。 [CSS22]
  5. WebVTT 行終端。

A WebVTT キューブロック は、次のコンポーネントを与えられた順序で含みます：

  1. 任意で WebVTT キュー識別子 とそれに続く WebVTT 行終端。
  2. WebVTT キュータイミング。
  3. 任意で 1 個以上の U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（タブ）文字と、それに続く WebVTT キュー設定リスト。
  4. WebVTT 行終端。
  5. cue payload： WebVTT キャプションまたは字幕キューテキスト、WebVTT チャプタタイトルテキスト、または WebVTT メタデータテキスト のいずれかで、ただしサブストリング "-->" を含んではならない。
  6. WebVTT 行終端。

WebVTT キューブロック は、例えば 1 つの字幕のように、WebVTT ファイル における時間整列された 1 つのテキストまたはデータに対応します。cue payload はキューに関連付けられたテキストまたはデータです。

A WebVTT キュー識別子 は、サブストリング "-->" を含まず、U+000A LINE FEED（LF）文字や U+000D CARRIAGE RETURN（CR）文字を含まない、1 文字以上の任意の文字列です。

A WebVTT キュー識別子 は、すべての WebVTT キュー識別子 の中で一意でなければなり、すべての WebVTT キュー の識別子と重複してはなりません。

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

The WebVTT キュータイミング 部分は、WebVTT キューブロック の以下のコンポーネントを与えられた順序で含みます：

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

WebVTT キュータイミング は WebVTT キューブロック の開始および終了オフセットを示します。異なるキューは重なり得ます。キューは常に開始時刻順に並べられます。

A WebVTT タイムスタンプ は、次のコンポーネントを与えられた順序で含みます：

  1. 任意（hours が 0 でない場合は必須）：
    1. 2 桁以上の ASCII 数字、hours を 10 進整数として表す。
    2. U+003A コロン文字 (:)。
  2. 2 桁の ASCII 数字、minutes を 10 進整数として 0 ≤ minutes ≤ 59 の範囲で表す。
  3. U+003A コロン文字 (:)。
  4. 2 桁の ASCII 数字、seconds を 10 進整数として 0 ≤ seconds ≤ 59 の範囲で表す。
  5. U+002E ピリオド文字 (.)。
  6. 3 桁の ASCII 数字、秒の千分の一を表す seconds-frac を 10 進整数として表す。

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

A WebVTT キュー設定リスト は、任意の順序で並べられた 0 個以上の WebVTT キュー設定 の列で構成され、各設定は 1 個以上の U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（タブ）文字で区切られます。各設定は以下のコンポーネントを指定された順序で含みます：

  1. WebVTT キュー設定名。
  2. 任意の U+003A コロン (:) 文字。
  3. 任意の WebVTT キュー設定値。

A WebVTT キュー設定名 および WebVTT キュー設定値 は、それぞれ U+000A LINE FEED（LF）文字および U+000D CARRIAGE RETURN（CR）文字を含まない 1 文字以上の任意の文字列で構成されます。ただし、全体の結果文字列はサブストリング "-->" を含んではなりません。

A WebVTT パーセンテージ は次のコンポーネントで構成されます：

  1. 1 つ以上の ASCII 数字。
  2. 任意で：
    1. U+002E ドット文字 (.)。
    2. 1 つ以上の ASCII 数字。
  3. U+0025 パーセント記号 (%)。

数値として解釈される場合、WebVTT パーセンテージ は 0..100 の範囲内でなければなりません。

A WebVTT コメント ブロック は、次のコンポーネントを与えられた順序で含みます：

  1. 文字列 "NOTE"。
  2. 任意で、次のコンポーネントを与えられた順序で含む：
    1. いずれか：
      • U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（タブ）文字。
      • WebVTT 行終端。
    2. U+000A LINE FEED（LF）文字および U+000D CARRIAGE RETURN（CR）文字以外の任意の文字の 0 個以上の並びで、各要素は任意で次の要素と WebVTT 行終端 で区切られる。ただし、全体の結果文字列はサブストリング "-->" を含んではならない。
  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 の metadata text track kind を使う場合）にのみ有用です。

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

WebVTT キャプションまたは字幕キューテキスト は、cue payload で、任意の順序で並んだゼロ個以上の WebVTT キャプションまたは字幕キュー構成要素 からなり、それぞれは任意で次の要素と WebVTT 行終端 で区切られます。

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

HTML 文字参照を除くすべての WebVTT キャプションまたは字幕キュー構成要素 には、ピリオド ('.') 表記を使って、キュー構成要素の開始タグに続けてキュー構成要素クラス名を付与することができます。クラス名は「ピリオド」の直後に続かなければなりません。

WebVTT キュー内部テキスト は、任意の WebVTT 行終端 と、続いて任意の順序で並んだゼロ個以上の WebVTT キャプションまたは字幕キュー構成要素 からなり、それぞれは任意で次の要素と WebVTT 行終端 を伴います。

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

A WebVTT キュー斜体スパン は、注釈を許可しない WebVTT キュースパン開始タグ "i"、斜体化されたテキストを表す WebVTT キュー内部テキスト、および注釈を許可しない WebVTT キュースパン終了タグ "i" から構成されます。

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

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

A WebVTT キュールビースパン は、次のコンポーネントを与えられた順序で含みます：

  1. WebVTT キュースパン開始タグ "ruby"（注釈を許可しない）。
  2. 次のコンポーネント群を 1 回以上、与えられた順序で繰り返す：
    1. WebVTT キュー内部テキスト（ルビの基底となるテキスト）。
    2. WebVTT キュースパン開始タグ "rt"（注釈を許可しない）。
    3. WebVTT キュールビーテキストスパン：WebVTT キュー内部テキスト（ルビ注釈のルビ部分を表す）。
    4. WebVTT キュースパン終了タグ "rt"。このコンポーネント群が WebVTT キュールビースパン の最後の繰り返しである場合、この最後の終了タグ文字列は省略されてもよい。
  3. 最後の終了タグ文字列が省略されなかった場合：任意で WebVTT 行終端。
  4. 最後の終了タグ文字列が省略されなかった場合：ゼロ個以上の U+0020 SPACE 文字または U+0009 CHARACTER TABULATION（タブ）文字、それぞれは任意で WebVTT 行終端 を伴う。
  5. WebVTT キュースパン終了タグ "ruby"。

キューの位置指定は基底テキストの位置を制御し、ルビテキストの位置を制御するものではありません。

WebVTT のルビは HTML のルビ機能のサブセットです。将来的に HTML と CSS でこれらの機能がより成熟した際には、ルビ基底テキスト用のオブジェクトや複雑なルビ対応が追加される可能性があります。 [HTML51] [CSS3-RUBY]

A WebVTT キューボイススパン は、次のコンポーネントを与えられた順序で含みます：

  1. WebVTT キュースパン開始タグ "v"（注釈を要求する；注釈は声の名前を表す）。
  2. WebVTT キュー内部テキスト。
  3. WebVTT キュースパン終了タグ "v"。この WebVTT キューボイススパン がその 構成要素 の唯一のものである場合、終了タグは省略してよい。

A WebVTT キューロケールスパン は、次のコンポーネントを与えられた順序で含みます：

  1. WebVTT キュースパン開始タグ "lang"（注釈を要求する；注釈は次のコンポーネントの言語を表し、有効な BCP 47 言語タグでなければならない）。 [BCP47]
  2. WebVTT キュー内部テキスト。
  3. WebVTT キュースパン終了タグ "lang"。

上記の有効な BCP 47 言語タグに関する要件は作成者向けの要件であり、適合性チェッカーは言語タグの妥当性を検査しますが、他のユーザーエージェントはそうしないことがあります。

A WebVTT キュースパン開始タグ は tag name を持ち、注釈を要求するか否かの指定があり、次のコンポーネントを与えられた順序で含みます：

  1. U+003C LESS-THAN SIGN 文字 (<)。
  2. tag name。
  3. 次のシーケンスをゼロ回以上繰り返す：
    1. U+002E FULL STOP 文字 (.)
    2. U+0009 CHARACTER TABULATION（タブ）、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（タブ）文字と続き、次のコンポーネントの 1 つ以上が続き、それらの表現の連結は U+0020 SPACE および U+0009 CHARACTER TABULATION（タブ）以外の少なくとも 1 文字を含む値を持たなければなりません：

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

A WebVTT キュースパン終了タグ は tag name を持ち、次のコンポーネントを与えられた順序で含みます：

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

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

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

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

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

WebVTT チャプタタイトルテキスト は cue text であり、次のコンポーネントを 0 個以上使用できます。それぞれは任意で次の要素と WebVTT 行終端 で区切られます：

4.3. WebVTT リージョン設定

A WebVTT キュー設定リスト は WebVTT リージョン への参照を含むことができます。リージョンを定義するために、WebVTT リージョン定義ブロック が指定されます。

The WebVTT リージョン設定リスト は、次のコンポーネントを任意の順序で 0 個以上含み、各コンポーネントは 1 個以上の U+0020 SPACE 文字、U+0009 CHARACTER TABULATION（タブ）文字、または WebVTT 行終端 によって区切られます。ただし、文字列は 2 つの連続した WebVTT 行終端 を含んではなりません。各コンポーネントは WebVTT リージョン設定リスト 文字列ごとに複数回含めてはなりません。

The WebVTT リージョン設定リスト は、リージョンの寸法、位置決め、およびアンカリングに関する構成オプションを提供します。たとえば、リージョン内の一群のキューをリージョンの中央およびビデオビューポートの中央にアンカーすることができます。この場合、フォントサイズが大きくなると、リージョンは中心から全方向に均等に拡大します。

A WebVTT リージョン識別子設定 は、次のコンポーネントを与えられた順序で含みます：

  1. 文字列 "id"。

  2. U+003A コロン文字 (:)。

  3. ASCII 空白以外の 1 文字以上からなる任意の文字列。文字列はサブストリング "-->" を含んではなりません。

A WebVTT リージョン識別子設定 は、すべての WebVTT リージョン識別子設定 の中で、同一の WebVTT リージョン を持つ WebVTT ファイル 内で一意でなければなりません。

A WebVTT リージョン識別子設定 は、各 WebVTT キュー設定リスト に存在しなければなりません。識別子がなければ、構文上で WebVTT キュー を WebVTT リージョン に関連付けることはできません。

The WebVTT リージョン識別子設定 は、リージョンに名前を付け、リージョンに属するキューから参照できるようにします。

A WebVTT リージョン幅設定 は、次のコンポーネントを与えられた順序で含みます：

  1. 文字列 "width"。

  2. U+003A コロン文字 (:)。

  3. WebVTT パーセンテージ。

The WebVTT リージョン幅設定 は、キューがレンダリングされるリージョンの固定幅をビデオ幅に対するパーセンテージとして提供し、揃えの計算基準となります。

A WebVTT リージョン行数設定 は、次のコンポーネントを与えられた順序で含みます：

  1. 文字列 "lines"。

  2. U+003A コロン文字 (:)。

  3. 1 つ以上の ASCII 数字。

The WebVTT リージョン行数設定 は、キューがレンダリングされるリージョンの高さを行数で固定します。したがって、スクロールリージョンであればロールアップ領域の高さを定義します。

A WebVTT リージョンアンカー設定 は、次のコンポーネントを与えられた順序で含みます：

  1. 文字列 "regionanchor"。

  2. U+003A コロン文字 (:)。

  3. WebVTT パーセンテージ。

  4. U+002C コンマ文字 (,)。

  5. WebVTT パーセンテージ。

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

A WebVTT リージョンビューポートアンカー設定 は、次のコンポーネントを与えられた順序で含みます：

  1. 文字列 "viewportanchor"。

  2. U+003A コロン文字 (:)。

  3. WebVTT パーセンテージ。

  4. U+002C コンマ文字 (,)。

  5. WebVTT パーセンテージ。

The WebVTT リージョンビューポートアンカー設定 は、リージョンアンカーポイントがアンカーされるビデオビューポート内の点を指定する 2 つのパーセンテージのタプルを提供します。最初のパーセンテージはビデオビューポートボックスの左上からの x 次元を、2 番目は y 次元を測ります。リージョンビューポートアンカーが与えられない場合、デフォルトは 0%、100%（すなわち左下隅）です。

ブラウザにおいては、リージョンはビデオビューポートに対して絶対配置された CSS ボックスにマップされます。すなわち、リージョンが絶対配置される基準となる相対配置されたボックスがビデオビューポートを表します。オーバーフローは隠されます。

A WebVTT リージョンスクロール設定 は、次のコンポーネントを与えられた順序で含みます：

  1. 文字列 "scroll"。

  2. U+003A コロン文字 (:)。

  3. 文字列 "up"。

The WebVTT リージョンスクロール設定 は、リージョン内にレンダリングされたキューが初期の描画位置から移動してロールアップ（すなわちビデオビューポートの上方向へ移動）することを許可するかどうかを指定します。スクロール設定が省略された場合、キューはレンダリング位置から移動しません。

キューは既存のキュー行の下に一行ずつリージョンに追加されます。既にレンダリングされている行が削除され、それが他のレンダリング済みの行の上にあった場合、その行はそのスペースに移動し、指定された方向にスクロールします。リージョンに新しい行を追加するのに十分なスペースがない場合、最上部の行が表示領域から押し出され（overflow:hidden によって徐々に見えなくなり）、これにより新しい行を追加するためのスペースが確保されます。

スクロール方向がない場合、キュー行はリージョンの下端に最も近い空いている行に追加されます。空き行がない場合は、最も古い行が置き換えられます。

4.4. WebVTT キュー設定

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

たとえば、一連の WebVTT キュー設定により、キューボックスを左に揃えたり、右上に配置してキューテキストを中央揃えにしたりすることができます。

現在利用可能な WebVTT キュー設定 で、WebVTT キュー設定リスト に現れる可能性のあるものは次のとおりです：

これらの各設定は、WebVTT キュー設定リスト ごとに複数回含めてはなりません。

A WebVTT 縦書きキュー設定 は WebVTT キュー設定 で、次のコンポーネントを与えられた順序で含みます：

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

  2. U+003A コロン文字 (:)。

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

A WebVTT 縦書きキュー設定 は、キューに水平レイアウトではなく縦書きレイアウトを使用するよう設定します。縦書きレイアウトは日本語などで使用されることがあります。デフォルトは水平レイアウトです。

A WebVTT 行キュー設定 は、次のコンポーネントを与えられた順序で含みます：

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

  2. U+003A コロン文字 (:)。

  3. 以下を WebVTT キュー設定値 として:

    1. オフセット値、いずれか：
      ビデオビューポートに対する特定のオフセットを表す場合

      WebVTT パーセンテージ。

      または行番号を表す場合
      1. 任意で U+002D ハイフン文字 (-)。
      2. 1 つ以上の ASCII 数字。
    2. 任意の揃え値、次のコンポーネントから構成される可能性があります：
      1. U+002C コンマ文字 (,)
      2. 次の文字列のいずれか："start"、"center"、"end"

A WebVTT 行キュー設定 は、書字方向に直交する方向におけるビデオビューポート端からのキューボックスのオフセットを設定します。水平キューの場合、これはビデオビューポートの上端からの垂直オフセットを意味し、垂直キューの場合は水平方向のオフセットです。オフセットは 開始、中央、または 終了 のどれに対するものであるかは WebVTT キュー行揃え の値によります（デフォルトは start）。オフセットは、関連する書字モード依存のビデオビューポート寸法のパーセンテージ、または行番号で指定できます。行番号はキューの最初の行のサイズに基づきます。正の行番号はビデオビューポートの開始から数え（最初の行は 0 番）、負の行番号はビデオビューポートの終端から数えます（最後の行は −1 番）。

A WebVTT ポジションキュー設定 は、次のコンポーネントを与えられた順序で含みます：

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

  2. U+003A コロン文字 (:)。

  3. 以下を WebVTT キュー設定値 として:

    1. 位置値：WebVTT パーセンテージ。
    2. 任意の揃え値、次のコンポーネントから構成されます：
      1. U+002C コンマ文字 (,)
      2. 次の文字列のいずれか："line-left"、"center"、"line-right"

A WebVTT ポジションキュー設定 は、WebVTT 行キュー設定 に直交する方向での キューボックス の位置（インデント）を設定します。水平キューではこれは水平方向の位置です。キュー位置はビデオビューポートのパーセンテージで与えられます。位置指定はキューボックスの line-left、center、または line-right に対して行われ、これはキューの計算済み位置揃え（computed position alignment）によって決まり、WebVTT ポジションキュー設定 により上書きされます。

A WebVTT サイズキュー設定 は、次のコンポーネントを与えられた順序で含みます：

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

  2. U+003A コロン文字 (:)。

  3. 以下を WebVTT キュー設定値 として：WebVTT パーセンテージ。

A WebVTT サイズキュー設定 は、WebVTT ポジションキュー設定 と同じ方向における キューボックス のサイズを設定します。水平キューの場合、これはキューボックスの幅です。ビデオビューポートの幅に対するパーセンテージで与えられます。

A WebVTT 揃え（アライン）キュー設定 は、次のコンポーネントを与えられた順序で含みます：

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

  2. U+003A コロン文字 (:)。

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

A WebVTT 揃えキュー設定 は、キュー内のテキストの揃えを設定します。"start" と "end" のキーワードは、キューテキスト行の基底方向に相対的です。左から右への英語テキストでは "start" は左揃えを意味します。

A WebVTT リージョンキュー設定 は、次のコンポーネントを与えられた順序で含みます：

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

  2. U+003A コロン文字 (:)。

  3. 以下を WebVTT キュー設定値 として：WebVTT リージョン識別子。

A WebVTT リージョンキュー設定 は、リージョンの識別子を参照することでキューをそのリージョンの一部にするよう構成します。ただし、キューに "vertical"、"line"、または "size" のキュー設定がある場合は除きます。キューがリージョンの一部である場合、その "position" および "align" のキュー設定は、ラインボックスをリージョンボックスに対して適用し、キューボックスの幅と高さはビューポート寸法ではなくリージョン寸法に対して計算されます。

4.5. キューシーケンスの特性

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

A WebVTT ファイル のすべてのキューが次の規則に従う場合、そのファイルは 入れ子のキューのみを使用する WebVTT ファイル と呼ばれます：

任意の二つのキュー cue1 と cue2 が、それぞれ開始および終了時刻オフセット (x1, y1) および (x2, y2) を持つとき、

次の例はこの定義に一致します：

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 番目が終了する前に最初が終了します。したがって、これは 入れ子のキューのみを使用する WebVTT ファイル ではありません。

4.6. WebVTT ファイルの種類

WebVTT ファイルの構文定義は、さまざまなキューを混在させた多様な WebVTT ファイルの作成を可能にします。しかし、通常作成されるのは WebVTT ファイル型のごく一部です。

適合性チェッカーは、WebVTT ファイル を検証する際に、これらの型を検証するために構文チェックを制限するオプションを提供することがあります。

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

A WebVTT ファイル whose cues all have a cue payload that is WebVTT metadata text is said to be a WebVTT file using metadata content.

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

A WebVTT file using chapter title text is a WebVTT file using only nested cues whose cues all have a cue payload that is WebVTT chapter title text.

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

A WebVTT ファイル whose cues all have a cue payload that is WebVTT caption or subtitle cue text is said to be a WebVTT file using caption or subtitle cue text.

5. WebVTT キャプションまたは字幕のキュー構成要素のデフォルトクラス

多くのキャプション形式は、テキストの限られたサブセットの色や背景色を指定する簡易な方法を持っています。したがって、WebVTT 仕様は、著者が色付きテキストやテキスト背景を標準的な方法でマーキングできるように、キュー構成要素のクラス名 のデフォルトセットを提供します。

CSS スタイルシートをサポートするユーザーエージェントは、ユーザーエージェントスタイルシートを追加することでこのセクションを実装することができます。

5.1. デフォルトのテキスト色

WebVTT キャプションまたは字幕のキュー構成要素 が、下の表の各行の第1列にあるものと一致する 1 個以上の クラス名 を持つ場合、それらは表の第2列にある値に従って、color プロパティをプレゼンテーショナルヒントとして設定しなければなりません：

クラス名 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. デフォルトのテキスト背景色

WebVTT キャプションまたは字幕のキュー構成要素 が、下の表の各行の第1列にあるものと一致する 1 個以上の クラス名 を持つ場合、それらは表の第2列にある値に従って、background-color プロパティをプレゼンテーショナルヒントとして設定しなければなりません：

クラス名 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 クラスのテキストをシアンに変更します。

6. 解析

WebVTT ファイルの解析は、キャプション、字幕、チャプター、メタデータなど、すべての種類の WebVTT ファイルで同じです。チャプターやメタデータのファイルではほとんどの手順がスキップされます。

6.1. WebVTT ファイルの解析

A WebVTT パーサーは、入力バイトストリーム、テキストトラックのキューリスト output、および CSS スタイルシート のコレクション stylesheets を受け取り、UTF-8 デコードアルゴリズムを使用してバイトストリームをデコードし、次に以下の WebVTT パーサーアルゴリズム に従って得られた文字列を解析しなければなりません。これにより、WebVTT キュー が output に追加され、CSS スタイルシート が stylesheets に追加されます。[RFC3629]

特に変換および解析の手順は、通常非同期で実行され、リソースのダウンロードに応じて入力バイトストリームが段階的に更新されます。この動作は インクリメンタル WebVTT パーサー と呼ばれます。

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

WebVTT パーサーアルゴリズム は次の通りです：

  1. input を、Unicode に変換した後、次の変換を適用した解析対象の文字列とします：

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

    • 各 U+000D キャリッジリターン U+000A ラインフィード (CRLF) の文字ペアを、単一の U+000A ラインフィード (LF) 文字に置き換える。

    • 残りのすべての U+000D キャリッジリターン文字を U+000A ラインフィード (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 スペース文字、U+0009 タブ文字、または U+000A ラインフィード (LF) 文字でない場合、これらの手順を中止します。ファイルは正しい WebVTT ファイル 署名で始まっておらず、正常に処理されませんでした。

  7. U+000A ラインフィード (LF) でないコードポイントの列を収集する。

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

  9. position の指す文字は U+000A ラインフィード (LF) です。position を input の次の文字に進めます。

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

  11. ヘッダー：もし position の指す文字が U+000A ラインフィード (LF) でない場合、in header フラグをセットして WebVTT ブロックを収集します。そうでなければ position を input の次の文字に進めます。

  12. U+000A ラインフィード (LF) 文字の連続を収集する。

  13. regions を空の テキストトラックのリージョンリスト とする。

  14. ブロックループ：position が input の末尾を過ぎていない間、次を繰り返す：

    1. WebVTT ブロックを収集し、その戻り値を block とする。

    2. block が WebVTT キュー の場合、block をテキストトラックのキューリスト output に追加する。

    3. それ以外で block が CSS スタイルシート の場合、block を stylesheets に追加する。

    4. それ以外で block が WebVTT リージョンオブジェクト の場合、block を regions に追加する。

    5. U+000A ラインフィード (LF) 文字の連続を収集する。

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

上のアルゴリズムで WebVTT ブロックを収集（オプションで in header フラグ付き）すると指示された場合、ユーザーエージェントは次の手順を実行しなければなりません：

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

  2. line count をゼロとする。

  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. ループ：以下の副手順をループで実行する：

    1. U+000A ラインフィード (LF) でないコードポイントの列を収集し、それを line とする（存在する場合）。

    2. line count を 1 増やす。

    3. position が input の末尾を過ぎている場合、seen EOF を true とする。そうでなければ、position の指す文字は U+000A ラインフィード (LF) なので、position を input の次の文字に進める。

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

      1. in header が設定されておらず、次のいずれかの条件が true の場合：

        • line count が 1 である

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

        …次の副手順を実行する：

        1. seen arrow を true とする。

        2. previous position を position とする。

        3. キュー生成：cue を新しい WebVTT キュー とし、次のように初期化する：

          1. cue の テキストトラックキュー識別子 を buffer とする。

          2. cue の pause-on-exit フラグ を false とする。

          3. cue の WebVTT キューリージョン を null とする。

          4. cue の 書字方向 を horizontal とする。

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

          6. cue の line を auto とする。

          7. cue の line alignment を start alignment とする。

          8. cue の position を auto とする。

          9. cue の position alignment を auto とする。

          10. cue の size を 100 とする。

          11. cue の text alignment を center alignment とする。

          12. cue の cue text を空文字列とする。

        4. WebVTT キューのタイミングと設定を収集 を line から実行し、regions を cue のために使用する。失敗した場合は cue を null にする。そうでなければ buffer を空文字列にし、seen cue を true にする。

        それ以外の場合は、position を previous position に戻し、ループ を抜ける。

    5. それ以外で line が空文字列の場合、ループ を抜ける。

    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
            未設定
            origin-clean flag
            設定済み

          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）という部分文字列で始まり、残りの文字がすべて ASCII 空白文字である場合、次の副手順を実行する：

          1. リージョン生成：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 ラインフィード (LF) 文字を buffer に追加する。

      3. line を buffer に追加する。

      4. previous position を position とする。

    7. seen EOF が true の場合、ループ を抜ける。

  12. cue が null でない場合、cue の cue text を buffer とし、cue を返す。

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

  14. そうでなく、region が null でない場合、buffer から WebVTT リージョン設定を収集し、結果を region に格納する。region から WebVTT Region Object を構築し、それを返す。

  15. それ以外の場合、null を返す。

6.2. WebVTT リージョン設定の解析

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

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

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

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

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

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

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

    4. name の値に応じて該当する副手順を実行する：

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

      region の 識別子 を value とする。

      それ以外で name が "width" と 大文字小文字を区別して一致する場合

      パーセンテージ文字列の解析 を value に対して行い、percentage が得られた場合、region の 領域幅 を percentage とする。

      それ以外で name が "lines" と 大文字小文字を区別して一致する場合

      1. value に ASCII 数字 以外の文字が含まれる場合、next setting にジャンプする。

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

      3. region の リージョン行数 を number とする。

      それ以外で name が "regionanchor" と 大文字小文字を区別して一致する場合

      1. value に U+002C カンマ (,) が含まれていない場合、next setting にジャンプする。

      2. anchorX を value の最初の U+002C カンマ (,) の直前までの先頭部分文字列とする。

      3. anchorY を value の最初の U+002C カンマ (,) の直後からの末尾部分文字列とする。

      4. パーセンテージ文字列の解析 を anchorX または パーセンテージ文字列の解析 を anchorY に対して行った結果 percentage を返さない場合、next setting にジャンプする。

      5. region の アンカーポイント を anchorX および anchorY から計算した percentage のタプルとする。

      それ以外で name が "viewportanchor" と 大文字小文字を区別して一致する場合

      1. value に U+002C カンマ (,) が含まれていない場合、next setting にジャンプする。

      2. viewportanchorX を value の最初の U+002C カンマ (,) の直前までの先頭部分文字列とする。

      3. viewportanchorY を value の最初の U+002C カンマ (,) の直後からの末尾部分文字列とする。

      4. パーセンテージ文字列の解析 を viewportanchorX または パーセンテージ文字列の解析 を viewportanchorY に対して行った結果 percentage を返さない場合、next setting にジャンプする。

      5. region の ビューポートアンカーポイント を viewportanchorX および viewportanchorY から計算した percentage のタプルとする。

      それ以外で name が "scroll" と 大文字小文字を区別して一致する場合

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

    5. Next setting: 次の setting があれば続ける。

パーセンテージ文字列の解析の規則は次の通り。0 から 100 の範囲の数値、または何も返さない。アルゴリズムで「失敗する」とあるときは、その時点で中止して何も返さないことを意味する。

  1. input を解析対象の文字列とする。

  2. input が WebVTT パーセンテージ の構文に一致しなければ、失敗する。

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

  4. percentage を 浮動小数点数値のパース規則を用いて input から計算した結果とする。[HTML51]

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

  6. percentage を返す。

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

上記アルゴリズムで WebVTT キューのタイミングおよび設定の収集 を、文字列 input から テキストトラックのリージョンリスト regions を使って WebVTT キュー cue のために実行すると指定された場合、ユーザーエージェントは次のアルゴリズムを実行しなければならない。

  1. input を解析対象の文字列とする。

  2. position を input の先頭を指すポインタとする。

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

  4. WebVTT タイムスタンプを収集する。そのアルゴリズムが失敗した場合、これらの手順を中止し、失敗を返す。そうでなければ、cue の テキストトラックキュー開始時刻 を収集した時刻とする。

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

  6. position の指す文字が U+002D ハイフンマイナス（-）でなければ、これらの手順を中止し失敗を返す。そうでなければ position を 1 文字進める。

  7. position の指す文字が U+002D ハイフンマイナス（-）でなければ、これらの手順を中止し失敗を返す。そうでなければ position を 1 文字進める。

  8. position の指す文字が U+003E 大なり記号（>）でなければ、これらの手順を中止し失敗を返す。そうでなければ position を 1 文字進める。

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

  10. WebVTT タイムスタンプを収集する。そのアルゴリズムが失敗した場合、これらの手順を中止し、失敗を返す。そうでなければ、cue の テキストトラックキュー終了時刻 を収集した時刻とする。

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

  12. WebVTT キューの設定を解析 を remainder から regions を使って cue のために実行する。

ユーザーエージェントが WebVTT キューの設定を解析 を input から テキストトラックのリージョンリスト regions を使って テキストトラックキュー cue のために実行するとき、次の手順を実行する：

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

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

    1. setting に U+003A コロン (:) が含まれていない、または最初の U+003A コロンの位置が先頭または末尾であれば、next setting のラベルの手順にジャンプ。

    2. name を最初の U+003A コロンの直前までの部分文字列とする。

    3. value を最初の U+003A コロンの直後から末尾までの部分文字列とする。

    4. name の値に応じて該当する副手順を実行する：

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

      1. cue の WebVTT キューリージョン を regions 内で WebVTT リージョンのうち識別子 WebVTT リージョン識別子 が value である最後のもの（なければ null）とする。

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

      1. value が "rl" と大文字小文字区別で一致する場合、cue の 書字方向 を vertical growing left とする。

      2. それ以外で value が "lr" と大文字小文字区別で一致する場合、cue の 書字方向 を vertical growing right とする。

      3. cue の 書字方向 が 横書き でない場合は、cue の WebVTT キューリージョン を null（縦書きリージョンはない）とする。

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

      1. value に U+002C カンマ (,) があれば、linepos をその直前まで、linealign を直後から末尾までの部分文字列とする。

      2. それ以外なら linepos を value の全文字列、linealign を null とする。

      3. linepos に ASCII 数字 が一つもなければ、next setting にジャンプ。

      4. linepos の末尾が U+0025 パーセント記号 (%) の場合

        パーセンテージ文字列の解析 を linepos で行い、失敗しなければ返された値を number とする。失敗なら next setting にジャンプ。

        それ以外の場合

        1. linepos に U+002D（-）・ASCII数字・U+002E ドット (.) 以外の文字があれば next setting。

        2. linepos の 2 文字目以降に U+002D（-）があれば next setting。

        3. U+002E ドット (.) が2つ以上なら next setting。

        4. U+002E ドットの前後が ASCII数字でない、または先頭または末尾なら next setting。

        5. linepos を 浮動小数点数値のパース規則 で解釈し number とする。[HTML51]

        6. number がエラーなら next setting。

      5. linealign が "start" と大文字小文字区別で一致する場合、cue の line alignment を start alignment とする。

      6. それ以外で linealign が "center" なら cue の line alignment を center alignment とする。

      7. それ以外で linealign が "end" なら cue の line alignment を end alignment とする。

      8. 他に linealign が null でなければ next setting。

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

      10. linepos の末尾が U+0025 パーセント記号 (%) なら cue の snap-to-lines フラグ を false、それ以外は true。

      11. cue の WebVTT キュー行 が auto でなければ cue の WebVTT キューリージョン を null（明示的 offset で region 脱落）とする。

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

      1. value に U+002C カンマ (,) があれば colpos を直前まで、colalign を直後から末尾までとする。

      2. なければ colpos を全文字列、colalign を null とする。

      3. パーセンテージ文字列の解析 を colpos で実行し失敗しなければ number に返し値を格納、失敗なら next setting（position の値は auto のまま）。

      4. colalign が "line-left" なら cue の position alignment を line-left alignment とする。

      5. そうでなく colalign が "center" なら cue の position alignment を center alignment とする。

      6. そうでなく colalign が "line-right" なら cue の position alignment を line-right alignment とする。

      7. 他に colalign が null でなければ next setting。

      8. cue の position を number とする。

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

      1. パーセンテージ文字列の解析 を value で行い、失敗しなければ number を返り値、失敗なら next setting。

      2. cue の サイズ を number とする。

      3. cue の サイズ が 100 でない場合、cue の WebVTT キューリージョン を null（明示的サイズ指定で region 脱落）とする。

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

      1. value が "start" なら cue の テキストアラインメント を start alignment とする。

      2. value が "center" なら cue の テキストアラインメント を center alignment とする。

      3. value が "end" なら cue の テキストアラインメント を end alignment とする。

      4. value が "left" なら cue の テキストアラインメント を left alignment とする。

      5. value が "right" なら cue の テキストアラインメント を right alignment とする。

    5. Next setting: 次のトークンがあれば続ける。

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

  1. input および position は、これを呼び出したアルゴリズムの同名の変数を使う。

  2. most significant units を 分とする。

  3. position が input の末尾を過ぎている場合、エラーを返し中止する。

  4. position の指す文字が ASCII数字 でなければエラーで中止。

  5. ASCII 数字の連続を収集し string をその部分文字列とする。

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

  7. string の長さがちょうど 2 でない、または value1 が 59 より大きければ most significant units を 時とする。

  8. position が input の末尾を越えている、または指す文字が U+003A コロン (:) でなければエラーで中止。そうでなければ position を 1 文字進める。

  9. ASCII 数字の連続を収集し string をその部分文字列とする。

  10. string の長さがちょうど 2 でない場合はエラーで中止。

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

  12. most significant units が 時 の場合、またはまだ position が input の末尾を越えず、指す文字が U+003A コロン (:) の場合、副手順を実行する：

    1. position が input の末尾を越えている、または指す文字が U+003A コロン (:) でなければエラーで中止。そうでなければ position を 1 文字進める。

    2. ASCII 数字の連続を収集し string をその部分文字列とする。

    3. string の長さがちょうど 2 でないならエラーで中止。

    4. string を 10 進整数として value3 とする。

    そうでなければ （most significant units が 時 でない、かつ position が input の末尾を越えているか指す文字が U+003A コロン (:) でない）、value3 を value2 の値、value2 を value1 の値、value1 を 0 とする。

  13. position が input の末尾を越えている、または指す文字が U+002E ピリオド (.) でなければエラーで中止。そうでなければ position を 1 文字進める。

  14. ASCII 数字の連続を収集し string をその部分文字列とする。

  15. string の長さがちょうど 3 でないならエラーで中止。

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

  17. value2・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クラスオブジェクト

これはキューテキストにおけるWebVTT キュー クラススパンのテキスト区間を表現し、太字や斜体などさらなる意味を持たせることなく、適用クラスの注釈を付与する用途で使われます。

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

これはWebVTT 字幕またはキャプションキューテキスト内のWebVTTキュー斜体スパン区間を表します。

WebVTTボールドオブジェクト

これはWebVTT 字幕またはキャプションキューテキスト内のWebVTTキュー太字スパン区間を表します。

WebVTT下線オブジェクト

これはWebVTT 字幕またはキャプションキューテキスト内のWebVTTキュー下線スパン区間を表します。

WebVTTルビオブジェクト

これはWebVTT 字幕またはキャプションキューテキスト内のWebVTTキュールビスパン 区間を表します。

WebVTTルビテキストオブジェクト

これはWebVTT 字幕またはキャプションキューテキスト内のWebVTTキュールビテキストスパン 区間を表します。

WebVTTボイスオブジェクト

これはWebVTT 字幕またはキャプションキューテキスト内の特定の声に紐付いたテキスト区間（WebVTT キュー声スパン）を表します。WebVTTボイスオブジェクトは声の名前を値として持ちます。

WebVTT言語オブジェクト

これはWebVTT 字幕またはキャプションキューテキスト内の一部で、周囲と異なる適用言語になる可能性があるキュー部分に注釈を付けるために使われます（斜体・太字等の意味付与ではない）。

WebVTTリーフノードオブジェクトは、データ（テキスト等）を含み、子のWebVTTノードオブジェクトは含めません。

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

WebVTTテキストオブジェクト

テキスト断片。WebVTTテキストオブジェクトは自分が表すテキスト値を持ちます。

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

タイムスタンプ。WebVTTタイムスタンプオブジェクトは、そのタイムスタンプが表す秒および小数点以下の時刻値を持ちます。

WebVTTキューテキスト解析ルールは、次のアルゴリズムで構成されます。入力はinputという文字列（WebVTT字幕またはキャプションキューテキストを含むとみなす）と、任意のフォールバック言語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"なら

    attachしWebVTTクラスオブジェクトを作成

    タグ名が"i"なら

    attachしWebVTTイタリックオブジェクトを作成

    タグ名が"b"なら

    attachしWebVTTボールドオブジェクトを作成

    タグ名が"u"なら

    attachしWebVTT下線オブジェクトを作成

    タグ名が"ruby"なら

    attachしWebVTTルビオブジェクトを作成

    タグ名が"rt"なら

    もしcurrentがWebVTTルビオブジェクトであればattachでWebVTTルビテキストオブジェクトを作成

    タグ名が"v"なら

    attachしWebVTTボイスオブジェクトを作成し、トークンの注釈文字列（またはなければ空文字）を値に設定

    タグ名が"lang"なら

    トークンの注釈文字列（またはなければ空文字）をlanguage stackにプッシュし、attachでWebVTT言語オブジェクトを作成

    その他

    このトークンは無視する。

    上記手順で特定の具象クラスのWebVTT内部ノードオブジェクトをattachと指示された場合、ユーザーエージェントは：

    1. 該当クラスの新しいWebVTT内部ノードオブジェクトを作成する。

    2. 新オブジェクトの適用クラスリストを、トークンのクラス一覧（空文字列を除く）に設定する。

    3. 新オブジェクトの適用言語を、language stackが空でなければそのトップエントリに設定する。

    4. 新ノードオブジェクトをcurrentに追加する。

    5. currentを新ノードオブジェクトにする。

    もしtokenが終了タグ

    次のいずれかの場合、currentをその親ノードへ：

    また、終了タグトークンtokenのタグ名が"lang"でcurrentがWebVTT言語オブジェクトなら、currentをその親ノードにし、language stackからトップの値をポップする。

    さらに、終了タグトークンtokenのタグ名が"ruby"でcurrentがWebVTTルビテキストオブジェクトなら、currentをその親ノードの親ノードにする。

    それ以外の場合、このトークンは無視する。

    もしtokenがタイムスタンプタグ

    1. inputにタグ値を設定

    2. positionをinputの先頭を指すポインタに

    3. WebVTTタイムスタンプを収集実行

    4. このアルゴリズムが失敗せず、かつpositionがinputの末尾を指していれば、収集した時刻を値とするWebVTTタイムスタンプオブジェクトを作成しcurrentに追加する。

      それ以外の場合、このトークンは無視する。

  10. loopの指示へジャンプ。

WebVTT キューテキストトークナイザは次の通りです。トークンを出力します。トークンは、文字列（値は文字の並び）、開始タグ（タグ名、クラスのリスト、オプションで注釈）、終了タグ（タグ名）、またはタイムスタンプタグ（タグ値）のいずれかです。

  1. input と position を、これを呼び出したアルゴリズムで使用されている同名の変数と同じものにする。

  2. tokenizer state を WebVTT データステート にする。

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

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

  5. ループ：position が input の末尾を過ぎていれば c を EOF マーカーにする。そうでなければ c を position が指す input 内の文字にする。

    EOF マーカーは Unicode 文字ではなく、トークナイザを終了するために使用されます。

  6. tokenizer state の示す状態へジャンプ：

    WebVTTデータステート

    c の値に従って分岐：

    U+0026 アンパサンド (&)

    tokenizer state を データステート内のHTML文字参照にし、ラベルnextへジャンプ。

    U+003C 不等号 (<)

    result が空文字列なら、tokenizer state を WebVTTタグステートにし、next へ。

    そうでなければ、値が result の文字列トークンを返し、この手順を中止。

    EOFマーカー

    値が result の文字列トークンを返し、この手順を中止。

    その他

    c を result に追加し、next へ。

    データステート内のHTML文字参照

    HTML 文字参照を消費しようとし、追加許可文字は指定しない。

    何も返らなければ U+0026 アンパサンド (&) を result に追加。

    返っていれば、返された文字トークンのデータを result に追加。

    いずれにせよ、tokenizer state を WebVTTデータステート にしてnextへ。

    WebVTTタグステート

    c の値で分岐：

    U+0009 タブ, U+000A LF, U+000C FF, U+0020 スペース

    tokenizer state を WebVTT開始タグ注釈ステートにし、nextへ。

    U+002E ピリオド (.)

    tokenizer state を WebVTT開始タグクラスステートにし、nextへ。

    U+002F スラッシュ (/)

    tokenizer state を WebVTT終了タグステートにし、nextへ。

    ASCII数字

    result を c に、tokenizer state を WebVTTタイムスタンプタグステートにし、nextへ。

    U+003E 大なり記号 (>)

    position を input の次の文字に進め、次の "EOFマーカー" エントリへ。

    EOFマーカー

    タグ名が空、クラスなし、注釈なしの開始タグを返し、手順を中止。

    それ以外

    result を c にし、tokenizer state を WebVTT開始タグステートにしてnextへ。

    WebVTT開始タグステート

    c の値で分岐：

    U+0009 タブ, U+000C FF, U+0020 スペース

    tokenizer state を WebVTT開始タグ注釈ステートにし、nextへ。

    U+000A LF

    buffer を c に、tokenizer state を WebVTT開始タグ注釈ステートにし、nextへ。

    U+002E ピリオド (.)

    tokenizer state を WebVTT開始タグクラスステートにし、nextへ。

    U+003E 大なり記号 (>)

    position を input の次の文字に進め、次の "EOFマーカー" エントリへ。

    EOFマーカー

    タグ名が result の開始タグ（クラス、注釈無）を返し、手順を中止。

    それ以外

    c を result に追加し、next へ。

    WebVTT開始タグクラスステート

    c の値で分岐：

    U+0009 タブ, U+000C FF, U+0020 スペース

    buffer の値を classes に追加、buffer を空に、tokenizer state を WebVTT開始タグ注釈ステートにしてnextへ。

    U+000A LF

    buffer の値を classes に追加、buffer を c にし、tokenizer state を WebVTT開始タグ注釈ステートにしてnextへ。

    U+002E ピリオド (.)

    buffer の値を classes に追加、buffer を空にし、nextへ。

    U+003E 大なり記号 (>)

    position を input の次の文字に進め、次の "EOFマーカー" エントリへ。

    EOFマーカー

    buffer の値を classes に追加し、タグ名が result、クラスが classes、注釈なしの開始タグを返して手順を中止。

    それ以外

    c を buffer に追加し、next。

    WebVTT開始タグ注釈ステート

    c の値で分岐：

    U+0026 アンパサンド (&)

    tokenizer state を 注釈ステート内のHTML文字参照にしてnextへ。

    U+003E 大なり記号 (>)

    position を input の次の文字に進め、次の "EOFマーカー" エントリへ。

    EOFマーカー

    buffer から先頭末尾のASCII空白を削除し、連続するASCII空白はU+0020 SPACE一つに置換して、タグ名が result、クラスclasses、注釈bufferの開始タグを返して手順中止。

    それ以外

    c を buffer に追加、next。

    注釈ステート内のHTML文字参照

    HTML 文字参照を消費しようとし、追加許可文字はU+003E大なり記号(>)。

    何も返らなければU+0026アンパサンド(&)をbufferに追加。

    返っていれば、返された文字トークンのデータをbufferに追加。

    いずれにせよ、tokenizer state を WebVTT開始タグ注釈ステートにし、nextへ。

    WebVTT終了タグステート

    c の値で分岐：

    U+003E 大なり記号 (>)

    position を input の次の文字に進め、次の "EOFマーカー" エントリへ。

    EOFマーカー

    タグ名が result の終了タグを返し、この手順を中止。

    それ以外

    c を result に追加し、next。

    WebVTTタイムスタンプタグステート

    c の値で分岐：

    U+003E 大なり記号 (>)

    position を input の次の文字に進め、次の "EOFマーカー" エントリへ。

    EOFマーカー

    タグ名が result のタイムスタンプタグを返し、この手順を中止。

    それ以外

    c を result に追加し、nextへ。

  7. next：position を input の次の文字に進める。

  8. ラベルloopへジャンプ。

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

HTML 仕様が「文字を消費する」と指示する場合、この文脈では position を input の次の文字に進めることを意味します。「未消費に戻す(unconsume)」場合は、position を input の前の文字に戻すことを意味します。"EOF"は本仕様のEOFマーカーと同じです。なお、この文脈は「属性の一部として」ではありません（セミコロン省略時の扱いに関して）。

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

WebVTT キュー の内容を getCueAsHTML() メソッド（VTTCue インターフェース）経由で取得する目的のために、それを 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 ルビオブジェクト HTML の ruby 要素。
WebVTT ルビテキストオブジェクト HTML の rt 要素。
WebVTT ボイスオブジェクト HTML の span 要素で、title 属性に WebVTT ボイスオブジェクト の値を設定したもの。
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 内部ノードオブジェクト に 適用クラス がある場合は、それらを単一の U+0020 SPACE 文字で区切って連結した文字列を class 属性に設定しなければなりません。

DOM ツリー内のすべてのノードの ownerDocument 属性は、与えられたドキュメント owner に設定されなければなりません。

上で説明されていない、あるいは上で説明された特性に依存しない DOM ノードのすべての特性は、初期値のままにしておくものとします。

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

チャプタータイトル抽出のための WebVTT 規則 は、WebVTT キュー cue に対して次の通り定義されます：

  1. nodes を、WebVTT ノードオブジェクトのリスト とし、これは cue の WebVTT キューテキスト解析規則 を cue の cue text に適用して得たものとする。

  2. nodes 内の各 WebVTT テキストオブジェクト の値を、プレオーダーの深さ優先走査で連結した文字列を返す。ただし WebVTT ルビテキストオブジェクト およびその子孫は除外する。

7. レンダリング

本節では、ユーザーエージェントが WebVTT のキャプションや字幕キュー を視覚的にどのようにレンダリングするかを詳細に説明します。処理モデルは、CSS が利用可能な HTML のメディア要素に密接に結びついています。CSS をサポートしないユーザーエージェント は、スタイルや位置付け機能を伴わないプレーンテキストのみをレンダリングすると想定されます。完全な HTML/CSS エンジンをサポートしないユーザーエージェント は、完全な CSS エンジンを持つユーザーエージェントがレンダリングするものと等価な視覚表現をレンダリングすることが期待されます。

7.1. 処理モデル

WebVTT テキストトラックの表示を更新するための規則（rules for updating the display of WebVTT text tracks）は、HTML の text tracks を、（具体的には video 要素）や他の再生メカニズムに対して、以下の手順を適用してレンダリングします。指定された メディア要素、または他の再生メカニズムについて、これらの規則を使うすべての テキストトラック は、複数トラック間で字幕が重ならないように一緒にレンダリングされます。このアルゴリズムを呼ぶ際にフォールバック言語 language を設定できる場合があります。

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

以下の手順の出力は、メディア要素または他の再生メカニズムのレンダリング領域を覆う一連の CSS ボックスであり、ユーザーエージェントはそれをユーザーに適した方法でレンダリングすることが期待されます。

規則は次のとおりです：

  1. 対象の メディア要素 が audio 要素、またはレンダリング領域を持たない他の再生メカニズムであれば、これらの手順を中止します。

  2. video を対象の メディア要素 または他の再生メカニズムとする。

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

  4. ユーザーエージェントが video のための ユーザーインターフェース を表示している場合、output にユーザーインターフェースと同じ領域を覆う、完全に透明な位置決めされた CSS ブロックボックスを一つ以上追加します。

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

  6. tracks を、video の text tracks のリスト のうち、表示更新規則として本規則（rules for updating the display of WebVTT text tracks）を使用し、かつ text track mode が showing であるトラックの部分集合とする。

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

  8. tracks の各トラック track について、track の cues のリスト から text track cue active flag が設定されているすべての cue を cues に追加します。

  9. regions を空の WebVTT リージョン のリストとします。

  10. tracks の各トラック track について、track の regions のリスト に識別子を持つすべての regions を regions に追加します。

  11. reset が false の場合、regions 内の各 WebVTT region region について、その region に対応する WebVTT region object を regionNode とします。

  12. 各 regionNode に対して次の手順を適用します：

    1. CSS プロパティを regionNode に適用するために、いくつかの変数を準備します：

      • regionWidth を WebVTT region width とする。width を regionWidth vw とする（vw は CSS 単位）。[CSS-VALUES]

      • lineHeight を 6vh とする（vh は CSS 単位）[CSS-VALUES]、および regionHeight を WebVTT region lines とする。lines を lineHeight と regionHeight の積とする。

      • viewportAnchorX を WebVTT region anchor の x 成分とし、regionAnchorX を同じくリージョンアンカーの x 成分とする。leftOffset を regionAnchorX × width ÷ 100.0 とする。left を viewportAnchorX vw から leftOffset を差し引いたものとする。

      • viewportAnchorY を WebVTT region anchor の y 成分とし、regionAnchorY をリージョンアンカーの y 成分とする。topOffset を regionAnchorY × lines ÷ 100.0 とする。top を viewportAnchorY vh から topOffset を差し引いたものとする。

    2. 次の制約の下で CSS 仕様の条件を regionNode に適用し、初期包含ブロックに対して位置付けられた CSS ボックス box を得ます：

      1. regionNode にスタイルシートは関連付けられていません。（regionNodes は、そのボックスが生成された後に、下記で説明されるようにスタイルシートを使って再スタイリングされます。）

      2. regionNode のプロパティは次節で定義されるとおりに値が設定されます。（その節はいくつかの上で計算した変数を使用します。）

      3. ビデオのビューポート（および初期包含ブロック）は video のレンダリング領域です。

    3. CSS ボックス box を output に追加します。

  13. reset が false の場合、cues 内の各 WebVTT cue cue について：もし cue の text track cue display state が CSS ボックスの集合を持っているならば、次を行います：

    • もし cue の WebVTT cue region が null でなければ、それらのボックスをそのリージョンの box に追加し、cues から cue を削除します。

    • そうでなければ、それらのボックスを output に追加し、cues から cue を削除します。

  14. まだ output に対応する CSS ボックスが追加されていない各 WebVTT cue cue について、text track cue order に従って、次の副手順を実行します：

    1. nodes を、フォールバック言語 language（提供されていれば）を用いて cue の cue text に WebVTT キュー テキスト解析規則 を適用して得た WebVTT ノードオブジェクトのリスト とします。

    2. もし cue の WebVTT cue region が null であれば、次の副手順を実行します：

      1. WebVTT キュー設定の適用 を行い、nodes から CSS ボックス群 boxes を得る。

      2. cue の text track cue display state に boxes の CSS ボックスを設定する。

      3. boxes の CSS ボックスを output に追加する。

    3. そうでなければ、次の副手順を実行します：

      1. region を cue の WebVTT cue region とする。

      2. もし region の WebVTT region scroll 設定が up でかつ region に既に子が一つあるなら、region の transition-property を top に、transition-duration を 0.433s に設定します。

      3. offset を cue の computed position に region の WebVTT region width を掛けて 100 で割った値とします（つまりリージョン幅のパーセンテージとして解釈します）。

      4. offset を、cue の computed position alignment を使って次のように調整します：

        もし computed position alignment が center alignment の場合

        offset から region の WebVTT region width の半分を差し引きます。

        もし computed position alignment が line-right alignment の場合

        offset から region の WebVTT region width を差し引きます。

      5. left を offset % とします。

      6. CSS ボックス群の取得 を行い、初期包含ブロックに対して位置付けられた boxes を得ます。

      7. もし boxes に行ボックスが存在しない場合、これらの副手順の残りを cue についてスキップします。該当のキューは無視されます。

      8. cue の text track cue display state に boxes の CSS ボックスを設定します。

      9. boxes の CSS ボックスを region に追加します。

      10. もし CSS ボックス群 boxes の合計高さが region ボックスの高さより小さい場合、その差の絶対値を diff とします。top を diff だけ増やし、再度 regionNode に適用します。

  15. output を返します。

ユーザーエージェントは、上記アルゴリズムによるキューの位置決めをユーザーが上書きできるようにすることがあります。例えば、ユーザーがキューを video 上の別の位置にドラッグしたり、場合によっては完全に video の外に移動させたりすることを許容できます。

7.2. キュー設定の処理

上記の処理アルゴリズムで、ユーザーエージェントが WebVTT キュー設定の適用 をおこない WebVTT ノードオブジェクトのリスト nodes から CSS ボックスを得るよう指定された場合、ユーザーエージェントは以下のアルゴリズムを実行しなければならない。

  1. WebVTT キュー書字方向 が 横書き の場合 writing-mode を "horizontal-tb" とする。そうでなければ、WebVTT キュー書字方向 が 縦書き left の場合 writing-mode を "vertical-rl" とし、それ以外（縦書き right）の場合 writing-mode を "vertical-lr" とする。

  2. cue の maximum size の値を、次の規則から適切なものに従って決定する：

    position alignment が line-left の場合

    maximum size を 100 から computed position を引いた値とする。

    position alignment が line-right の場合

    maximum size を computed position とする。

    position alignment が center かつ computed position が 50 以下の場合

    maximum size を computed position の 2 倍とする。

    position alignment が center かつ computed position が 50 より大きい場合

    maximum size を 100 から computed position を引き、その結果に 2 を掛けた値とする。

  3. WebVTT キューサイズ が maximum size より小さければ size を WebVTT キューサイズ とし、そうでなければ size を maximum size とする。

  4. WebVTT キュー書字方向 が 横書き の場合、width を size vw、height を auto とする。そうでなければ、width を auto、height を size vh とする。 （これらは次節で描画用 CSS プロパティを設定する際に使用する CSS 値。vw および vh は CSS 単位。）[CSS-VALUES]

  5. cue の x-position, y-position の値を以下の規則に従い決定する：

    WebVTT キュー書字方向 が 横書き の場合
    position alignment が line-left alignment の場合

    x-position を computed position とする。

    position alignment が center alignment の場合

    x-position を computed position から size の半分を引いた値とする。

    position alignment が line-right alignment の場合

    x-position を computed position から size を引いた値とする。

    WebVTT キュー書字方向 が 縦書き left または 縦書き right の場合
    position alignment が line-left alignment

    y-position を computed position とする。

    position alignment が center alignment

    y-position を computed position から size の半分を引いた値とする。

    position alignment が line-right alignment

    y-position を computed position から size を引いた値とする。

  6. まだ計算していない x-position または y-position の値も、下記の規則に沿って cue に対し決定する：

    WebVTT キュー snap-to-lines フラグ が false の場合
    WebVTT キュー書字方向 が 横書き の場合

    y-position を computed line とする。

    WebVTT キュー書字方向 が 縦書き left または 縦書き right の場合

    x-position を computed line とする。

    WebVTT キュー snap-to-lines フラグ が true の場合
    WebVTT キュー書字方向 が 横書き の場合

    y-position を 0 とする。

    WebVTT キュー書字方向 が 縦書き left または 縦書き right の場合

    x-position を 0 とする。

    これらの値は最終位置ではなく、下記のボックス寸法計算のための一時的な値である。

  7. left を x-position vw、top を y-position vh とする。（これらは次節で描画用 CSS プロパティを設定する際に使用する値；vw および vh は CSS 単位。）[CSS-VALUES]

  8. CSS ボックスの取得 をおこない、初期包含ブロック基準の boxes を得る。

  9. もし boxes に行ボックスがひとつもなければ cue についてはこの手順の残りをスキップする。キューは無視される。

  10. 次の規則に従い boxes の位置調整を行う：

    cue の snap-to-lines フラグ が true の場合

    このアルゴリズムの多くの手順は 書字方向 により分岐。「横」ラベルの手順は 書字方向 が 横書き の時だけ、「縦」ラベルの手順は 書字方向 が 縦書き left または 縦書き right の時、「縦書き left」は 書字方向 が 縦書き left の時のみ、「縦書き right」は 書字方向 が 縦書き right の時のみ適用する。

    1. 横: full dimension を video のレンダリング領域の高さとする。

      縦: full dimension を video のレンダリング領域の幅とする。

    2. 横: step を boxes 内先頭行ボックスの高さとする。

      縦: step を boxes 内先頭行ボックスの幅とする。

    3. step が 0 なら、下記 done positioning手順にジャンプ。

    4. line を cue の computed line とする。

    5. line に 0.5 を加え、床関数で整数にする。

    6. 縦書き left: line に 1 を加えて負にする。

    7. position を step × line の値とする。

    8. 縦書き left: boxes のバウンディングボックス幅を position から減算し、さらに step を加算。

    9. line が負なら position に max dimension を加算、step を正負反転。

    10. 横: boxes 全体を position 下方に移動。

      縦: boxes 全体を position 右へ移動。

    11. boxes 全体位置を specified position として記憶。

    12. title area を video のレンダリング領域全体を覆うボックスとする。

    13. step loop: boxes いずれも output のいずれにも重ならず、すべて title area ボックス内であれば done positioning手順へ。

    14. 横: step が負、かつ boxes 先頭行ボックスの上端が title area より上、または step が正で下端が下超なら switch direction手順へ。

      縦: step が負で先頭行ボックス左端が title area より左、または step が正で右端が右超の場合も switch directionへ。

    15. 横: boxes 全体を step 下方へ移動（負なら上方）。

      縦: boxes 全体を 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 の snap-to-lines フラグ が false の場合

    1. bounding box を boxes のバウンディングボックスとする。

    2. 次の規則から適切なものを実行：

      書字方向 が 横書き の場合
      line alignment が center alignment の場合

      boxes 全体を bounding box 高さの半分分、上方向へ移動。

      line alignment が end alignment の場合

      boxes 全体を bounding box 高さ分、上方向へ移動。

      書字方向 が 縦書き left または 縦書き right の場合
      line alignment が center alignment

      boxes 全体を bounding box 幅の半分分、左方向へ移動。

      line alignment が end alignment

      boxes 全体を bounding box 幅分、左方向へ移動。

    3. boxes のいずれも output のいずれとも重ならず、すべて video のレンダリング領域内であれば、done positioning手順へ進む。

    4. boxes 全体が互いの相対位置を保ったまま output のいずれとも重ならず、すべて video のレンダリング領域内に収まる位置が存在する場合、今の位置から最も近いその位置へ移動し done positioning手順へ進む。同じ距離で複数候補がある場合は最も高いもの、さらに複数ある場合は最も左のものとする。

    5. それ以外は done positioning手順へ（重なりが生じる）。

  11. done positioning: boxes を返す。

7.3. CSSボックスの取得

上記の処理アルゴリズムによってユーザーエージェントが CSSボックス集合の取得 boxes を要求された場合、次の制約内で nodes に対してCSS仕様の規定を適用すること：[CSS22]

boxes を、初期包含ブロックの子孫として生成されたボックス集合（位置情報を含む）とする。

7.4. WebVTTノードオブジェクトへのCSSプロパティ適用

WebVTTテキストトラック表示更新規則 に従う場合、ユーザーエージェントは本節で規定する通りCSSユーザーエージェントカスケードレイヤにおいて WebVTTノードオブジェクト のプロパティを設定しなければならない。[CSS22]

（ルート）WebVTTノードオブジェクトのリストには次のCSS設定を初期化する：

変数 writing-mode, top, left, width, height は WebVTTテキストトラック表示更新規則 で該当 WebVTTキュー の text から構築された WebVTTノードオブジェクトのリスト 用に決定された値である。

（ルート）WebVTTノードオブジェクトのリストの text-align プロパティは、テーブル下段の左欄が該当するキューの WebVTTキューテキストアライメント の値である行の右欄値に設定：

WebVTTキューテキストアライメント text-align 値
開始アライメント start
中央アライメント center
終了アライメント end
左アライメント left
右アライメント right

（ルート）font ショートハンドプロパティは 5vh sans-serif に設定。[CSS-VALUES]

（ルート）color プロパティは rgba(255,255,255,1) に設定。[CSS3-COLOR]

background ショートハンドプロパティは、WebVTTキュー背景ボックスおよび WebVTTルビテキストオブジェクト に対し rgba(0,0,0,0.8) に設定。[CSS3-COLOR]

（ルート）white-space プロパティは pre-line に設定。[CSS22]

font-style プロパティは WebVTTイタリックオブジェクト に対し italic に設定。

font-weight プロパティは WebVTTボールドオブジェクト に対し bold に設定。

text-decoration プロパティは WebVTT下線オブジェクト に対し underlineに設定。

display プロパティは WebVTTルビオブジェクト に対し ruby に設定。[CSS3-RUBY]

display プロパティは WebVTTルビテキストオブジェクト に対し ruby-text に設定。[CSS3-RUBY]

すべての WebVTTリージョンオブジェクト は次のCSS設定で初期化する：

変数 width, height, top, left は WebVTTテキストトラック表示更新規則 で該当 WebVTTリージョン から構築された WebVTTリージョンオブジェクト 用に決定された値である。

各 WebVTTリージョンオブジェクト の子は更に次のCSS設定で初期化される：

その他の非継承プロパティはすべて初期値とし、ルート WebVTTノードオブジェクトのリスト の継承プロパティはレンダリング先 メディア要素 から継承される（もし存在する場合）。メディア要素（つまり text track が別再生メカニズムで描画される場合）がなければルート WebVTTノードオブジェクトのリスト および WebVTTリージョンオブジェクト の継承プロパティは初期値を使用。

メディア要素または他の再生メカニズムに適用されるスタイルシートがある場合は、次節の規定通り解釈されなければならない。

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;
}

cue の テキストトラックキュー識別子 が指定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 ノードオブジェクトのリスト 以外）。

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(.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" に対しては指定ボイスの WebVTTボイスオブジェクト。

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 テキストトラック表示更新規則 に従って一つ以上の WebVTTキュー をレンダリングする場合、そのレンダリングに用いられる WebVTTノードオブジェクトのリスト 内の WebVTTノードオブジェクト は、以下で定義する特定の擬似セレクタによりマッチされうる。こうしたセレクタは、個々の WebVTT ノードオブジェクト が（cue のレンダリング中であっても）（アクティブキュー集合の変更時だけでなく）途中でマッチしたり解除されたりすることがある。下記の疑似要素に対応した環境では描画も随時動的に更新する必要がある。white-space や font ショートハンド（line-height を含む）の値が変更された場合、該当 WebVTT キュー の text track cue display state はクリアされ、text track の text track rendering 表示更新ルールが即座に再実行される必要がある。

疑似要素はセレクタが一致した要素に適用される。このセクションではその要素を一致要素と呼ぶ。下で定義する疑似要素は、一致要素 のためにレンダリングされる WebVTT キュー の一部のスタイルに影響を与える。

一致要素 が video 要素でない場合、本仕様で定義される以下の疑似要素は効果を持たない。

CSSユーザーエージェントで text tracks モデルを実装する場合、::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() 疑似要素には次のプロパティが適用されます：

さらに、引数あり ::cue() 疑似要素でセレクタに :past や :future 疑似クラスが含まれていない場合、以下も適用：

適用されないプロパティは無視されなければならない。

特例として、background ショートハンドは、WebVTTノードオブジェクトのリストに本来適用される場合でもWebVTTキュー背景ボックスに適用されなければならない。

8.2.2. :past および :future 疑似クラス

:past および :future 疑似クラスは、場合によりWebVTTノードオブジェクトにマッチします。[SELECTORS4]

:past 疑似クラスは、過去であるWebVTTノードオブジェクトだけに一致します。

WebVTTノードオブジェクト c が過去である とは、そのWebVTTキュー の WebVTTノードオブジェクトのリスト をプレオーダ深さ優先走査したときに、 WebVTTタイムスタンプオブジェクト で、その値が一致要素 たるメディア要素の 再生位置より小さいものが c より完全に後ろに存在する場合を指します。

:future 疑似クラスは、未来であるWebVTTノードオブジェクトだけに一致します。

WebVTTノードオブジェクト c が未来である とは、そのWebVTTキュー の WebVTTノードオブジェクトのリスト をプレオーダ深さ優先走査したときに、 WebVTTタイムスタンプオブジェクト で、その値が一致要素 たるメディア要素の 再生位置より大きいものが c の完全に前に存在する場合を指します。

8.2.3. ::cue-region 疑似要素

疑似要素は、セレクタがマッチする要素に適用されます。このセクションではこの要素を一致要素と呼びます。下記疑似要素は、その一致要素のためにレンダリングされるテキストトラックリージョンのスタイルに影響します。

一致要素が video 要素でない場合、本仕様で定義される以下の疑似要素は効果を持ちません。

::cue-region 疑似要素（引数なし）は、一致要素のために構築されたWebVTTリージョンオブジェクトのリストすべてに一致します。

::cue-region(selector) 疑似要素（引数あり）は、引数としてCSSセレクタ[SELECTORS4]を指定する必要があります。これは、一致要素のために構築されかつ、次基準で与えた CSS セレクタにマッチするWebVTTリージョンオブジェクトのリストに一致します：

::cue-region(selector) については他のセレクタマッチ規定無し。

::cue に適用されるものと同じプロパティが ::cue-region 疑似要素にも適用されます。それ以外は無視されます。

ユーザーエージェントがWebVTT テキストトラック表示更新規則に従い１つ以上のテキストトラックリージョンをレンダリングする場合、上記疑似要素で WebVTTリージョンオブジェクト がマッチします。対応疑似要素をサポートする場合、描画も随時動的に更新する必要があります。white-space や font ショートハンド（line-height を含む）の値が変更された場合、そのリージョン内の全てのWebVTTキューのtext track cue display stateをクリアし、当該text trackのtext track rendering 表示更新ルールを即時に再実行すること。

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,
 Constructor(double startTime, double endTime, DOMString text)]
interface VTTCue : TextTrackCue {
  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 )

新しい VTTCue オブジェクトを返します。これは addCue() メソッドで使用します。

startTime 引数はテキストトラックキュー開始時刻を設定します。

endTime 引数はテキストトラックキュー終了時刻を設定します。

text 引数はキューテキストを設定します。

cue . region

このキューに関連付けられた VTTRegion オブジェクトを返し、なければ null を返します。

設定可能です。

cue . vertical [ = value ]

WebVTTキュー書字方向 を次のような文字列で返します：

横書き の場合

空文字列。

縦書き左方向 の場合

文字列 "rl"。

縦書き右方向 の場合

文字列 "lr"。

設定可能です。

cue . snapToLines [ = value ]

WebVTTキューsnap-to-linesフラグ が true なら true、それ以外は false を返します。

設定可能です。

cue . line [ = value ]

WebVTTキューライン を返します。値が auto の場合、文字列 "auto" を返します。

設定可能です。

cue . lineAlign [ = value ]

WebVTTキューラインアライメント を次のような文字列で返します：

開始アライメント の場合

文字列 "start"。

中央アライメント の場合

文字列 "center"。

終了アライメント の場合

文字列 "end"。

設定可能です。

cue . position [ = value ]

WebVTTキューポジション を返します。値が auto の場合、文字列 "auto" を返します。

設定可能です。

cue . positionAlign [ = value ]

WebVTTキューポジションアライメント を次のような文字列で返します：

line-left アライメント の場合

文字列 "line-left"。

中央アライメント の場合

文字列 "center"。

line-right アライメント の場合

文字列 "line-right"。

自動アライメント の場合

文字列 "auto"。

設定可能です。

cue . size [ = value ]

WebVTTキューサイズ を返します。

設定可能です。

cue . align [ = value ]

WebVTTキューテキストアライメント を次のような文字列で返します：

start アライメント の場合

文字列 "start"。

center アライメント の場合

文字列 "center"。

end アライメント の場合

文字列 "end"。

left アライメント の場合

文字列 "left"。

right アライメント の場合

文字列 "right"。

設定可能です。

cue . text [ = value ]

未解析のキューテキストを返します。

設定可能です。

fragment = cue . getCueAsHTML()

キューテキスト を DocumentFragment （HTML要素や他のDOMノード）として返します。

VTTCue(startTime, endTime, text) コンストラクタが呼び出されたとき、次の手順を実行しなければならない：

  1. 新しいWebVTTキューを作成する。cueをそのWebVTTキューとする。

  2. cueのテキストトラックキュー開始時刻を、引数startTimeの値（秒として解釈）にする。

  3. cueのテキストトラックキュー終了時刻を、引数endTimeの値（秒として解釈）にする。

  4. cueのキューテキストをtext引数の値にし、チャプタータイトル抽出規則はWebVTTチャプタータイトル抽出規則とする。

  5. cueのテキストトラックキュー識別子を空文字列にする。

  6. cueのpause-on-exitフラグをfalseにする。

  7. cueのWebVTTキュリージョンをnullにする。

  8. cueのWebVTTキュー書字方向を横書きにする。

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

  10. cueのWebVTTキューラインをautoにする。

  11. cueのWebVTTキューラインアライメントをstartアライメントにする。

  12. cueのWebVTTキューポジションをautoにする。

  13. cueのWebVTTキューポジションアライメントをautoにする。

  14. cueのWebVTTキューサイズを100にする。

  15. cueのWebVTTキューテキストアライメントをcenterアライメントにする。

  16. cueを表すVTTCueオブジェクトを返す。

region属性は、取得時、VTTRegionオブジェクト（対応のWebVTTキュリージョン）を返す。なければnull。設定時にはWebVTTキュリージョンに新しい値を設定する。

vertical属性は、取得時、下記テーブル上段セルがWebVTTキュー書字方向に一致する行の2列目を返す：

WebVTTキュー書字方向 vertical 値
横書き ""（空文字列）
縦書き左方向 "rl"
縦書き右方向 "lr"

設定時は、下段セルが新設定値に大文字小文字一致する行の上段に該当するWebVTTキュー書字方向とする。

snapToLines属性は、取得時に対応WebVTTキューsnap-to-linesフラグがtrueならtrue、それ以外はfalseを返す。設定時は新しい値を設定する。

line属性は取得時、WebVTTキューラインを返す。特別な値autoは文字列"auto"で表される。設定時は新値を設定。文字列"auto"なら autoと解釈する。

snapToLines および line 属性は任意の順で設定できる。APIは snapToLines がfalseのとき line が0〜100以外でも、またはその逆でも設定を拒否しない。

lineAlign属性は取得時、下表上段セルと一致するWebVTTキューラインアライメントの下段文字列を返す：

WebVTTキューラインアライメント lineAlign 値
開始アライメント "start"
中央アライメント "center"
終了アライメント "end"

設定時は、下段セルが新値と大文字小文字一致する行の上段セルのWebVTTキューラインアライメントに設定する。

position属性は取得時、WebVTTキューポジションを返す。特別な値autoは文字列"auto"で表される。設定時、新値が負または100超であればIndexSizeError例外を投げる。そうでなければ新値を設定。"auto"はautoとして扱う。

positionAlign属性は取得時、下表上段セルに一致するWebVTTキューポジションアライメントの下段セルを返す：

WebVTTキューポジションアライメント positionAlign 値
line-leftアライメント "line-left"
中央アライメント "center"
line-rightアライメント "line-right"
自動アライメント "auto"

設定時は、下段セルが新値と大文字小文字一致する行の上段セルのWebVTTキューポジションアライメントに設定する。

size属性は取得時、WebVTTキューサイズを返す。設定時、新値が負または100超であればIndexSizeError例外を投げる。そうでなければ新値に設定。

align属性は取得時、下表上段セルがWebVTTキューテキストアライメントに一致する行の下段文字列を返す：

WebVTTキューテキストアライメント align 値
開始アライメント "start"
中央アライメント "center"
終了アライメント "end"
左アライメント "left"
右アライメント "right"

設定時は、下段セルが新値と大文字小文字一致する行の上段セルのWebVTTキューテキストアライメントに設定する。

text属性は取得時、対応キューテキスト（未解析）を返す。設定時は新値をセット。

getCueAsHTML() メソッドは、キューテキストを、DocumentFragment に変換しなければなりません。変換は、責任あるドキュメント（エントリ設定オブジェクトで指定）に対して行われ、キューテキストに対してまず WebVTT キューテキスト解析規則 を適用し、その結果に WebVTT キューテキスト DOM 構築規則 を適用することによって得られる DocumentFragment を作成しなければなりません。

getCueAsHTML()にはフォールバック言語が提供されない。DocumentFragmentは言語情報を公開できないため。

9.2. VTTRegion インターフェース

次のインターフェースは、DOM APIでWebVTTリージョンを公開するために使用されます：

enum ScrollSetting { "" /* none */, "up" };
[Exposed=Window,
 Constructor]
interface VTTRegion {
  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

テキストトラックリージョンの識別子を返す。設定可能。

region . width

WebVTTリージョンの幅（ビデオ幅に対するパーセンテージ）を返す。設定可能。新しい値が0〜100の範囲外なら IndexSizeError 例外。

region . lines

テキストトラックリージョンの高さ（行数）を返す。設定可能。新しい値が負の場合、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とする。

  2. regionのWebVTTリージョン識別子を空文字列にする。

  3. regionのWebVTTリージョン幅を100にする。

  4. regionのWebVTTリージョン高さ（行数）を3にする。

  5. regionのregionAnchorXを0にする。

  6. regionのregionAnchorYを100にする。

  7. regionのviewportAnchorXを0にする。

  8. regionのviewportAnchorYを100にする。

  9. regionのWebVTTリージョンスクロールを空文字列にする。

  10. regionを表すVTTRegion オブジェクトを返す。

id属性は取得時、WebVTTリージョン識別子を返し、設定時は新しい値をセットする。

width属性は取得時、WebVTTリージョン幅を返す。設定時、新しい値が負または100超ならIndexSizeError例外。それ以外は新しい値をセット。

lines属性は取得時、WebVTTリージョン行数を返す。設定時は新しい値をセット。

regionAnchorX属性は取得時、WebVTTリージョンアンカーXを返す。設定時、新しい値が負または100超ならIndexSizeError例外。それ以外は新しい値をセット。

regionAnchorY属性は取得時、WebVTTリージョンアンカーYを返す。設定時、新しい値が負または100超ならIndexSizeError例外。それ以外は新しい値をセット。

viewportAnchorX属性は取得時、WebVTTリージョンビューポートアンカーXを返す。設定時、新しい値が負または100超ならIndexSizeError例外。それ以外は新しい値をセット。

viewportAnchorY属性は取得時、WebVTTリージョンビューポートアンカーYを返す。設定時、新しい値が負または100超ならIndexSizeError例外。それ以外は新しい値をセット。

scroll属性は取得時、下記表の1列目がWebVTTリージョンスクロール設定値に一致する行の2列目文字列を返す：

WebVTTリージョンスクロール scroll値
なし ""（空文字列）
up "up"

設定時、下段セルが新値に大文字小文字一致する行の上段セルのWebVTTリージョンスクロール設定値にセットする。

10. IANA に関する考慮事項

10.1. text/vtt

この登録はコミュニティレビューのためのものであり、IESGによるレビュー、承認、およびIANAへの登録に提出されます。

タイプ名:
text
サブタイプ名:
vtt
必須パラメータ:
パラメータなし
オプションパラメータ:
パラメータなし
エンコーディング考慮事項:
8bit（常にUTF-8）
セキュリティ考慮事項:

テキストトラックファイル自体は、データに機密情報が含まれていない限り即座にリスクをもたらすものではありません。ただし、実装はテキストトラックを処理する際に特定の規則に従い、起源ベースの制限が尊重されるようにする必要があります。これらの規則が正しく実装されない場合、情報漏洩やクロスサイトスクリプティング攻撃などが発生する可能性があります。

相互運用性に関する考慮事項:

準拠・非準拠コンテンツ双方の処理規則は本仕様で定義されています。

公開仕様:
この文書が関連仕様です。
このメディア型を使用するアプリケーション:
ウェブブラウザおよびその他の動画プレーヤー。
追加情報:
マジックナンバー:

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>
対象用途:
一般的
使用制限:
制限はありません。
著者:
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オブジェクトモデルがスクリプトに公開されず、::before・::after以外の疑似要素のcomputed styleをgetComputedStyle()APIで取得できないためです。[CSSOM]

スクリプト関連のセキュリティ

WebVTTはスクリプトを含まず、有効化もしません。WebVTTファイルに埋め込んだスクリプトが実行される方法をユーザーエージェントが提供しないことが重要です。

ただしキャプション表示以外にタイミング付き入力「トリガー」としてscriptシステム向けに設計されたファイルを作ることは可能です。不完全なscriptやシステムの設計によっては、それがセキュリティやプライバシー、リソース消費などの問題になる場合もあります。とはいえ、WebVTTは各トリガーをタイムスタンプで供給するだけなので、悪意あるファイルでは極めて短い間隔で多数トリガーを発し負荷をかける可能性もあります。

利用者選好のプライバシー

WebVTTファイルの選択・DLや解釈を行うユーザーエージェントは、ユーザーが字幕を必要としていることや、字幕等の言語選好といった情報をオリジンサーバーに伝える可能性があります。これはユーザーに関する（小さな）情報ではありますが、キャプションを用意し取得・利用の可否を選ぶのは主に書式やプロトコル（例：HTML要素）の特徴であって、キャプションフォーマット自身の仕様ではありません。[HTML51]

謝辞

SubRip コミュニティ（特に Zuggy と ai4spam）に感謝します。SubRip ソフトウェアの SRT ファイル形式は WebVTT テキストトラックファイル形式の基礎となりました。

WebVTTが最初に定義されたHTML標準の作成や、これに貢献したIan Hickson他多くの方々にも感謝します。[HTML51]

また次の方々にも有用なコメントをいただきました。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, Victor Cărbune に感謝いたします。

索引

本仕様で定義される用語

参照によって定義される用語

参考文献

規範的な参考文献

[BCP47]
A. Phillips; M. Davis. Tags for Identifying Languages． 2009年9月．IETF Best Current Practice．URL: https://tools.ietf.org/html/bcp47
[BIDI]
Mark Davis; Aharon Lanin; Andrew Glass. Unicode Bidirectional Algorithm．2017年5月14日．Unicode Standard Annex #9．URL: https://www.unicode.org/reports/tr9/tr9-37.html
[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.．CSS Box Alignment Module Level 3．URL: https://www.w3.org/TR/css-align-3/
[CSS-BACKGROUNDS-3]
Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3．URL: https://www.w3.org/TR/css-backgrounds-3/
[CSS-CASCADE-4]
Elika Etemad; Tab Atkins Jr.．CSS Cascading and Inheritance Level 4．URL: https://www.w3.org/TR/css-cascade-4/
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley. CSS Color Module Level 4． URL: https://www.w3.org/TR/css-color-4/
[CSS-DISPLAY-3]
Elika Etemad. CSS Display Module Level 3．URL: https://www.w3.org/TR/css-display-3/
[CSS-FLEXBOX-1]
Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. CSS Flexible Box Layout Module Level 1．URL: https://www.w3.org/TR/css-flexbox-1/
[CSS-FONTS-3]
John Daggett. CSS Fonts Module Level 3．URL: https://www.w3.org/TR/css-fonts-3/
[CSS-FONTS-4]
John Daggett; Myles Maxfield. CSS Fonts Module Level 4． URL: https://www.w3.org/TR/css-fonts-4/
[CSS-OVERFLOW-3]
David Baron; Florian Rivoal. CSS Overflow Module Level 3．URL: https://www.w3.org/TR/css-overflow-3/
[CSS-POSITION-3]
Rossen Atanassov; Arron Eicholz. CSS Positioned Layout Module Level 3．URL: https://www.w3.org/TR/css-position-3/
[CSS-SIZING-3]
Elika Etemad. CSS Intrinsic & Extrinsic Sizing Module Level 3．URL: https://www.w3.org/TR/css-sizing-3/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3． URL: https://www.w3.org/TR/css-syntax-3/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii. CSS Text Module Level 3．URL: https://www.w3.org/TR/css-text-3/
[CSS-TEXT-4]
Elika Etemad; Koji Ishii; Alan Stearns. CSS Text Module Level 4．URL: https://www.w3.org/TR/css-text-4/
[CSS-TEXT-DECOR-3]
Elika Etemad; Koji Ishii. CSS Text Decoration Module Level 3．URL: https://www.w3.org/TR/css-text-decor-3/
[CSS-TRANSITIONS-1]
David Baron; Dean Jackson; Brian Birtles. CSS Transitions．URL: https://www.w3.org/TR/css-transitions-1/
[CSS-UI-4]
Florian Rivoal. CSS Basic User Interface Module Level 4．URL: https://www.w3.org/TR/css-ui-4/
[CSS-VALUES]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3．URL: https://www.w3.org/TR/css-values-3/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3．URL: https://www.w3.org/TR/css-writing-modes-3/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4．URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS22]
Bert Bos. Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification．URL: https://www.w3.org/TR/CSS22/
[CSS3-COLOR]
Tantek Çelik; Chris Lilley; David Baron. CSS Color Module Level 3．2017年12月5日．CR．URL: https://www.w3.org/TR/css-color-3/
[CSS3-RUBY]
Elika Etemad; Koji Ishii. CSS Ruby Layout Module Level 1． URL: https://www.w3.org/TR/css-ruby-1/
[CSSOM]
Simon Pieters; Glenn Adams. CSS Object Model (CSSOM)．URL: https://www.w3.org/TR/cssom-1/
[DOM-20151119]
Anne van Kesteren; et al. W3C DOM4．2015年11月19日．REC．URL: https://www.w3.org/TR/2015/REC-dom-20151119/
[ENCODING-CR]
Anne van Kesteren; Joshua Bell; Addison Phillips. Encoding．2017年4月13日．CR．URL: https://www.w3.org/TR/2017/CR-encoding-20170413/
[HTML]
Anne van Kesteren; et al. HTML Standard．Living Standard．URL: https://html.spec.whatwg.org/multipage/
[HTML51]
Steve Faulkner; et al. HTML 5.1 2nd Edition．URL: https://www.w3.org/TR/html51/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels．1997年3月．Best Current Practice．URL: https://tools.ietf.org/html/rfc2119
[RFC3629]
F. Yergeau. UTF-8, a transformation format of ISO 10646． 2003年11月．Internet Standard．URL: https://tools.ietf.org/html/rfc3629
[SELECTORS-3]
Tantek Çelik; et al. Selectors Level 3．URL: https://www.w3.org/TR/selectors-3/
[SELECTORS4]
Elika Etemad; Tab Atkins Jr.．Selectors Level 4．URL: https://www.w3.org/TR/selectors-4/
[WebIDL]
Cameron McCormack; Boris Zbarsky; Tobie Langel. Web IDL．URL: https://heycam.github.io/webidl/
[WEBIDL-1]
Cameron McCormack. WebIDL Level 1．URL: https://www.w3.org/TR/2016/REC-WebIDL-1-20161215/

参考情報

[MAUR]
Shane McCarron; Michael Cooper; Mark Sadecki. Media Accessibility User Requirements．WD． URL: http://www.w3.org/TR/media-accessibility-reqs/
[WCAG20]
Ben Caldwell; et al. Web Content Accessibility Guidelines (WCAG) 2.0．2008年12月11日．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,
 Constructor(double startTime, double endTime, DOMString text)]
interface VTTCue : TextTrackCue {
  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,
 Constructor]
interface VTTRegion {
  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;
};