WebVTT: 웹 비디오 텍스트 트랙 형식

1. 소개

이 절은 비규범적이다.

WebVTT (Web Video Text Tracks) 형식은 HTML <track> 요소와 관련하여 외부 텍스트 트랙 리소스를 마크업하기 위한 것이다.

WebVTT 파일은 비디오 콘텐츠에 대한 캡션 또는 자막을 제공하며, 텍스트 비디오 설명 [MAUR], 콘텐츠 탐색을 위한 챕터, 그리고 더 일반적으로 오디오 또는 비디오 콘텐츠와 시간상 정렬된 모든 형태의 메타데이터도 제공한다.

이 명세의 현재 버전 대부분은 캡션 또는 자막을 위해 WebVTT 파일을 사용하는 방법을 설명하는 데 할애되어 있다. 이 단계에서는 챕터와 시간상 정렬된 메타데이터에 대한 정보는 최소한이며, 비디오 설명에 대해서는 아무것도 없다.

이 절에서는 소개로 몇 가지 WebVTT 파일 예제를 제공한다.

1.1. 간단한 캡션 파일

이 절은 비규범적이다.

WebVTT 파일의 주된 용도는 비디오 콘텐츠에 캡션 또는 자막을 제공하는 것이다. 다음은 인터뷰에 캡션을 붙이는 샘플 파일이다:

WEBVTT

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

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

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

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

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

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

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

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

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

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

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

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

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

일반적으로 WebVTT 파일은 시간 구간과 연결된 텍스트 세그먼트의 시퀀스로 구성되며, 이를 cue라고 부른다(정의). 캡션 및 자막 외에도, WebVTT는 시간상 정렬된 메타데이터에 사용할 수 있으며, 일반적으로 cue에서 이름-값 쌍을 전달하는 데 사용된다. WebVTT는 오디오/비디오 파일 주변의 문맥적 탐색을 돕는 챕터를 전달하는 데에도 사용할 수 있다. 마지막으로, WebVTT는 텍스트 비디오 설명을 전달하는 데 사용할 수 있으며, 이는 시간 구간의 시각적 콘텐츠를 설명하는 텍스트로 시각 장애 사용자가 문맥을 이해할 수 있도록 음성으로 합성될 수 있다.

이 WebVTT 버전은 캡션 및 자막 사용 사례를 해결하는 데 중점을 둔다. 다른 사용 사례에 대해서는 추가 명세 작업이 가능하다. WebVTT 파일이 어떤 유형의 사용 사례에 사용되는지에 대한 결정은 그 파일을 사용하는 소프트웨어가 내린다. 예를 들어, <track> 요소를 통해 HTML 파일과 함께 사용되는 경우, kind 속성이 WebVTT 파일이 어떻게 해석되어야 하는지를 정의한다.

다음 하위 절에서는 WebVTT 파일 형식의 일부 핵심 기능에 대한 개요를 제공하며, 특히 캡션 및 자막에 사용될 때를 다룬다.

1.2. 여러 줄을 가진 캡션 cue

이 절은 비규범적이다.

cue 안의 줄 바꿈은 존중된다. 사용자 에이전트는 cue의 너비에 맞추기 위해 필요한 경우 추가 줄 바꿈도 삽입한다. 따라서 일반적으로 작성자는 줄 바꿈이 반드시 필요한 경우를 제외하고 cue를 모두 한 줄에 작성하는 것이 권장된다.

공익 광고 비디오의 다음 캡션은 줄 바꿈을 보여준다:

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.

첫 번째 cue는 단순하므로 아마 한 줄로만 표시될 것이다. 두 번째는 각 화자마다 한 줄씩, 두 줄을 차지한다. 세 번째는 비디오 너비에 맞게 줄 바꿈되어, 여러 줄이 될 수 있다. 예를 들어, 세 cue는 다음과 같이 보일 수 있다:

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.

cue의 너비가 더 작다면, 다음 예제에서처럼 처음 두 cue도 줄 바꿈될 수 있다. 하지만 두 번째 cue의 명시적인 줄 바꿈은 여전히 존중된다는 점에 유의한다:

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 cue와 region을 대상으로 지정할 수 있다.

이 예제에서 HTML 페이지는 style 요소 안에 CSS 스타일 시트를 가지며, 이 스타일 시트는 비디오 안의 모든 cue에 그라데이션 배경과 텍스트 색상을 적용하고, 비디오 안의 cue에 있는 모든 WebVTT Bold Objects의 텍스트 색상도 변경한다.

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

CSS 스타일 시트는 WebVTT 파일 자체에도 포함될 수 있다.

스타일 블록은 모든 헤더 뒤, 첫 번째 cue 앞에 배치되며, "STYLE" 줄로 시작한다. 주석 블록은 스타일 블록 사이에 끼워 넣을 수 있다.

스타일 시트 안에는 빈 줄이 나타날 수 없다. 빈 줄은 제거하거나 공백 또는 CSS 주석(예: /**/)으로 채울 수 있다.

문자열 "-->"는 스타일 시트에서 사용할 수 없다. 스타일 시트가 ""로 감싸져 있다면, 그 문자열들을 제거하면 된다. 만약 "-->"가 CSS 문자열 안에 나타난다면, 예를 들어 "--\>"와 같이 CSS 이스케이프를 사용할 수 있다.

이 예제는 WebVTT에서 스타일 블록으로 cue를 스타일링하는 방법을 보여준다.

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는 덜 자주 사용되는 일부 기능도 지원한다.

이 예제에서 cue에는 식별자가 있다:

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™

이를 통해 스타일 시트가 특정 cue를 대상으로 지정할 수 있다.

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

CSS의 구문 규칙 때문에 일부 문자는 CSS 문자 이스케이프 시퀀스로 이스케이프되어야 한다. 예를 들어, 0-9 숫자로 시작하는 ID는 이스케이프되어야 한다. ID 123은 "\31 23"으로 표현할 수 있다(31은 "1"의 Unicode 코드 포인트를 가리킨다). CSS 이스케이프에 대한 자세한 내용은 마크업과 CSS에서 문자 이스케이프 사용을 참조한다.

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

이 예제는 요소에서 클래스를 사용할 수 있는 방법을 보여주며, 이는 지역화 또는 스타일링의 유지보수성에 도움이 될 수 있다. 또한 cue 텍스트에서 언어 변경을 나타내는 방법도 보여준다.

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

이 예제에서 각 cue는 voice span을 사용하여 누가 말하고 있는지를 나타낸다. 첫 번째 cue에서, 화자를 지정하는 span은 "first"와 "loud"라는 두 클래스도 주석으로 갖는다. 세 번째 cue에는 일부 기울임꼴 텍스트도 있다(특정 화자와 연결되지 않음). 마지막 cue에는 "loud" 클래스만 주석으로 지정되어 있다.

WEBVTT

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

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

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

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

특별한 예외로, voice span이 cue 텍스트 전체를 덮는 경우에는 닫을 필요가 없다는 점에 유의한다.

스타일 시트는 이러한 span을 스타일링할 수 있다:

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

이 예제는 비디오 viewport 안의 명시적인 위치에 cue를 배치하는 방법을 보여준다.

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?

이 예제들의 cue는 수평이므로, "position" 설정은 비디오 viewpoint의 너비에 대한 백분율을 가리킨다. 텍스트가 수직이라면, "position" 설정은 비디오 viewport의 높이를 가리킨다.

"line-left" 또는 "line-right"는 "position" 설정이 적용되는 상자의 물리적 측면만 가리키며, cue의 수평 또는 수직 방향에 대해 불가지론적인 방식으로 동작한다. 이는 상자 안의 텍스트 자체의 방향이나 위치에 영향을 주거나 관련되지 않는다.

cue는 비디오 viewport 너비의 35%만 덮는다. 이것은 세 cue 모두에 대한 cue box의 "size"이다.

첫 번째 cue는 cue box가 10% 지점에 배치된다. "position" 설정 안의 "line-left"와 "line-right"는 cue box의 어느 쪽을 position이 가리키는지 나타낸다. 이 경우 텍스트는 수평이므로, "line-left"는 상자의 왼쪽을 가리키고, 따라서 cue box는 비디오 viewport 너비의 10% 지점과 45% 지점 사이에 배치되어, 아마도 비디오 이미지 왼쪽의 화자 아래에 놓인다. cue가 수직이었다면, "line-left" 배치는 비디오 viewport 높이의 위쪽에서 시작하고 cue box는 비디오 viewport 높이의 35%를 덮게 된다.

첫 번째 cue의 cue box 안의 텍스트는 "align" cue 설정을 사용해 정렬된다. 왼쪽에서 오른쪽으로 렌더링되는 텍스트의 경우 "start" 정렬은 해당 상자의 왼쪽이고, 오른쪽에서 왼쪽으로 렌더링되는 텍스트의 경우 상자의 오른쪽이다. 따라서 텍스트의 방향성과 무관하게, 텍스트는 그 화자 아래에 유지된다. 번역 결과 텍스트의 기본 방향이 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 바뀔 때 상자가 움직이는 것을 피하기 위해, start 정렬된 텍스트의 경우 cue box의 "center" position 정렬이 기본값이라는 점에 유의한다.

두 번째 cue는 cue box가 비디오 viewport 너비의 90% 지점에서 오른쪽 정렬된다("right" 정렬 텍스트는 상자를 오른쪽 정렬한다). 같은 효과는 cue box를 명시적으로 배치하는 "position:55%,line-left"로도 얻을 수 있다. 세 번째 cue는 첫 번째 cue와 동일하게 배치된 cue box 안에서 텍스트를 가운데 정렬한다.

이 예제는 서로 다른 두 화자에 대한 rollup 캡션을 포함하는 두 region을 보여준다. Fred의 cue는 비디오 왼쪽 절반의 region 안에서 위로 스크롤되고, Bill의 cue는 비디오 오른쪽 절반의 region 안에서 위로 스크롤된다. Fred의 첫 번째 cue는 20초까지 정의되어 있음에도 12.5초에 사라지는데, 이는 그 region이 3줄로 제한되어 있고 12.5초에 네 번째 cue가 나타나기 때문이다:

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.

region은 수평 cue에 대해서만 정의된다는 점에 유의한다.

1.5. WebVTT의 주석

이 절은 비규범적이다.

주석은 WebVTT 파일 안에 포함될 수 있다.

주석은 빈 줄이 앞에 오고, 단어 "NOTE"(그 뒤에 공백 또는 줄 바꿈이 옴)로 시작하며, 첫 번째 빈 줄에서 끝나는 블록일 뿐이다.

여기서는 cue에 있을 수 있는 문제를 기록하기 위해 한 줄 주석을 사용한다.

WEBVTT

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

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

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

이 예제에서 작성자는 많은 주석을 작성했다.

WEBVTT

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

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

NOTE check next cue

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

NOTE end of file

1.6. 챕터 예제

이 절은 비규범적이다.

WebVTT 파일은 비디오의 탐색 마커인 챕터로 구성될 수 있다.

챕터는 일반 텍스트이며, 일반적으로 한 줄뿐이다.

이 예제에서 한 강연은 각 슬라이드가 하나의 챕터가 되도록 나뉘어 있다.

WEBVTT

NOTE
This is from a talk Silvia gave about WebVTT.

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

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

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

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

1.7. 메타데이터 예제

이 절은 비규범적이다.

WebVTT 파일은 시간상 정렬된 메타데이터로 구성될 수 있다.

메타데이터는 임의의 문자열일 수 있으며, 종종 JSON 구조로 제공된다.

빈 줄은 WebVTT cue의 끝을 의미하기 때문에, 메타데이터 블록 안에는 빈 줄을 제공할 수 없다는 점에 유의한다.

이 예제에서 한 강연은 각 슬라이드가 하나의 챕터가 되도록 나뉘어 있다.

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]

알고리즘의 일부로 명령형으로 표현된 요구 사항(예: "앞쪽의 모든 공백 문자를 제거한다" 또는 "false를 반환하고 이 단계를 중단한다")은 해당 알고리즘을 소개할 때 사용된 핵심어("must", "should", "may" 등)의 의미로 해석되어야 한다.

알고리즘이나 특정 단계로 표현된 적합성 요구 사항은 최종 결과가 동등한 한 어떤 방식으로든 구현될 수 있다. (특히, 이 명세에서 정의하는 알고리즘은 이해하기 쉽도록 의도된 것이며, 성능을 의도한 것이 아니다.)

2.1. 적합성 클래스

이 명세는 사용자 에이전트(구현자와 관련됨) 및 WebVTT 파일(작성자 및 작성 도구 구현자와 관련됨)에 대한 적합성 기준을 설명한다.

§ 4 구문은 유효한 WebVTT file이 무엇으로 구성되는지를 정의한다. 작성자는 그 안의 요구 사항을 따라야 하며, conformance checker를 사용할 것이 권장된다. § 6 파싱은 유효하거나 유효하지 않은 WebVTT files 모두에 대해, text/vtt로 label된 file을 사용자 에이전트가 어떻게 해석해야 하는지를 정의한다. parsing 규칙은 확장성을 제공하고 일부 syntax 오류가 있는 cue도 여전히 렌더링하기 위해, syntax가 허용하는 것보다 작성자 오류에 더 관대하다.

예를 들어, 파서는 두 cue 사이의 빈 줄이 누락되어도 두 개의 cue를 생성한다. 이는 명백한 실수이므로 적합성 검사기는 이를 오류로 표시하겠지만, 사용자에게 cue를 렌더링하는 것은 여전히 유용하다.

사용자 에이전트는 서로 다른 적합성 요구 사항을 가지는 여러 (겹칠 수 있는) 범주에 속한다.

스크립팅을 지원하는 사용자 에이전트

이 명세의 모든 처리 요구 사항이 적용된다. 사용자 에이전트는 또한 Web IDL 명세에 설명된 대로, 이 명세의 IDL 조각에 대한 적합한 구현이어야 한다. [WEBIDL]

스크립팅을 지원하지 않는 사용자 에이전트

§ 6.5 WebVTT cue 텍스트 DOM 구성 규칙 및 § 9 API에 있는 요구 사항을 제외하고, 이 명세의 모든 처리 요구 사항이 적용된다.

CSS를 지원하지 않는 사용자 에이전트

스타일시트와 CSS에 관련된 § 6 파싱의 일부 및 § 7 렌더링과 § 8 CSS 확장 전체를 제외하고, 이 명세의 모든 처리 요구 사항이 적용된다. 대신 사용자 에이전트는 WebVTT 캡션 또는 자막 cue 텍스트 안의 텍스트만 적절한 방식으로 렌더링해야 하며, § 5 WebVTT 캡션 또는 자막 cue 구성 요소의 기본 클래스에서 정의한 색상 클래스를 특별히 지원해야 한다. 그 밖의 스타일링 지시는 선택 사항이다.

완전한 HTML CSS 엔진을 지원하지 않는 사용자 에이전트

§ 5 WebVTT 캡션 또는 자막 cue 구성 요소의 기본 클래스에서 정의한 색상 클래스를 포함하여, 이 명세의 모든 처리 요구 사항이 적용된다. 그러나 사용자 에이전트는 § 6 파싱, § 7 렌더링 및 § 8 CSS 확장의 CSS 관련 기능을, 전체 CSS를 지원하는 렌더러가 생성하는 것과 동등한 렌더링 결과가 나오도록 적용해야 한다.

완전한 HTML CSS 엔진을 지원하는 사용자 에이전트

이 명세의 모든 처리 요구 사항이 적용된다. 그러나 완전한 HTML CSS 엔진을 지원하지 않는 사용자 에이전트가 CSS 기능의 등가물을 구현해야 하므로, 제한된 CSS 스타일 집합만 허용된다. 따라서 완전한 CSS 엔진을 지원하는 사용자 에이전트는 WebVTT 명세의 범위를 벗어나는 추가 CSS 스타일이 스며들지 않으면서 동일한 렌더링이 가능하도록, WebVTT에 적용하는 CSS 스타일을 제한해야 한다.

적합성 검사기

적합성 검사기는 WebVTT 파일이 이 명세에서 설명하는 적용 가능한 적합성 기준을 준수하는지 검증해야 한다. 이 명세의 목적상 "validator"라는 용어는 적합성 검사기와 동등하다.

작성 도구

작성 도구는 적합한 WebVTT 파일을 생성해야 한다. 다른 형식을 WebVTT로 변환하는 도구도 작성 도구로 간주된다.

작성 도구가 부적합한 WebVTT 파일을 편집하는 데 사용되는 경우, 편집 세션 중에 편집되지 않은 파일의 절에 있는 적합성 오류를 보존할 수 있다(즉, 편집 도구는 오류가 있는 콘텐츠를 왕복 처리할 수 있다). 그러나 작성 도구는 오류가 그렇게 보존된 경우 출력이 적합하다고 주장해서는 안 된다.

2.2. Unicode 정규화

이 명세의 구현은 처리 중에 Unicode 텍스트를 정규화해서는 안 된다.

예를 들어, 식별자가 문자 U+0041 LATIN CAPITAL LETTER A와 그 뒤의 U+030A COMBINING RING ABOVE(분해된 문자 시퀀스)로 구성된 cue, 또는 문자 U+212B ANGSTROM SIGN(호환 문자)으로 구성된 cue는 문자 U+00C5 LATIN CAPITAL LETTER A WITH RING ABOVE(미리 합성된 문자)로 구성된 ID를 가진 cue를 대상으로 하는 선택자와 일치하지 않는다.

3. 데이터 모델

WebVTT의 박스 모델은 세 가지 핵심 요소, 즉 비디오 viewport, cue, region으로 구성된다. 비디오 viewport는 cue와 region이 렌더링되는 렌더링 영역이다. cue는 cue 줄 집합으로 구성된 박스이다. region은 cue를 함께 그룹화하는 데 사용되는 비디오 viewport의 하위 영역이다. cue는 비디오 viewport 안에 직접 배치되거나, 비디오 viewport 안에 배치되는 region 안에 배치된다.

비디오 viewport 안에서 cue의 위치는 cue 설정 집합으로 정의된다. 비디오 viewport 안에서 region의 위치는 region 설정 집합으로 정의된다. region 안에 있는 cue는 자신의 cue 설정 중 제한된 집합만 사용할 수 있다. 구체적으로, cue에 "vertical", "line" 또는 "size" 설정이 있으면 cue는 region에서 벗어난다. 그렇지 않으면 cue의 너비는 viewport가 아니라 region 너비에 상대적으로 계산된다.

3.1. 개요

이 절은 비규범적이다.

WebVTT 파일은 비디오 또는 오디오 리소스와 시간상 정렬된 데이터 청크를 위한 컨테이너 파일이다. 따라서 시간상 정렬된 데이터의 직렬화 형식으로 볼 수 있다.

WebVTT 파일은 헤더로 시작한 다음 일련의 데이터 블록을 포함한다. 데이터 블록에 시작 시간과 종료 시간이 있으면 WebVTT cue라고 부른다. 주석은 또 다른 종류의 데이터 블록이다.

WebVTT 파일에는 서로 다른 종류의 데이터를 담을 수 있다. HTML 명세는 캡션, 자막, 챕터, 오디오 설명 및 메타데이터를 데이터 종류로 식별하고, 그중 어떤 것이 text track kind 속성에서 사용되는지를 지정한다. text track 요소 [HTML].

WebVTT 파일은 한 종류의 데이터만 포함해야 하며, 서로 다른 종류의 데이터를 섞어서는 안 된다. WebVTT 파일의 데이터 종류는 HTML 파일의 text track 요소와 같이 외부에서 지정된다. 환경은 데이터를 올바르게 해석할 책임이 있다.

WebVTT 캡션 또는 자막 cue는 비디오 viewport 위의 오버레이로 렌더링되거나, 비디오 viewport의 하위 영역인 region 안에 렌더링된다.

3.2. WebVTT cue

WebVTT cue는 다음을 추가로 구성하는 text track cue [HTML]이다:

cue 텍스트: cue의 원시 텍스트 및 그 해석 규칙.

3.3. WebVTT 캡션 또는 자막 cue

WebVTT 캡션 또는 자막 cue는 WebVTT cue이며, cue 텍스트를 렌더링하고 DOM 조각으로 변환할 수 있도록 하는 다음 추가 속성을 가진다:

cue box

WebVTT cue의 cue box는 cue의 모든 줄 텍스트가 렌더링될 박스이다. cue가 region의 일부인 경우, 이는 비디오의 viewport 또는 viewport 안의 region에 렌더링된다.

비디오 viewport 또는 region의 크기 안에서 cue box의 위치는 WebVTT cue position 및 WebVTT cue line의 값에 따라 달라진다.

줄의 길이 때문에 필요하다면, 줄은 cue box의 size 안에서 줄 바꿈된다.

쓰기 방향

쓰기 방향은 다음 중 하나이다.

horizontal (한 줄이 수평으로 뻗고 비디오 viewport의 위쪽 가장자리에서 수직으로 오프셋되며, 연속된 줄은 서로 아래에 표시됨),
vertical growing left (한 줄이 수직으로 뻗고 비디오 viewport의 오른쪽 가장자리에서 수평으로 오프셋되며, 연속된 줄은 서로 왼쪽에 표시됨), 또는
vertical growing right (한 줄이 수직으로 뻗고 비디오 viewport의 왼쪽 가장자리에서 수평으로 오프셋되며, 연속된 줄은 서로 오른쪽에 표시됨).

쓰기 방향은 line, position, 및 size cue 설정이 비디오의 너비 또는 높이 중 어느 것에 대해 해석되는지에 영향을 준다.

기본적으로 쓰기 방향은 horizontal로 설정된다.

vertical growing left 쓰기 방향은 세로쓰기 중국어, 일본어 및 한국어에 사용할 수 있으며, vertical growing right 쓰기 방향은 세로쓰기 몽골어에 사용할 수 있다.

snap-to-lines 플래그

line이 정수 개수의 줄인지 (cue의 첫 번째 줄의 줄 크기를 사용함), 아니면 비디오 크기에 대한 백분율인지를 나타내는 boolean이다. 이 플래그는 줄이 계산될 때 true로 설정되고, 그렇지 않으면 false로 설정된다.

플래그가 false인 cue는 여러 cue가 같은 위치에 있는 경우 겹침 회피를 적용한 모듈로 요청된 대로 오프셋된다.

기본적으로 snap-to-lines 플래그는 true로 설정된다.

line

line은 cue box의 위치 지정을 정의한다.

line은 cue box를 쓰기 방향, snap-to-lines 플래그, 또는 다른 표시 중인 트랙이 차지하는 줄에 의해 정의된 대로, 비디오 viewport의 위쪽, 오른쪽 또는 왼쪽에서 오프셋한다.

line은 줄 수, 비디오 viewport 높이 또는 너비의 백분율, 또는 특수 값 auto 중 하나로 설정되며, 이는 오프셋이 다른 표시 중인 트랙에 따라 달라진다는 의미이다.

기본적으로 line은 auto로 설정된다.

쓰기 방향이 horizontal이면, line 백분율은 비디오의 높이에 상대적이며, 그렇지 않으면 비디오의 너비에 상대적이다.

WebVTT cue는 computed line을 가지며, 그 값은 cue의 다른 측면을 기준으로 정의되는 다음 알고리즘이 반환하는 값이다:

line이 숫자이고, WebVTT cue의 WebVTT cue snap-to-lines 플래그가 false이며, line이 음수이거나 100보다 크면, 100을 반환하고 이 단계를 중단한다.

WebVTT 파서는 line을 0..100 범위를 벗어난 숫자로 설정하면서 동시에 WebVTT cue snap-to-lines 플래그를 false로 설정하지는 않지만, DOM API의 snapToLines 및 line 속성을 사용할 때는 이런 일이 발생할 수 있다.
line이 숫자이면, WebVTT cue line의 값을 반환하고 이 단계를 중단한다. (WebVTT cue snap-to-lines 플래그가 true이므로 0..100 범위의 값뿐 아니라 어떤 값도 유효하거나, 값이 0..100 범위에 있어 그 플래그의 값과 관계없이 유효하다.)
WebVTT cue의 WebVTT cue snap-to-lines 플래그가 false이면, 값 100을 반환하고 이 단계를 중단한다. (line은 특수 값 auto이다.)
cue를 WebVTT cue로 둔다.
cue가 cue 목록 안의 text track에 없거나, 그 text track이 media element의 text track 목록 안에 없으면, −1을 반환하고 이 단계를 중단한다.
track을 cue가 속한 cue 목록을 가진 text track으로 둔다.
n을 text track mode가 showing이고, track보다 앞서 media element의 text track 목록 안에 있는 text track의 수로 둔다.
n을 1 증가시킨다.
n의 부호를 반전한다.
n을 반환한다.

예를 들어, 두 text track이 하나의 media element에서 동시에 showing이고, 각 text track이 현재 활성 WebVTT cue를 가지며 그 line이 모두 auto이면, 첫 번째 text track의 cue의 computed line은 −1이 되고, 두 번째는 −2가 된다.

line alignment

cue box의 line에 대한 정렬이며, 다음 중 하나이다:

Start alignment: cue box의 위쪽 면(horizontal cue의 경우), 왼쪽 면(vertical growing right의 경우), 또는 오른쪽 면(vertical growing left의 경우)이 line에 정렬된다.
Center alignment: cue box가 line을 중심으로 정렬된다.
End alignment: cue box의 아래쪽 면(horizontal cue의 경우), 오른쪽 면(vertical growing right의 경우), 또는 왼쪽 면(vertical growing left의 경우)이 line에 정렬된다.

기본적으로 line alignment는 start로 설정된다.

line alignment는 text alignment와 별개이다 — 오른쪽에서 왼쪽 또는 왼쪽에서 오른쪽의 cue 텍스트는 line alignment에 영향을 주지 않는다.

position

position은 쓰기 방향으로 정의된 방향에서 cue box의 들여쓰기를 정의한다.

position은 cue box의 위치를 백분율 값으로 제공하는 숫자이거나, 특수 값 auto이다. 이는 위치가 cue의 text alignment에 따라 달라진다는 의미이다.

cue가 region 안에 있지 않으면, 백분율 값은 비디오 크기에 대한 백분율로 해석되어야 하며, 그렇지 않으면 region 크기에 대한 백분율로 해석되어야 한다.

기본적으로 position은 auto로 설정된다.

쓰기 방향이 horizontal이면, position 백분율은 비디오의 너비에 상대적이며, 그렇지 않으면 비디오의 높이에 상대적이다.

WebVTT cue는 computed position을 가지며, 그 값은 cue의 다른 측면을 기준으로 정의되는 다음 알고리즘이 반환하는 값이다:

position이 0과 100 사이의 숫자이면, position의 값을 반환하고 이 단계를 중단한다. (그렇지 않으면 position은 특수 값 auto이다.)
cue text alignment가 left이면, 0을 반환하고 이 단계를 중단한다.
cue text alignment가 right이면, 100을 반환하고 이 단계를 중단한다.
그렇지 않으면, 50을 반환하고 이 단계를 중단한다.

WebVTT cue position alignment의 기본값은 center이므로, cue에 WebVTT cue text alignment 설정이 없으면 WebVTT cue position은 기본적으로 50%가 된다.

horizontal cue에 오른쪽에서 왼쪽으로 쓰는 cue 텍스트가 있는 경우에도, cue box는 비디오 viewport의 왼쪽 가장자리에서 위치 지정된다. 이를 통해 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽의 cue 텍스트, 또는 둘 모두로 채울 수 있는 렌더링 공간 템플릿을 정의할 수 있다.

100%가 아닌 size와 start 또는 end의 text alignment를 가진 WebVTT cue에 대해, 작성자는 기본 auto position을 사용해서는 안 된다.

text alignment가 start 또는 end인 경우, auto position은 50%이다. 이는 left 및 right 정렬 텍스트와 다르며, 이 경우 auto position은 각각 0% 및 100%이다. 위 요구 사항은 자동 위치 지정이 start 또는 end 정렬 텍스트에 대해 작동하지 않는다는 점이 놀라울 수 있기 때문에 존재한다. cue text는 왼쪽에서 오른쪽의 기본 방향, 오른쪽에서 왼쪽의 기본 방향, 또는 둘 모두(서로 다른 줄에서)의 텍스트로 구성될 수 있으므로, 이러한 자동 위치 지정은 예상치 못한 결과를 낳을 수 있다.

position alignment

쓰기 방향 차원에서 cue box에 대한 정렬이며, position이 무엇에 고정되는지를 설명한다. 다음 중 하나이다:

Line-left alignment: cue box의 왼쪽 면(horizontal cue의 경우) 또는 위쪽 면 (그 밖의 경우)이 position에 정렬된다.
Center alignment: cue box가 position을 중심으로 정렬된다.
Line-right alignment: cue box의 오른쪽 면(horizontal cue의 경우) 또는 아래쪽 면 (그 밖의 경우)이 position에 정렬된다.
Auto alignment: cue box의 정렬은 cue의 text alignment 값에 따라 달라진다.

기본적으로 position alignment는 auto로 설정된다.

WebVTT cue는 computed position alignment를 가지며, 그 값은 cue의 다른 측면을 기준으로 정의되는 다음 알고리즘이 반환하는 값이다:

WebVTT cue position alignment가 auto가 아니면, WebVTT cue position alignment의 값을 반환하고 이 단계를 중단한다.
WebVTT cue text alignment가 left이면, line-left를 반환하고 이 단계를 중단한다.
WebVTT cue text alignment가 right이면, line-right를 반환하고 이 단계를 중단한다.
WebVTT cue text alignment가 start이면, cue 텍스트의 기본 방향이 왼쪽에서 오른쪽인 경우 line-left를 반환하고, 그렇지 않으면 line-right를 반환한다.
WebVTT cue text alignment가 end이면, cue 텍스트의 기본 방향이 왼쪽에서 오른쪽인 경우 line-right를 반환하고, 그렇지 않으면 line-left를 반환한다.
그렇지 않으면, center를 반환한다.

position은 항상 비디오의 왼쪽 (horizontal cue의 경우) 또는 위쪽 (그 밖의 경우)에서 측정되므로, WebVTT cue position alignment의 line-left 값은 horizontal cue와 vertical cue에서 왼쪽과 위쪽 사이에서 달라진다.

size

cue box의 크기를 제공하는 숫자이며, 쓰기 방향에 의해 정의된 대로 비디오의 백분율로 해석되어야 한다.

기본적으로 WebVTT cue size는 100%로 설정된다.

쓰기 방향이 horizontal이면, size 백분율은 비디오의 너비에 상대적이며, 그렇지 않으면 비디오의 높이에 상대적이다.

text alignment

쓰기 방향 차원에서, cue box 안의 모든 텍스트 줄에 대한 정렬이며, 다음 중 하나이다:

Start alignment: 각 줄의 텍스트는 박스의 시작 쪽을 향해 개별적으로 정렬되며, 해당 줄의 시작 쪽은 unicode-bidi 속성의 plaintext 값에 대한 CSS 규칙을 사용하여 결정된다. [CSS-WRITING-MODES-3]
Center alignment: 텍스트는 박스의 시작 쪽과 끝 쪽 사이 가운데에 정렬된다.
End alignment: 각 줄의 텍스트는 박스의 끝 쪽을 향해 개별적으로 정렬되며, 해당 줄의 끝 쪽은 unicode-bidi 속성의 plaintext 값을 위한 CSS 규칙을 사용하여 결정된다. [CSS-WRITING-MODES-3]
Left alignment: 텍스트는 박스의 왼쪽 면(horizontal cue의 경우) 또는 위쪽 면 (그 밖의 경우)에 정렬된다.
Right alignment: 텍스트는 박스의 오른쪽 면(horizontal cue의 경우) 또는 아래쪽 면 (그 밖의 경우)에 정렬된다.

기본적으로 text alignment는 center로 설정된다.

cue의 각 줄의 기본 방향(Unicode 양방향 알고리즘이 줄 안의 문자를 어떤 순서로 표시할지 결정하는 데 사용됨)은 CSS plaintext 알고리즘을 사용하여, 각 줄에서 첫 번째 강한 방향성 문자를 찾아 결정된다. 드물게 줄의 첫 번째 강한 문자가 그 줄에 대해 잘못된 기본 방향을 만들 수 있는 경우, 작성자는 줄의 시작 부분에 U+200E LEFT-TO-RIGHT MARK 또는 U+200F RIGHT-TO-LEFT MARK 문자를 사용하여 이를 교정할 수 있다. [BIDI]

이 예제에서 두 번째 cue는 오른쪽에서 왼쪽의 기본 방향을 가지며, ".I think ,يلاع"로 렌더링된다. (아래의 텍스트는 모든 문자를 왼쪽에서 오른쪽으로 표시한다는 점에 유의한다. 텍스트 편집기는 반드시 같은 렌더링을 하지 않을 수도 있다.)

WEBVTT

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

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

그 줄을 왼쪽에서 오른쪽의 기본 방향으로 바꾸려면, 줄을 U+200E LEFT-TO-RIGHT MARK 문자로 시작한다(이는 "&lrm;"로 이스케이프할 수 있다).

한 줄 안의 일부 삽입 텍스트의 기본 방향이 그 줄의 주변 텍스트와 달라야 하는 경우, 이는 짝을 이루는 Unicode bidi formatting code 문자를 사용하여 달성할 수 있다.

이 예제에서 bidi formatting code 문자가 사용되지 않았다고 가정하면, cue 텍스트는 "I’ve read the book 3 דנליונ times!"로 렌더링된다(즉, "3"이 책 제목의 잘못된 쪽에 있음). 이는 Unicode Bidirection Algorithm의 효과 때문이다. (다시 말하지만, 아래 텍스트는 모든 문자를 왼쪽에서 오른쪽으로 표시한다.)

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!"가 된다. (이 문자들은 각각 "⁨" 및 "⁩"로 이스케이프할 수 있다.)

기본 text alignment는 cue 텍스트의 기본 방향과 관계없이 center alignment이다. 각 줄의 text alignment를 그 줄의 기본 방향과 일치시키려면 (예: 영어의 경우 left, 히브리어의 경우 right), start alignment를 사용하거나, 반대 정렬에는 end alignment를 사용한다.

이 예제에서는 start alignment가 사용된다. 첫 번째 줄은 기본 방향이 왼쪽에서 오른쪽이므로 왼쪽 정렬되고, 두 번째 줄은 기본 방향이 오른쪽에서 왼쪽이므로 오른쪽 정렬된다.

WEBVTT

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

이는 다음과 같이 렌더링된다:

Hello!
                                            !םולש

left alignment와 right alignment는 줄의 기본 방향과 관계없이 cue 텍스트를 왼쪽 정렬 또는 오른쪽 정렬하는 데 사용할 수 있다.

region

cue가 속하는 선택적 WebVTT region.

기본적으로 region은 null로 설정된다.

WebVTT cue의 연관된 text track 렌더링을 업데이트하기 위한 규칙은 WebVTT text track의 표시를 업데이트하기 위한 규칙이다.

WebVTT cue의 active flag가 설정되어 있을 때, 그 writing direction, snap-to-lines flag, line, line alignment, position, position alignment, size, text alignment, region, 또는 text 값이 변경되면, 사용자 에이전트는 text track cue display state를 비우고, 그런 다음 즉시 text track의 WebVTT text track의 표시를 업데이트하기 위한 규칙을 실행해야 한다.

3.4. WebVTT 캡션 또는 자막 region

WebVTT region은 비디오 viewport의 하위 부분을 나타내며, WebVTT 캡션 또는 자막 cue를 위한 제한된 렌더링 영역을 제공한다.

region은 캡션 또는 자막 cue를 그룹화하여 cue를 함께 렌더링할 수 있는 수단을 제공하며, 이는 위로 스크롤할 때 특히 중요하다.

각 WebVTT region은 다음으로 구성된다:

식별자

U+0020 SPACE 또는 U+0009 CHARACTER TABULATION 문자가 아닌 0개 이상의 문자로 된 임의의 문자열. 이 문자열은 부분 문자열 "-->"(U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN)을 포함해서는 안 된다. 기본값은 빈 문자열이다.

width

포함된 cue의 각 줄 텍스트가 렌더링될 박스의 너비를 나타내는 숫자이며, 비디오 너비의 백분율로 해석된다. 기본값은 100이다.

lines 값

포함된 cue의 각 줄 텍스트가 렌더링될 박스의 줄 수를 나타내는 숫자이다. 기본값은 3이다.

WebVTT region은 고정된 렌더링 영역을 정의하므로, region이 허용하는 것보다 많은 줄을 가진 cue는 잘린다. 스크롤 region에서는 위쪽에서 잘림이 발생하고, 스크롤하지 않는 region에서는 아래쪽에서 발생한다.

region anchor point

비디오 viewport에 고정되며, 예를 들어 글꼴 크기 변경 때문에 region 자체가 변하더라도 위치가 변하지 않는, region 안의 x 및 y 좌표를 나타내는 두 숫자이다. 기본값은 (0,100), 즉 region의 왼쪽 아래 모서리이다.

region viewport anchor point

region anchor point가 고정되는 비디오 viewport 안의 x 및 y 좌표를 나타내는 두 숫자이다. 기본값은 (0,100), 즉 비디오 viewport의 왼쪽 아래 모서리이다.

scroll 값

다음 중 하나이다:

None: region 안의 cue가 스크롤되지 않고, 처음 그려진 위치에 고정되어 있어야 함을 나타낸다.
Up: region 안의 cue가 region의 아래쪽에 추가되고, 새 cue의 모든 줄이 region 안에 보일 때까지 region 안에 이미 표시된 cue를 위로 밀어 올림을 나타낸다.

다음 다이어그램은 region을 비디오 viewport에 고정하는 방식이 어떻게 동작하는지 보여준다. 검은색 십자가는 anchor이고, 주황색은 region 안에서 anchor의 오프셋을, 초록색은 비디오 viewport 안에서 anchor의 오프셋을 설명한다. 이를 메모지에 핀을 꽂아 판에 고정하는 것으로 생각하면 된다:

WebVTT region의 시각적 설명

이미지 설명: 비디오 viewport 안에 WebVTT region이 있다. region 안에는 검은색 십자가로 표시된 anchor point가 있다. 비디오 viewport의 가장자리에서 anchor까지의 수직 및 수평 거리는 초록색 화살표로 표시되며, region viewport anchor X 및 Y 오프셋을 나타낸다. region의 가장자리에서 anchor까지의 수직 및 수평 거리는 주황색 화살표로 표시되며, region anchor X 및 Y 오프셋을 나타낸다. region의 크기는 가로축의 region width와 세로축의 region lines로 표현된다.

파싱을 위해, 다음도 필요하다:

text track region 목록: 0개 이상의 WebVTT region으로 된 목록.

3.5. WebVTT chapter cue

WebVTT chapter cue는 WebVTT cue이며, 그 cue text는 탐색 대상으로서 chapter를 설명하는 chapter title로 해석된다.

Chapter cue는 오디오 또는 비디오 파일의 타임라인을 연속적이고 겹치지 않는 구간으로 마크업한다. 또한 이러한 구간을 하위 chapter로 더 세분화하여 탐색 트리를 구성할 수 있다.

3.6. WebVTT metadata cue

WebVTT metadata cue는 WebVTT cue이며, 그 cue text는 시간상 정렬된 metadata로 해석된다.

4. 구문

4.1. WebVTT 파일 구조

WebVTT file은 UTF-8로 인코딩되고 WebVTT file body로 구성되며, MIME type text/vtt로 표시되어야 한다. [RFC3629]

WebVTT file body는 다음 구성 요소들로, 다음 순서로 구성된다:

선택적 U+FEFF BYTE ORDER MARK (BOM) 문자.
문자열 "WEBVTT".
선택적으로, U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION (tab) 문자 중 하나와, 그 뒤에 오는 U+000A LINE FEED (LF) 또는 U+000D CARRIAGE RETURN (CR) 문자가 아닌 임의 개수의 문자.
file magic이 있는 줄을 종료하고 이를 body의 나머지와 분리하기 위한 두 개 이상의 WebVTT line terminator.
서로 하나 이상의 WebVTT line terminator로 분리된, 0개 이상의 WebVTT region definition block, WebVTT style block 및 WebVTT comment block.
0개 이상의 WebVTT line terminator.
서로 하나 이상의 WebVTT line terminator로 분리된, 0개 이상의 WebVTT cue block 및 WebVTT comment block.
0개 이상의 WebVTT line terminator.

WebVTT line terminator는 다음 중 하나로 구성된다:

U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) 문자 쌍.
단일 U+000A LINE FEED (LF) 문자.
단일 U+000D CARRIAGE RETURN (CR) 문자.

WebVTT region definition block은 주어진 순서대로 다음 구성 요소들로 구성된다:

문자열 "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).
0개 이상의 U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION (tab) 문자.
WebVTT line terminator.
WebVTT region settings list.
WebVTT line terminator.

WebVTT style block은 주어진 순서대로 다음 구성 요소들로 구성된다:

문자열 "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).
0개 이상의 U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION (tab) 문자.
WebVTT line terminator.
0개 이상의 문자 시퀀스. 각 문자는 U+000A LINE FEED (LF) 문자 및 U+000D CARRIAGE RETURN (CR) 문자가 아니며, 각각은 선택적으로 다음 문자와 WebVTT line terminator로 분리될 수 있다. 단, 전체 결과 문자열은 부분 문자열 "-->"(U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN)을 포함해서는 안 된다. 이 문자열은 CSS style sheet를 나타내며, 관련 CSS 명세에 주어진 요구 사항이 적용된다. [CSS22]
WebVTT line terminator.

WebVTT cue block은 주어진 순서대로 다음 구성 요소들로 구성된다:

선택적으로, WebVTT cue identifier와 그 뒤의 WebVTT line terminator.
WebVTT cue timings.
선택적으로, 하나 이상의 U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION (tab) 문자와 그 뒤의 WebVTT cue settings list.
WebVTT line terminator.
cue payload: WebVTT caption or subtitle cue text, WebVTT chapter title text, 또는 WebVTT metadata text 중 하나이다. 단, 부분 문자열 "-->"(U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN)을 포함해서는 안 된다.
WebVTT line terminator.

WebVTT cue block은 WebVTT file 안의 시간상 정렬된 텍스트 또는 데이터 한 조각, 예를 들어 하나의 자막에 대응한다. cue payload는 cue와 연결된 텍스트 또는 데이터이다.

WebVTT cue identifier는 부분 문자열 "-->"(U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN)을 포함하지 않고, U+000A LINE FEED (LF) 문자 또는 U+000D CARRIAGE RETURN (CR) 문자를 포함하지 않는, 하나 이상의 문자로 된 임의의 시퀀스이다.

WebVTT cue identifier는 WebVTT file의 모든 WebVTT cue의 모든 WebVTT cue identifier 중에서 고유해야 한다.

WebVTT cue identifier는 예를 들어 script 또는 CSS에서 특정 cue를 참조하는 데 사용할 수 있다.

WebVTT cue block의 WebVTT cue timings 부분은 주어진 순서대로 다음 구성 요소들로 구성된다:

cue의 시작 시간 오프셋을 나타내는 WebVTT timestamp. 이 WebVTT timestamp가 나타내는 시간은 파일 안의 모든 이전 cue의 시작 시간 오프셋보다 크거나 같아야 한다.
하나 이상의 U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION (tab) 문자.
문자열 "-->" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN).
하나 이상의 U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION (tab) 문자.
cue의 종료 시간 오프셋을 나타내는 WebVTT timestamp. 이 WebVTT timestamp가 나타내는 시간은 cue의 시작 시간 오프셋보다 커야 한다.

WebVTT cue timings는 WebVTT cue block의 시작 및 종료 오프셋을 제공한다. 서로 다른 cue는 겹칠 수 있다. cue는 항상 시작 시간순으로 나열된다.

WebVTT timestamp는 주어진 순서대로 다음 구성 요소들로 구성된다:

선택적으로(hours가 0이 아닌 경우 필수):
1. hours를 십진 정수로 나타내는 두 개 이상의 ASCII digit.
2. U+003A COLON 문자 (:)
0 ≤ minutes ≤ 59 범위의 십진 정수로 minutes를 나타내는 두 개의 ASCII digit.
U+003A COLON 문자 (:)
0 ≤ seconds ≤ 59 범위의 십진 정수로 seconds를 나타내는 두 개의 ASCII digit.
U+002E FULL STOP 문자 (.).
seconds-frac인 천분의 일 초를 십진 정수로 나타내는 세 개의 ASCII digit.

WebVTT timestamp는 항상 WebVTT file이 동기화될 media data의 current playback position에 상대적으로 해석된다.

WebVTT cue settings list는 임의의 순서로 된 0개 이상의 WebVTT cue setting 시퀀스로 구성되며, 서로 하나 이상의 U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION (tab) 문자로 분리된다. 각 setting은 주어진 순서대로 다음 구성 요소들로 구성된다:

WebVTT cue setting name.
U+003A COLON (colon) 문자.
WebVTT cue setting value.

WebVTT cue setting name 및 WebVTT cue setting value는 각각 U+000A LINE FEED (LF) 문자 및 - U+000D CARRIAGE RETURN (CR) 문자가 아닌 하나 이상의 문자로 된 임의의 시퀀스로 구성된다. 단, 전체 결과 문자열은 부분 문자열 "-->"(U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN)을 포함해서는 안 된다.

WebVTT percentage는 다음 구성 요소들로 구성된다:

하나 이상의 ASCII digit.
선택적으로:
1. U+002E DOT 문자 (.).
2. 하나 이상의 ASCII digit.
U+0025 PERCENT SIGN 문자 (%).

숫자로 해석될 때, WebVTT percentage는 0..100 범위에 있어야 한다.

WebVTT comment block은 주어진 순서대로 다음 구성 요소들로 구성된다:

문자열 "NOTE".
선택적으로, 주어진 순서대로 다음 구성 요소들:
1. 다음 중 하나:
  - U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION (tab) 문자.
  - WebVTT line terminator.
2. 0개 이상의 문자 시퀀스. 각 문자는 U+000A LINE FEED (LF) 문자 및 U+000D CARRIAGE RETURN (CR) 문자가 아니며, 각각은 선택적으로 다음 문자와 WebVTT line terminator로 분리될 수 있다. 단, 전체 결과 문자열은 부분 문자열 "-->"(U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN)을 포함해서는 안 된다.
WebVTT line terminator.

WebVTT comment block은 파서에 의해 무시된다.

4.2. WebVTT cue payload의 유형

4.2.1. WebVTT metadata text

WebVTT metadata text는 U+000A LINE FEED (LF) 문자 및 U+000D CARRIAGE RETURN (CR) 문자가 아닌 0개 이상의 문자 시퀀스로 구성되며, 각 문자는 선택적으로 다음 문자와 WebVTT line terminator로 분리될 수 있다. (다시 말해, 연속된 두 개의 WebVTT line terminator를 갖지 않고, WebVTT line terminator로 시작하거나 끝나지 않는 임의의 텍스트이다.)

WebVTT metadata text cue는 scripted application에서만 유용하다(예: HTML text track에서 metadata text track kind를 사용하는 경우).

4.2.2. WebVTT caption or subtitle cue text

WebVTT caption or subtitle cue text는 cue payload이며, 임의의 순서로 된 0개 이상의 WebVTT caption or subtitle cue component로 구성되고, 각각은 선택적으로 다음 것과 WebVTT line terminator로 분리된다.

WebVTT caption or subtitle cue component는 다음과 같다:

WebVTT cue class span.
WebVTT cue italics span.
WebVTT cue bold span.
WebVTT cue underline span.
WebVTT cue ruby span.
WebVTT cue voice span.
WebVTT cue language span.
WebVTT cue timestamp.
cue의 텍스트를 나타내는 WebVTT cue text span.
HTML에서 정의된 대로 cue의 텍스트 안에서 하나 또는 두 개의 Unicode code point를 나타내는 HTML character reference. [HTML]

HTML character reference를 제외한 모든 WebVTT caption or subtitle cue component는 period ('.') 표기를 사용하여 cue component start tag에서 cue component class name을 분리함으로써 하나 이상의 cue component class name을 붙일 수 있다. class name은 "period" (.) 바로 뒤에 와야 한다.

WebVTT cue internal text는 선택적 WebVTT line terminator와, 그 뒤의 임의의 순서로 된 0개 이상의 WebVTT caption or subtitle cue component로 구성되며, 각각은 선택적으로 WebVTT line terminator가 뒤따른다.

WebVTT cue class span은 annotation을 허용하지 않는 WebVTT cue span start tag "c", cue 텍스트를 나타내는 WebVTT cue internal text, 그리고 WebVTT cue span end tag "c"로 구성된다.

WebVTT cue italics span은 annotation을 허용하지 않는 WebVTT cue span start tag "i", 기울임꼴 텍스트를 나타내는 WebVTT cue internal text, 그리고 WebVTT cue span end tag "i"로 구성된다.

WebVTT cue bold span은 annotation을 허용하지 않는 WebVTT cue span start tag "b", 굵게 표시된 텍스트를 나타내는 WebVTT cue internal text, 그리고 WebVTT cue span end tag "b"로 구성된다.

WebVTT cue underline span은 annotation을 허용하지 않는 WebVTT cue span start tag "u", 밑줄 친 텍스트를 나타내는 WebVTT cue internal text, 그리고 WebVTT cue span end tag "u"로 구성된다.

WebVTT cue ruby span은 주어진 순서대로 다음 구성 요소들로 구성된다:

annotation을 허용하지 않는 WebVTT cue span start tag "ruby".
주어진 순서대로 된 다음 구성 요소 그룹의 하나 이상의 출현:
1. ruby base를 나타내는 WebVTT cue internal text.
2. annotation을 허용하지 않는 WebVTT cue span start tag "rt".
3. WebVTT cue ruby text span: ruby annotation의 ruby text component를 나타내는 WebVTT cue internal text.
4. WebVTT cue span end tag "rt". 이것이 WebVTT cue ruby span 안에서 이 구성 요소 그룹의 마지막 출현이라면, 이 마지막 end tag 문자열은 생략될 수 있다.
마지막 end tag 문자열이 생략되지 않은 경우: 선택적으로, WebVTT line terminator.
마지막 end tag 문자열이 생략되지 않은 경우: 0개 이상의 U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION (tab) 문자. 각각은 선택적으로 WebVTT line terminator가 뒤따를 수 있다.
WebVTT cue span end tag "ruby".

cue positioning은 ruby text가 아니라 baseline text의 위치를 제어한다.

WebVTT의 ruby는 HTML의 ruby 기능의 하위 집합이다. 이 기능들이 HTML 및 CSS에서 더 성숙해지면, 향후 ruby base text용 object 및 complex ruby도 지원하도록 확장될 수 있다. [HTML] [CSS3-RUBY]

WebVTT cue voice span은 주어진 순서대로 다음 구성 요소들로 구성된다:

annotation을 요구하는 WebVTT cue span start tag "v"; 이 annotation은 voice의 이름을 나타낸다.
WebVTT cue internal text.
WebVTT cue span end tag "v". 이 WebVTT cue voice span이 그 WebVTT caption or subtitle cue text 시퀀스의 유일한 component라면, 간결함을 위해 end tag를 생략할 수 있다.

WebVTT cue language span은 주어진 순서대로 다음 구성 요소들로 구성된다:

annotation을 요구하는 WebVTT cue span start tag "lang"; 이 annotation은 다음 component의 언어를 나타내며, 유효한 BCP 47 language tag여야 한다. [BCP47]
WebVTT cue internal text.
WebVTT cue span end tag "lang".

유효한 BCP 47 language tag에 관한 위 요구 사항은 작성 요구 사항이므로, 적합성 검사기는 language tag의 유효성을 검사하지만, 다른 사용자 에이전트는 그렇게 하지 않는다.

WebVTT cue span start tag는 tag name을 가지며 annotation을 요구하거나 허용하지 않는다. 이는 주어진 순서대로 다음 구성 요소들로 구성된다:

U+003C LESS-THAN SIGN 문자 (<).
tag name.
다음 시퀀스의 0회 이상의 출현:
1. U+002E FULL STOP 문자 (.)
2. U+0009 CHARACTER TABULATION (tab) 문자, U+000A LINE FEED (LF) 문자, U+000D CARRIAGE RETURN (CR) 문자, U+0020 SPACE 문자, U+0026 AMPERSAND 문자 (&), U+003C LESS-THAN SIGN 문자 (<), U+003E GREATER-THAN SIGN 문자 (>), 및 U+002E FULL STOP 문자 (.)가 아닌 하나 이상의 문자. 이는 cue span의 의미를 설명하는 class를 나타낸다.
start tag가 annotation을 요구하는 경우: U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION (tab) 문자와, 그 뒤의 다음 구성 요소 중 하나 이상. 이들의 표현을 연결한 값은 U+0020 SPACE 및 U+0009 CHARACTER TABULATION (tab) 문자가 아닌 문자를 적어도 하나 포함해야 한다:
- annotation의 텍스트를 나타내는 WebVTT cue span start tag annotation text.
- HTML에서 정의된 대로 annotation의 텍스트 안에서 하나 또는 두 개의 Unicode code point를 나타내는 HTML character reference. [HTML]
U+003E GREATER-THAN SIGN 문자 (>).

WebVTT cue span end tag는 tag name을 가지며, 주어진 순서대로 다음 구성 요소들로 구성된다:

U+003C LESS-THAN SIGN 문자 (<).
U+002F SOLIDUS 문자 (/).
tag name.
U+003E GREATER-THAN SIGN 문자 (>).

WebVTT cue timestamp는 U+003C LESS-THAN SIGN 문자 (<)와, 그 뒤의 cue 안의 주어진 지점이 활성화되는 시간을 나타내는 WebVTT timestamp, 그리고 그 뒤의 U+003E GREATER-THAN SIGN 문자 (>)로 구성된다. WebVTT timestamp가 나타내는 시간은 cue 안의 이전 모든 WebVTT cue timestamp가 나타내는 시간보다 커야 하며, 또한 cue의 시작 시간 오프셋보다 크고 cue의 종료 시간 오프셋보다 작아야 한다.

WebVTT cue text span는 U+000A LINE FEED (LF) 문자, U+000D CARRIAGE RETURN (CR) 문자, U+0026 AMPERSAND 문자 (&), 및 U+003C LESS-THAN SIGN 문자 (<)가 아닌 하나 이상의 문자로 구성된다.

WebVTT cue span start tag annotation text는 U+000A LINE FEED (LF) 문자, U+000D CARRIAGE RETURN (CR) 문자, U+0026 AMPERSAND 문자 (&), 및 U+003E GREATER-THAN SIGN 문자 (>)가 아닌 하나 이상의 문자로 구성된다.

4.2.3. WebVTT chapter title text

WebVTT chapter title text는 cue text이며, 다음 구성 요소 중 0개 이상을 사용하고, 각각은 선택적으로 다음 것과 WebVTT line terminator로 분리된다:

4.3. WebVTT region 설정

WebVTT cue settings list는 WebVTT region에 대한 참조를 포함할 수 있다. region을 정의하려면, WebVTT region definition block을 지정한다.

WebVTT region settings list는 다음 구성 요소 중 0개 이상으로, 임의의 순서로 구성되며, 각 구성 요소는 하나 이상의 U+0020 SPACE 문자, U+0009 CHARACTER TABULATION (tab) 문자, 또는 WebVTT line terminator로 서로 분리된다. 단, 문자열은 연속된 두 개의 WebVTT line terminator를 포함해서는 안 된다. 각 구성 요소는 WebVTT region settings list 문자열마다 한 번을 초과하여 포함되어서는 안 된다.

WebVTT region identifier setting.
WebVTT region width setting.
WebVTT region lines setting.
WebVTT region anchor setting.
WebVTT region viewport anchor setting.
WebVTT region scroll setting.

WebVTT region settings list는 region의 크기, 위치 지정 및 고정에 관한 구성 옵션을 제공한다. 예를 들어, region 안의 cue 그룹을 region의 중앙과 비디오 viewport의 중앙에 고정할 수 있게 한다. 이 예제에서 글꼴 크기가 커지면, region은 중앙으로부터 모든 방향으로 균일하게 커진다.

WebVTT region identifier setting은 주어진 순서대로 다음 구성 요소들로 구성된다:

문자열 "id".
U+003A COLON 문자 (:).
ASCII whitespace가 아닌 하나 이상의 문자로 된 임의의 문자열. 이 문자열은 부분 문자열 "-->"(U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN)을 포함해서는 안 된다.

WebVTT region identifier setting은 WebVTT file의 모든 WebVTT region에 있는 모든 WebVTT region identifier setting 중에서 고유해야 한다.

WebVTT region identifier setting은 각 WebVTT cue settings list에 존재해야 한다. 식별자가 없으면 구문에서 WebVTT cue를 WebVTT region과 연결할 수 없다.

WebVTT region identifier setting은 region에 이름을 부여하여, 그 region에 속한 cue가 이를 참조할 수 있게 한다.

WebVTT region width setting은 주어진 순서대로 다음 구성 요소들로 구성된다:

문자열 "width".
U+003A COLON 문자 (:).
WebVTT percentage.

WebVTT region width setting은 cue가 렌더링되고 정렬 계산의 기준이 되는 region에 대해, 비디오 너비의 백분율로 된 고정 너비를 제공한다.

WebVTT region lines setting은 주어진 순서대로 다음 구성 요소들로 구성된다:

문자열 "lines".
U+003A COLON 문자 (:).
하나 이상의 ASCII digit.

WebVTT region lines setting은 cue가 렌더링되는 region에 대해 줄 수로 된 고정 높이를 제공한다. 따라서 이것이 scroll region이면 roll-up region의 높이를 정의한다.

WebVTT region anchor setting은 주어진 순서대로 다음 구성 요소들로 구성된다:

문자열 "regionanchor".
U+003A COLON 문자 (:).
WebVTT percentage.
U+002C COMMA 문자 (,).
WebVTT percentage.

WebVTT region anchor setting은 region box 안에서 위치가 고정되는 지점을 지정하는 두 백분율의 튜플을 제공한다. 첫 번째 백분율은 region box의 왼쪽 위 모서리에서 x 차원을 측정하고, 두 번째 백분율은 y 차원을 측정한다. WebVTT region anchor setting이 주어지지 않으면, anchor의 기본값은 0%, 100%(즉, 왼쪽 아래 모서리)이다.

WebVTT region viewport anchor setting은 주어진 순서대로 다음 구성 요소들로 구성된다:

문자열 "viewportanchor".
U+003A COLON 문자 (:).
WebVTT percentage.
U+002C COMMA 문자 (,).
WebVTT percentage.

WebVTT region viewport anchor setting은 region anchor point가 고정되는 비디오 viewport 안의 지점을 지정하는 두 백분율의 튜플을 제공한다. 첫 번째 백분율은 비디오 viewport box의 왼쪽 위 모서리에서 x 차원을 측정하고, 두 번째 백분율은 y 차원을 측정한다. region viewport anchor가 주어지지 않으면, 기본값은 0%, 100%(즉, 왼쪽 아래 모서리)이다.

브라우저의 경우, region은 비디오 viewport에 상대적인 absolute positioned CSS box에 매핑된다. 즉, 비디오 viewport를 나타내는 relative positioned box가 있고, 그에 상대적으로 region들이 absolute positioned된다. Overflow는 hidden이다.

WebVTT region scroll setting은 주어진 순서대로 다음 구성 요소들로 구성된다:

문자열 "scroll".
U+003A COLON 문자 (:).
문자열 "up".

WebVTT region scroll setting은 region 안에 렌더링된 cue가 처음 렌더링된 위치에서 벗어나 roll up, 즉 비디오 viewport의 위쪽으로 이동할 수 있는지를 지정한다. scroll setting이 생략되면, cue는 렌더링된 위치에서 이동하지 않는다.

cue는 기존 cue 줄 아래에 한 줄씩 region에 추가된다. 기존에 렌더링된 cue 줄이 제거되고, 그 줄이 이미 렌더링된 다른 cue 줄 위에 있었다면, 그 cue 줄은 해당 공간으로 이동하여 주어진 방향으로 스크롤된다. 새 cue 줄을 region에 추가할 공간이 충분하지 않으면, 가장 위쪽 cue 줄이 보이는 region 밖으로 밀려난다(따라서 overflow:hidden 안으로 이동하면서 서서히 보이지 않게 된다). 이것은 결국 새 cue 줄을 위한 공간을 만들고, 그 줄이 추가될 수 있게 한다.

scroll 방향이 없으면, cue 줄은 region의 아래쪽 줄에 가장 가까운 빈 줄에 추가된다. 사용 가능한 빈 줄이 없으면, 가장 오래된 줄이 교체된다.

4.4. WebVTT cue 설정

WebVTT cue setting은 WebVTT cue settings list의 일부이며, cue box와 그 안의 cue 텍스트의 위치 및 정렬에 관한 구성 옵션을 제공한다.

예를 들어, WebVTT cue setting 집합은 cue box를 왼쪽에 정렬하거나 오른쪽 위에 위치시키면서, 그 안의 cue 텍스트를 가운데 정렬할 수 있게 할 수 있다.

WebVTT cue settings list에 나타날 수 있는 현재 사용 가능한 WebVTT cue setting은 다음과 같다:

WebVTT vertical text cue setting.
WebVTT line cue setting.
WebVTT position cue setting.
WebVTT size cue setting.
WebVTT alignment cue setting.
WebVTT region cue setting.

이러한 setting 각각은 WebVTT cue settings list마다 한 번을 초과하여 포함되어서는 안 된다.

WebVTT vertical text cue setting은 WebVTT cue setting이며, 주어진 순서대로 다음 구성 요소들로 구성된다:

WebVTT cue setting name으로서 문자열 "vertical".
U+003A COLON 문자 (:).
WebVTT cue setting value로서 다음 문자열 중 하나: "rl", "lr".

WebVTT vertical text cue setting은 cue가 horizontal text layout 대신 vertical text layout을 사용하도록 구성한다. 예를 들어 일본어에서는 vertical text layout이 사용되기도 한다. 기본값은 horizontal layout이다.

WebVTT line cue setting은 주어진 순서대로 다음 구성 요소들로 구성된다:

WebVTT cue setting name으로서 문자열 "line".
U+003A COLON 문자 (:).
WebVTT cue setting value로서:
1. offset 값, 다음 중 하나:
  비디오 viewport에 상대적인 특정 offset을 나타내는 경우
  
  WebVTT percentage.
  
  또는 line number를 나타내는 경우
  1. 선택적 U+002D HYPHEN-MINUS 문자 (-).
  2. 하나 이상의 ASCII digit.
2. 다음 구성 요소들로 구성된 선택적 alignment 값:
  1. U+002C COMMA 문자 (,).
  2. 다음 문자열 중 하나: "start", "center", "end"

WebVTT line cue setting은 writing direction에 직교하는 방향에서, 비디오 viewport의 가장자리로부터 cue box의 offset을 구성한다. horizontal cue의 경우 이는 비디오 viewport 위쪽으로부터의 vertical offset이며, vertical cue의 경우 horizontal offset이다. offset은 WebVTT cue line alignment 값에 따라 cue box의 start, center, 또는 end에 대한 것이며, 기본값은 start이다. offset은 관련 writing-mode 의존 비디오 viewport 차원의 백분율 또는 line number로 주어질 수 있다. line number는 cue의 첫 번째 줄 크기를 기준으로 한다. 양수 line number는 비디오 viewport의 시작부터 계산하고(첫 번째 줄은 0으로 번호가 매겨짐), 음수 line number는 비디오 viewport의 끝부터 계산한다(마지막 줄은 −1로 번호가 매겨짐).

WebVTT position cue setting은 주어진 순서대로 다음 구성 요소들로 구성된다:

WebVTT cue setting name으로서 문자열 "position".
U+003A COLON 문자 (:).
WebVTT cue setting value로서:
1. 다음으로 구성된 position 값: WebVTT percentage.
2. 다음으로 구성된 선택적 alignment 값:
  1. U+002C COMMA 문자 (,).
  2. 다음 문자열 중 하나: "line-left", "center", "line-right"

WebVTT position cue setting은 WebVTT line cue setting에 직교하는 방향에서 cue box의 indent position을 구성한다. horizontal cue의 경우 이는 horizontal position이다. cue position은 비디오 viewport의 백분율로 주어진다. 위치 지정은 cue box의 line-left, center, 또는 line-right에 대한 것이며, cue의 computed position alignment에 따라 달라진다. 이는 WebVTT position cue setting에 의해 재정의된다.

WebVTT size cue setting은 주어진 순서대로 다음 구성 요소들로 구성된다:

WebVTT cue setting name으로서 문자열 "size".
U+003A COLON 문자 (:).
WebVTT cue setting value로서: WebVTT percentage.

WebVTT size cue setting은 WebVTT position cue setting과 같은 방향에서 cue box의 크기를 구성한다. horizontal cue의 경우 이는 cue box의 너비이다. 이는 비디오 viewport 너비의 백분율로 주어진다.

WebVTT alignment cue setting은 주어진 순서대로 다음 구성 요소들로 구성된다:

WebVTT cue setting name으로서 문자열 "align".
U+003A COLON 문자 (:).
WebVTT cue setting value로서 다음 문자열 중 하나: "start", "center", "end", "left", "right"

WebVTT alignment cue setting은 cue 안의 텍스트 정렬을 구성한다. "start"와 "end" 키워드는 cue 텍스트 줄의 기본 방향에 상대적이다. 왼쪽에서 오른쪽으로 쓰는 영어 텍스트의 경우 "start"는 왼쪽 정렬을 의미한다.

WebVTT region cue setting은 주어진 순서대로 다음 구성 요소들로 구성된다:

WebVTT cue setting name으로서 문자열 "region".
U+003A COLON 문자 (:).
WebVTT cue setting value로서: WebVTT region identifier.

WebVTT region cue setting은 cue가 "vertical", "line" 또는 "size" cue setting을 갖지 않는 한, region의 identifier를 참조하여 cue가 region의 일부가 되도록 구성한다. cue가 region의 일부이면, "position" 및 "align"에 대한 cue setting은 region box에 상대적으로 cue 안의 line box에 적용되며, cue box의 너비와 높이는 viewport 치수가 아니라 region 치수에 상대적으로 계산된다.

4.5. cue 시퀀스의 속성

4.5.1. 중첩 cue만 사용하는 WebVTT file

모든 cue가 다음 규칙을 따르는 WebVTT file은 중첩 cue만 사용하는 WebVTT file이라고 한다:

시작 및 종료 시간 오프셋이 각각 (x1, y1) 및 (x2, y2)인 임의의 두 cue cue1과 cue2가 주어졌을 때,

cue1이 cue2 안에 완전히 있거나, 즉 x1 >= x2 및 y1 <= y2
또는 cue1이 cue2를 완전히 포함한다. 즉 x1 <= x2 및 y1 >= 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 file의 cue를 트리 구조로 표현할 수 있다는 점에 주목한다:

WebVTT file
- Introduction
  - Topics
  - Presenters
- Scrolling Effects
  - Achim’s Demo
  - Timeline Panel

file에 이러한 방식으로 표현할 수 없는 cue가 있으면, 그 cue들은 중첩 cue만 사용하는 WebVTT file의 정의와 일치하지 않는다. 예를 들어:

WEBVTT

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

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

이 90초 예제에서는 두 cue가 부분적으로 겹치며, 첫 번째 cue가 두 번째 cue보다 먼저 끝나고 두 번째 cue가 첫 번째 cue가 끝나기 전에 시작한다. 따라서 이는 중첩 cue만 사용하는 WebVTT file이 아니다.

4.6. WebVTT file의 유형

WebVTT file의 구문 정의는 다양한 cue 조합을 가진 매우 다양한 WebVTT file의 작성을 허용한다. 그러나 일반적으로 작성되는 WebVTT file 유형은 작은 하위 집합뿐이다.

적합성 검사기는 WebVTT file을 검증할 때, 이러한 유형을 검증하기 위해 구문 검사를 제한하는 옵션을 제공할 수 있다.

4.6.1. metadata content를 사용하는 WebVTT file

모든 cue가 WebVTT metadata text인 cue payload를 가지는 WebVTT file은 metadata content를 사용하는 WebVTT file이라고 한다.

4.6.2. chapter title text를 사용하는 WebVTT file

chapter title text를 사용하는 WebVTT file은 중첩 cue만 사용하는 WebVTT file이며, 그 모든 cue가 WebVTT chapter title text인 cue payload를 가진다.

4.6.3. caption 또는 subtitle cue text를 사용하는 WebVTT file

모든 cue가 WebVTT caption 또는 subtitle cue text인 cue payload를 가지는 WebVTT file은 caption 또는 subtitle cue text를 사용하는 WebVTT file이라고 한다.

5. WebVTT Caption 또는 Subtitle Cue Component의 기본 클래스

많은 captioning 형식에는 제한된 텍스트 색상 및 텍스트 배경색 집합을 지정하는 간단한 방법이 있다. 따라서 WebVTT 명세는 WebVTT caption 또는 subtitle cue component에 대해, 작성자가 색이 있는 텍스트와 텍스트 배경을 표준 방식으로 마크업하는 데 사용할 수 있는 기본 cue component class name 집합을 제공한다.

CSS style sheet를 지원하는 사용자 에이전트는 User Agent stylesheet를 추가하여 이 절을 구현할 수 있다.

5.1. 기본 텍스트 색상

아래 표의 행의 첫 번째 셀에 있는 것과 일치하는 하나 이상의 class name을 가진 WebVTT caption 또는 subtitle cue component는 자신의 color 속성을 presentational hint로서 그 행의 두 번째 셀에 있는 값으로 설정해야 한다:

class name	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)

captioning 배경지식이 있다면 혼동하지 말 것: lime 클래스의 색상은 전통적으로 captioning에서 green이라는 이름으로 사용되어 온 색상이다(예: 608/708).

기본 어두운 배경에서는 blue 및 black 클래스를 사용하지 말 것. 읽을 수 없는 텍스트가 되기 때문이다. 일반적으로 색상 대비에 대한 지침은 WCAG를 참조하고 [WCAG20], 텍스트 색상, 배경색, 그리고 비디오의 색상도 고려해야 한다.

5.2. 기본 텍스트 배경색

아래 표의 행의 첫 번째 셀에 있는 것과 일치하는 하나 이상의 class name을 가진 WebVTT caption 또는 subtitle cue component는 자신의 background-color 속성을 presentational hint로서 그 행의 두 번째 셀에 있는 값으로 설정해야 한다:

class name	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 클래스의 색상은 전통적으로 captioning에서 green이라는 이름으로 사용되어 온 색상이다(예: 608/708).

color 및 background class의 cascade를 결정하기 위한 목적상, 출현 순서가 class의 cascade를 결정한다.

이 예제는 class를 사용하는 방법을 보여준다.

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>

기본 class는 작성자가 변경할 수 있다. 예를 들어 ::cue(.yellow) {color:cyan}은 모든 .yellow 클래스 텍스트를 cyan으로 변경한다.

6. 파싱

WebVTT file 파싱은 captions, subtitles, chapters 또는 metadata를 포함한 모든 유형의 WebVTT file에 대해 동일하다. 대부분의 단계는 chapter 또는 metadata file에서는 건너뛴다.

6.1. WebVTT file 파싱

input byte stream, text track list of cues output, 그리고 CSS style sheet의 컬렉션 stylesheets가 주어진 WebVTT parser는 UTF-8 decode 알고리즘을 사용하여 byte stream을 디코드해야 하며, 그런 다음 결과 문자열을 아래의 WebVTT parser algorithm에 따라 파싱해야 한다. 그 결과 WebVTT cue가 output에 추가되고, CSS style sheet가 stylesheets에 추가된다. [RFC3629]

WebVTT parser, 구체적으로 그 변환 및 파싱 단계는 일반적으로 resource가 다운로드되는 동안 input byte stream이 점진적으로 업데이트되는 방식으로 비동기적으로 실행된다. 이를 incremental WebVTT parser라고 한다.

WebVTT parser는 제공된 byte stream을 파싱하기 전에 file signature를 검증한다. stream에 이 WebVTT file signature가 없으면 parser는 중단한다.

WebVTT parser algorithm은 다음과 같다:

input을 Unicode로 변환한 뒤 다음 변환이 적용된, 파싱 중인 문자열로 둔다:
- 모든 U+0000 NULL 문자를 U+FFFD REPLACEMENT CHARACTER로 대체한다.
- 각 U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) 문자 쌍을 단일 U+000A LINE FEED (LF) 문자로 대체한다.
- 남아 있는 모든 U+000D CARRIAGE RETURN 문자를 U+000A LINE FEED (LF) 문자로 대체한다.
position을 input 안의 포인터로 두며, 처음에는 문자열의 시작을 가리킨다. incremental WebVTT parser에서는, 이 알고리즘(또는 이 알고리즘이 사용하는 추가 알고리즘)이 position 포인터를 이동할 때, 사용자 에이전트는 byte stream에서 적절한 추가 문자가 input에 추가될 때까지 기다린 뒤 포인터를 이동해야 한다. 그래야 알고리즘이 input 문자열의 끝을 넘어 읽지 않는다. byte stream이 종료되고 모든 문자가 input에 추가되면, 알고리즘이 그렇게 지시하는 경우 position 포인터를 input의 끝을 지나 이동할 수 있다.
seen cue를 false로 둔다.
input이 여섯 문자보다 짧으면, 이 단계를 중단한다. file은 올바른 WebVTT file signature로 시작하지 않으므로 성공적으로 처리되지 않았다.
input이 정확히 여섯 문자 길이이지만 "WEBVTT"와 정확히 같지 않으면, 이 단계를 중단한다. file은 올바른 WebVTT file signature로 시작하지 않으므로 성공적으로 처리되지 않았다.
input이 여섯 문자보다 길지만 처음 여섯 문자가 "WEBVTT"와 정확히 같지 않거나, 일곱 번째 문자가 U+0020 SPACE 문자, U+0009 CHARACTER TABULATION (tab) 문자 또는 U+000A LINE FEED (LF) 문자가 아니면, 이 단계를 중단한다. file은 올바른 WebVTT file signature로 시작하지 않으므로 성공적으로 처리되지 않았다.
U+000A LINE FEED (LF) 문자가 아닌 code point 시퀀스를 수집한다.
position이 input의 끝을 지난 경우, 이 단계를 중단한다. file은 성공적으로 처리되었지만 유용한 데이터를 포함하지 않으므로 WebVTT cue가 output에 추가되지 않았다.
position이 가리키는 문자는 U+000A LINE FEED (LF) 문자이다. position을 input의 다음 문자로 전진시킨다.
position이 input의 끝을 지난 경우, 이 단계를 중단한다. file은 성공적으로 처리되었지만 유용한 데이터를 포함하지 않으므로 WebVTT cue가 output에 추가되지 않았다.
Header: position이 가리키는 문자가 U+000A LINE FEED (LF) 문자가 아니면, in header flag를 설정하여 WebVTT block을 수집한다. 그렇지 않으면, position을 input의 다음 문자로 전진시킨다.
U+000A LINE FEED (LF) 문자인 code point 시퀀스를 수집한다.
regions를 빈 text track list of regions로 둔다.
Block loop: position이 input의 끝을 지나지 않는 동안:
1. WebVTT block을 수집한다. 그리고 block을 반환된 값으로 둔다.
2. block이 WebVTT cue이면, block을 text track list of cues output에 추가한다.
3. 그렇지 않고, block이 CSS style sheet이면, block을 stylesheets에 추가한다.
4. 그렇지 않고, block이 WebVTT region object이면, block을 regions에 추가한다.
5. U+000A LINE FEED (LF) 문자인 code point 시퀀스를 수집한다.
End: file이 끝났다. 이 단계를 중단한다. WebVTT parser가 완료되었다. file은 성공적으로 처리되었다.

위 알고리즘에서 WebVTT block을 수집하라고 할 때, 선택적으로 in header flag가 설정되어 있으면, 사용자 에이전트는 다음 단계를 실행해야 한다:

input, position, seen cue 및 regions를 이 단계를 호출한 알고리즘에서 같은 이름을 가진 변수와 동일한 것으로 둔다.
line count를 0으로 둔다.
previous position을 position으로 둔다.
line을 빈 문자열로 둔다.
buffer를 빈 문자열로 둔다.
seen EOF를 false로 둔다.
seen arrow를 false로 둔다.
cue를 null로 둔다.
stylesheet를 null로 둔다.
region을 null로 둔다.
Loop: 다음 하위 단계를 반복해서 실행한다:
1. U+000A LINE FEED (LF) 문자가 아닌 code point 시퀀스를 수집한다. 그런 문자가 있으면 line을 그 문자들로 둔다.
2. line count를 1 증가시킨다.
3. position이 input의 끝을 지난 경우, seen EOF를 true로 둔다. 그렇지 않으면, position이 가리키는 문자는 U+000A LINE FEED (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 creation: cue를 새 WebVTT cue로 두고 다음과 같이 초기화한다:
      1. cue의 text track cue identifier를 buffer로 둔다.
      2. cue의 text track cue pause-on-exit flag를 false로 둔다.
      3. cue의 WebVTT cue region을 null로 둔다.
      4. cue의 WebVTT cue writing direction을 horizontal로 둔다.
      5. cue의 WebVTT cue snap-to-lines flag를 true로 둔다.
      6. cue의 WebVTT cue line을 auto로 둔다.
      7. cue의 WebVTT cue line alignment를 start alignment로 둔다.
      8. cue의 WebVTT cue position을 auto로 둔다.
      9. cue의 WebVTT cue position alignment를 auto로 둔다.
      10. cue의 WebVTT cue size를 100으로 둔다.
      11. cue의 WebVTT cue text alignment를 center alignment로 둔다.
      12. cue의 cue text를 빈 문자열로 둔다.
    4. cue에 대해 regions를 사용하여 line에서 WebVTT cue timings and settings를 수집한다. 실패하면 cue를 null로 둔다. 그렇지 않으면 buffer를 빈 문자열로 두고 seen cue를 true로 둔다.
    그렇지 않으면, position을 previous position으로 두고 loop를 빠져나간다.
5. 그렇지 않고, line이 빈 문자열이면 loop를 빠져나간다.
6. 그렇지 않으면, 다음 하위 단계를 실행한다:
  1. in header가 설정되어 있지 않고 line count가 2이면, 다음 하위 단계를 실행한다:
    1. seen cue가 false이고 buffer가 부분 문자열 "STYLE" (U+0053 LATIN CAPITAL LETTER S, U+0054 LATIN CAPITAL LETTER T, U+0059 LATIN CAPITAL LETTER Y, U+004C LATIN CAPITAL LETTER L, U+0045 LATIN CAPITAL LETTER E)로 시작하며, buffer 안의 남은 문자(있는 경우)가 모두 ASCII whitespace이면, 다음 하위 단계를 실행한다:
      1. stylesheet를 다음 속성을 사용해 CSS style sheet를 생성한 결과로 둔다: [CSSOM]
        
        location
        null
        parent CSS style sheet
        null
        owner node
        null
        owner CSS rule
        null
        media
        빈 문자열.
        title
        빈 문자열.
        alternate flag
        Unset.
        origin-clean flag
        Set.
      2. buffer를 빈 문자열로 둔다.
    2. 그렇지 않고, seen cue가 false이고 buffer가 부분 문자열 "REGION" (U+0052 LATIN CAPITAL LETTER R, U+0045 LATIN CAPITAL LETTER E, U+0047 LATIN CAPITAL LETTER G, U+0049 LATIN CAPITAL LETTER I, U+004F LATIN CAPITAL LETTER O, U+004E LATIN CAPITAL LETTER N)으로 시작하며, buffer 안의 남은 문자 (있는 경우)가 모두 ASCII whitespace이면, 다음 하위 단계를 실행한다:
      1. Region creation: region을 새 WebVTT region으로 둔다.
      2. region의 identifier를 빈 문자열로 둔다.
      3. region의 width를 100으로 둔다.
      4. region의 lines를 3으로 둔다.
      5. region의 anchor point를 (0,100)으로 둔다.
      6. region의 viewport anchor point를 (0,100)으로 둔다.
      7. region의 scroll value를 none으로 둔다.
      8. buffer를 빈 문자열로 둔다.
  2. buffer가 빈 문자열이 아니면, U+000A LINE FEED (LF) 문자를 buffer에 추가한다.
  3. line을 buffer에 추가한다.
  4. previous position을 position으로 둔다.
7. seen EOF가 true이면 loop를 빠져나간다.
cue가 null이 아니면, cue의 cue text를 buffer로 두고, cue를 반환한다.
그렇지 않고, stylesheet가 null이 아니면, buffer에서 stylesheet를 파싱한다. 그것이 rule 목록을 반환하면, 그 목록을 stylesheet의 CSS rules로 할당한다. 그렇지 않으면, stylesheet의 CSS rules를 빈 목록으로 설정한다. [CSSOM] [CSS-SYNTAX-3] 마지막으로, stylesheet를 반환한다.
그렇지 않고, region이 null이 아니면, 결과를 위해 region을 사용하여 buffer에서 WebVTT region settings를 수집한다. region에서 WebVTT Region Object를 구성하고, 이를 반환한다.
그렇지 않으면 null을 반환한다.

6.2. WebVTT region settings 파싱

WebVTT parser algorithm이 문자열 input에서 text track을 위해 WebVTT region settings를 수집하라고 할 때, 사용자 에이전트는 다음 알고리즘을 실행해야 한다.

WebVTT region object는 WebVTT region을 나타내기 위한 개념적 구성물이며, WebVTT node object 목록의 root node로 사용된다. 이 알고리즘은 WebVTT Region Object 목록을 반환한다.

settings를 input을 spaces로 분할한 결과로 둔다.
목록 settings의 각 token setting에 대해, 다음 하위 단계를 실행한다:
1. setting이 U+003A COLON 문자(:)를 포함하지 않거나, setting 안의 첫 번째 U+003A COLON 문자(:)가 setting의 첫 번째 또는 마지막 문자이면, next setting으로 표시된 단계로 건너뛴다.
2. name을 setting 안의 첫 번째 U+003A COLON 문자(:)까지의, 이를 제외한 앞쪽 부분 문자열로 둔다.
3. value를 그 문자열 안의 첫 번째 U+003A COLON 문자(:) 바로 다음 문자부터 시작하는 뒤쪽 부분 문자열로 둔다.
4. name의 값에 적용되는 적절한 하위 단계를 다음과 같이 실행한다:
  name이 "id"에 대해 case-sensitive match인 경우
  
  region의 identifier를 value로 둔다.
  
  그렇지 않고 name이 "width"에 대해 case-sensitive match인 경우
  
  value에서 percentage string을 파싱한 결과가 percentage를 반환하면, region의 WebVTT region width를 percentage로 둔다.
  
  그렇지 않고 name이 "lines"에 대해 case-sensitive match인 경우
  1. value가 ASCII digit이 아닌 문자를 포함하면, next setting으로 표시된 단계로 건너뛴다.
  2. value를 정수로 해석하고, number를 그 숫자로 둔다.
  3. region의 WebVTT region lines를 number로 둔다.
  그렇지 않고 name이 "regionanchor"에 대해 case-sensitive match인 경우
  1. value가 U+002C COMMA 문자(,)를 포함하지 않으면, next setting으로 표시된 단계로 건너뛴다.
  2. anchorX를 value 안의 첫 번째 U+002C COMMA 문자(,)까지의, 이를 제외한 앞쪽 부분 문자열로 둔다.
  3. anchorY를 그 문자열 안의 첫 번째 U+002C COMMA 문자(,) 바로 다음 문자부터 시작하는 뒤쪽 부분 문자열로 둔다.
  4. anchorX에서 percentage string을 파싱하거나 anchorY에서 percentage string을 파싱한 결과가 percentage를 반환하지 않으면, next setting으로 표시된 단계로 건너뛴다.
  5. region의 WebVTT region anchor point를 anchorX와 anchorY에서 계산된 percentage 값들의 tuple로 둔다.
  그렇지 않고 name이 "viewportanchor"에 대해 case-sensitive match인 경우
  1. value가 U+002C COMMA 문자(,)를 포함하지 않으면, next setting으로 표시된 단계로 건너뛴다.
  2. viewportanchorX를 value 안의 첫 번째 U+002C COMMA 문자(,)까지의, 이를 제외한 앞쪽 부분 문자열로 둔다.
  3. viewportanchorY를 그 문자열 안의 첫 번째 U+002C COMMA 문자(,) 바로 다음 문자부터 시작하는 뒤쪽 부분 문자열로 둔다.
  4. viewportanchorX에서 percentage string을 파싱하거나 viewportanchorY에서 percentage string을 파싱한 결과가 percentage를 반환하지 않으면, next setting으로 표시된 단계로 건너뛴다.
  5. region의 WebVTT region viewport anchor point를 viewportanchorX와 viewportanchorY에서 계산된 percentage 값들의 tuple로 둔다.
  그렇지 않고 name이 "scroll"에 대해 case-sensitive match인 경우
  1. value가 문자열 "up"에 대해 case-sensitive match이면, region의 scroll value를 up으로 둔다.
5. Next setting: 다음 setting이 있으면 그 setting으로 계속한다.

percentage string을 파싱하는 규칙은 다음과 같다. 이는 0..100 범위의 숫자 또는 아무것도 반환하지 않는다. 알고리즘이 어느 지점에서든 "fails"라고 하면, 그 지점에서 중단되고 아무것도 반환하지 않는다는 뜻이다.

input을 파싱 중인 문자열로 둔다.
input이 WebVTT percentage의 구문과 일치하지 않으면 fail한다.
input에서 마지막 문자를 제거한다.
percentage를 floating-point number value를 파싱하기 위한 규칙을 사용하여 input을 파싱한 결과로 둔다. [HTML]
percentage가 error이거나, 0보다 작거나, 100보다 크면 fail한다.
percentage를 반환한다.

6.3. WebVTT cue timings and settings 파싱

위 알고리즘이 문자열 input에서 text track list of regions regions를 사용하여 WebVTT cue cue를 위해 WebVTT cue timings and settings를 수집하라고 할 때, 사용자 에이전트는 다음 알고리즘을 실행해야 한다.

input을 파싱 중인 문자열로 둔다.
position을 input 안의 포인터로 두며, 처음에는 문자열의 시작을 가리킨다.
Whitespace를 건너뛴다.
WebVTT timestamp를 수집한다. 해당 알고리즘이 실패하면, 이 단계를 중단하고 failure를 반환한다. 그렇지 않으면, cue의 text track cue start time을 수집된 시간으로 둔다.
Whitespace를 건너뛴다.
position의 문자가 U+002D HYPHEN-MINUS 문자(-)가 아니면 이 단계를 중단하고 failure를 반환한다. 그렇지 않으면, position을 한 문자 앞으로 이동한다.
position의 문자가 U+002D HYPHEN-MINUS 문자(-)가 아니면 이 단계를 중단하고 failure를 반환한다. 그렇지 않으면, position을 한 문자 앞으로 이동한다.
position의 문자가 U+003E GREATER-THAN SIGN 문자(>)가 아니면 이 단계를 중단하고 failure를 반환한다. 그렇지 않으면, position을 한 문자 앞으로 이동한다.
Whitespace를 건너뛴다.
WebVTT timestamp를 수집한다. 해당 알고리즘이 실패하면, 이 단계를 중단하고 failure를 반환한다. 그렇지 않으면, cue의 text track cue end time을 수집된 시간으로 둔다.
remainder를 position에서 시작하는 input의 뒤쪽 부분 문자열로 둔다.
cue에 대해 regions를 사용하여 remainder에서 WebVTT cue settings를 파싱한다.

사용자 에이전트가 문자열 input에서 text track list of regions regions를 사용하여 text track cue cue를 위해 WebVTT cue settings를 파싱해야 할 때, 사용자 에이전트는 다음 단계를 실행해야 한다:

settings를 input을 spaces로 분할한 결과로 둔다.
목록 settings의 각 token setting에 대해, 다음 하위 단계를 실행한다:
1. setting이 U+003A COLON 문자(:)를 포함하지 않거나, setting 안의 첫 번째 U+003A COLON 문자(:)가 setting의 첫 번째 또는 마지막 문자이면, next setting으로 표시된 단계로 건너뛴다.
2. name을 그 문자열 안의 첫 번째 U+003A COLON 문자(:)까지의, 이를 제외한 앞쪽 부분 문자열로 둔다.
3. value를 그 문자열 안의 첫 번째 U+003A COLON 문자(:) 바로 다음 문자부터 시작하는 뒤쪽 부분 문자열로 둔다.
4. name의 값에 적용되는 적절한 하위 단계를 다음과 같이 실행한다:
  name이 "region"에 대해 case-sensitive match인 경우
  1. cue의 WebVTT cue region을 regions 안에서 그 WebVTT region identifier가 value인 마지막 WebVTT region으로 두거나, 그런 것이 없으면 null로 둔다.
  name이 "vertical"에 대해 case-sensitive match인 경우
  1. value가 문자열 "rl"에 대해 case-sensitive match이면, cue의 WebVTT cue writing direction을 vertical growing left로 둔다.
  2. 그렇지 않고, value가 문자열 "lr"에 대해 case-sensitive match이면, cue의 WebVTT cue writing direction을 vertical growing right로 둔다.
  3. cue의 WebVTT cue writing direction이 horizontal이 아니면, cue의 WebVTT cue region을 null로 둔다 (vertical region은 없다).
  name이 "line"에 대해 case-sensitive match인 경우
  1. value가 U+002C COMMA 문자(,)를 포함하면, linepos를 그 문자열 안의 첫 번째 U+002C COMMA 문자(,)까지의, 이를 제외한 앞쪽 부분 문자열로 두고, linealign을 그 문자열 안의 첫 번째 U+002C COMMA 문자(,) 바로 다음 문자부터 시작하는 뒤쪽 부분 문자열로 둔다.
  2. 그렇지 않으면 linepos를 전체 value 문자열로 두고 linealign을 null로 둔다.
  3. linepos가 적어도 하나의 ASCII digit을 포함하지 않으면, next setting으로 표시된 단계로 건너뛴다.
  4. linepos의 마지막 문자가 U+0025 PERCENT SIGN 문자(%)인 경우
    
    linepos에서 percentage string을 파싱한 결과가 fail하지 않으면, number를 반환된 percentage로 둔다. 그렇지 않으면 next setting으로 표시된 단계로 건너뛴다.
    
    그렇지 않은 경우
    
    linepos가 U+002D HYPHEN-MINUS 문자 (-), ASCII digit, 및 U+002E DOT 문자(.)가 아닌 문자를 포함하면, next setting으로 표시된 단계로 건너뛴다.
    
    linepos 안에서 첫 번째 문자가 아닌 어떤 문자가 U+002D HYPHEN-MINUS 문자(-)이면, next setting으로 표시된 단계로 건너뛴다.
    
    U+002E DOT 문자(.)가 둘 이상 있으면, next setting으로 표시된 단계로 건너뛴다.
    
    U+002E DOT 문자(.)가 있고 그 앞 문자 또는 뒤 문자가 ASCII digit이 아니거나, U+002E DOT 문자(.)가 첫 번째 또는 마지막 문자이면, next setting으로 표시된 단계로 건너뛴다.
    
    number를 floating-point number value를 파싱하기 위한 규칙을 사용하여 linepos를 파싱한 결과로 둔다. [HTML]
    
    number가 error이면, next setting으로 표시된 단계로 건너뛴다.
  5. linealign이 문자열 "start"에 대해 case-sensitive match이면, cue의 WebVTT cue line alignment를 start alignment로 둔다.
  6. 그렇지 않고, linealign이 문자열 "center"에 대해 case-sensitive match이면, cue의 WebVTT cue line alignment를 center alignment로 둔다.
  7. 그렇지 않고, linealign이 문자열 "end"에 대해 case-sensitive match이면, cue의 WebVTT cue line alignment를 end alignment로 둔다.
  8. 그렇지 않고, linealign이 null이 아니면, next setting으로 표시된 단계로 건너뛴다.
  9. cue의 WebVTT cue line을 number로 둔다.
  10. linepos의 마지막 문자가 U+0025 PERCENT SIGN 문자(%)이면, cue의 WebVTT cue snap-to-lines flag를 false로 둔다. 그렇지 않으면 true로 둔다.
  11. cue의 WebVTT cue line이 auto가 아니면, cue의 WebVTT cue region을 null로 둔다 (cue가 line offset으로 명시적으로 위치 지정되었으므로 region에서 빠져나간다).
  name이 "position"에 대해 case-sensitive match인 경우
  1. value가 U+002C COMMA 문자(,)를 포함하면, colpos를 그 문자열 안의 첫 번째 U+002C COMMA 문자(,)까지의, 이를 제외한 앞쪽 부분 문자열로 두고, colalign을 그 문자열 안의 첫 번째 U+002C COMMA 문자(,) 바로 다음 문자부터 시작하는 뒤쪽 부분 문자열로 둔다.
  2. 그렇지 않으면 colpos를 전체 value 문자열로 두고 colalign을 null로 둔다.
  3. colpos에서 percentage string을 파싱한 결과가 fail하지 않으면, number를 반환된 percentage로 둔다. 그렇지 않으면 next setting으로 표시된 단계로 건너뛴다 (position의 값은 특수 값 auto로 남는다).
  4. colalign이 문자열 "line-left"에 대해 case-sensitive match이면, cue의 WebVTT cue position alignment를 line-left alignment로 둔다.
  5. 그렇지 않고, colalign이 문자열 "center"에 대해 case-sensitive match이면, cue의 WebVTT cue position alignment를 center alignment로 둔다.
  6. 그렇지 않고, colalign이 문자열 "line-right"에 대해 case-sensitive match이면, cue의 WebVTT cue position alignment를 line-right alignment로 둔다.
  7. 그렇지 않고, colalign이 null이 아니면, next setting으로 표시된 단계로 건너뛴다.
  8. cue의 position을 number로 둔다.
  name이 "size"에 대해 case-sensitive match인 경우
  1. value에서 percentage string을 파싱한 결과가 fail하지 않으면, number를 반환된 percentage로 둔다. 그렇지 않으면 next setting으로 표시된 단계로 건너뛴다.
  2. cue의 WebVTT cue size를 number로 둔다.
  3. cue의 WebVTT cue size가 100이 아니면, cue의 WebVTT cue region을 null로 둔다(cue가 명시적으로 크기 지정되었으므로 region에서 빠져나간다).
  name이 "align"에 대해 case-sensitive match인 경우
  1. value가 문자열 "start"에 대해 case-sensitive match이면, cue의 WebVTT cue text alignment를 start alignment로 둔다.
  2. value가 문자열 "center"에 대해 case-sensitive match이면, cue의 WebVTT cue text alignment를 center alignment로 둔다.
  3. value가 문자열 "end"에 대해 case-sensitive match이면, cue의 WebVTT cue text alignment를 end alignment로 둔다.
  4. value가 문자열 "left"에 대해 case-sensitive match이면, cue의 WebVTT cue text alignment를 left alignment로 둔다.
  5. value가 문자열 "right"에 대해 case-sensitive match이면, cue의 WebVTT cue text alignment를 right alignment로 둔다.
5. Next setting: 다음 token이 있으면 그 token으로 계속한다.

이 명세가 사용자 에이전트가 WebVTT timestamp를 수집해야 한다고 할 때, 사용자 에이전트는 다음 단계를 실행해야 한다:

input 및 position을 이 단계를 호출한 알고리즘에서 같은 이름을 가진 변수와 동일한 것으로 둔다.
most significant units를 minutes로 둔다.
position이 input의 끝을 지난 경우, error를 반환하고 이 단계를 중단한다.
position이 가리키는 문자가 ASCII digit이 아니면, error를 반환하고 이 단계를 중단한다.
Code point 시퀀스를 수집한다. 이는 ASCII digit이며, string을 수집된 부분 문자열로 둔다.
string을 십진 정수로 해석한다. value₁을 그 정수로 둔다.
string의 길이가 정확히 두 문자가 아니거나, value₁이 59보다 크면, most significant units를 hours로 둔다.
position이 input의 끝을 지났거나 position의 문자가 U+003A COLON 문자(:)가 아니면, error를 반환하고 이 단계를 중단한다. 그렇지 않으면, position을 한 문자 앞으로 이동한다.
code point 시퀀스를 수집한다. 이는 ASCII digit이며, string을 수집된 부분 문자열로 둔다.
string의 길이가 정확히 두 문자가 아니면, error를 반환하고 이 단계를 중단한다.
string을 십진 정수로 해석한다. value₂를 그 정수로 둔다.
most significant units가 hours이거나, position이 input의 끝을 지나지 않았고 position의 문자가 U+003A COLON 문자(:)이면, 다음 하위 단계를 실행한다:
1. position이 input의 끝을 지났거나 position의 문자가 U+003A COLON 문자(:)가 아니면, error를 반환하고 이 단계를 중단한다. 그렇지 않으면, position을 한 문자 앞으로 이동한다.
2. code point 시퀀스를 수집한다. 이는 ASCII digit이며, string을 수집된 부분 문자열로 둔다.
3. string의 길이가 정확히 두 문자가 아니면, error를 반환하고 이 단계를 중단한다.
4. string을 십진 정수로 해석한다. value₃을 그 정수로 둔다.
그렇지 않으면(most significant units가 hours가 아니고, position이 input의 끝을 지났거나, position의 문자가 U+003A COLON 문자(:)가 아닌 경우), value₃에 value₂의 값을 갖게 한 다음, value₂에 value₁의 값을 갖게 하고, value₁을 0과 같게 한다.
position이 input의 끝을 지났거나 position의 문자가 U+002E FULL STOP 문자(.)가 아니면, error를 반환하고 이 단계를 중단한다. 그렇지 않으면, position을 한 문자 앞으로 이동한다.
code point 시퀀스를 수집한다. 이는 ASCII digit이며, string을 수집된 부분 문자열로 둔다.
string의 길이가 정확히 세 문자가 아니면, error를 반환하고 이 단계를 중단한다.
string을 십진 정수로 해석한다. value₄를 그 정수로 둔다.
value₂가 59보다 크거나 value₃가 59보다 크면, error를 반환하고 이 단계를 중단한다.
result를 value₁×60×60 + value₂×60 + value₃ + value₄∕1000로 둔다.
result를 반환한다.

6.4. WebVTT cue text 파싱 규칙

WebVTT Node Object는 cue text의 컴포넌트를 나타내는 데 사용되는 개념적 구성물이며, 그 처리를 기본 구문을 참조하지 않고 설명할 수 있게 한다.

WebVTT Node Object에는 두 가지 큰 부류가 있다: WebVTT Internal Node Object와 WebVTT Leaf Node Object.

WebVTT Internal Node Objects는 추가 WebVTT Node Objects를 포함할 수 있는 것이다. 이는 개념적으로 HTML 또는 DOM의 element와 유사하다. WebVTT Internal Node Objects는 자식 WebVTT Node Objects의 순서 있는 목록을 가진다. WebVTT Internal Node Object는 그 자식들의 parent라고 한다. 순환은 발생하지 않으며, 이렇게 구성된 parent-child 관계는 트리 구조를 형성한다. WebVTT Internal Node Objects는 또한 class names의 순서 있는 목록을 가지며, 이를 그들의 applicable classes라고 한다. 또한 언어를 가지며, 이를 그들의 applicable language라고 하고, 이는 BCP 47 language tag로 해석되어야 한다. [BCP47]

사용자 에이전트는 language tag가 유효하지 않거나 심지어 well-formed language tag가 아니더라도 이를 applicable language로 추가한다. [BCP47]

WebVTT Internal Node Objects에는 여러 구체적인 클래스가 있다:

Lists of WebVTT Node Objects: 이는 WebVTT Node Objects 트리의 root node로 사용된다.
WebVTT Class Objects: 이는 cue text 안의 텍스트 span(WebVTT cue class span)을 나타내며, 기울임꼴이나 굵게와 같은 추가 의미를 암시하지 않고 cue의 일부에 applicable classes를 주석으로 붙이는 데 사용된다.
WebVTT Italic Objects: 이는 WebVTT caption 또는 subtitle cue text 안의 기울임꼴 텍스트 span(WebVTT cue italics span)을 나타낸다.
WebVTT Bold Objects: 이는 WebVTT caption 또는 subtitle cue text 안의 굵은 텍스트 span(WebVTT cue bold span)을 나타낸다.
WebVTT Underline Objects: 이는 WebVTT caption 또는 subtitle cue text 안의 밑줄 텍스트 span(WebVTT cue underline span)을 나타낸다.
WebVTT Ruby Objects: 이는 WebVTT caption 또는 subtitle cue text 안의 ruby span(WebVTT cue ruby span)을 나타낸다.
WebVTT Ruby Text Objects: 이는 WebVTT caption 또는 subtitle cue text 안의 ruby text span(WebVTT cue ruby text span)을 나타낸다.
WebVTT Voice Objects: 이는 WebVTT caption 또는 subtitle cue text 안에서 특정 voice와 연결된 텍스트 span(WebVTT cue voice span)을 나타낸다. WebVTT Voice Object는 값을 가지며, 이는 voice의 이름이다.
WebVTT Language Objects: 이는 WebVTT caption 또는 subtitle cue text 안의 텍스트 span(WebVTT cue language span)을 나타내며, 기울임꼴이나 굵게와 같은 추가 의미를 암시하지 않고, cue에서 applicable language가 주변 텍스트의 언어와 다를 수 있는 부분에 주석을 붙이는 데 사용된다.

WebVTT Leaf Node Objects는 텍스트와 같은 데이터를 포함하며, 자식 WebVTT Node Objects를 포함할 수 없는 것이다.

WebVTT Leaf Node Objects에는 두 가지 구체적인 클래스가 있다:

WebVTT Text Objects: 텍스트 조각. WebVTT Text Object는 값을 가지며, 이는 그것이 나타내는 텍스트이다.
WebVTT Timestamp Objects: timestamp. WebVTT Timestamp Object는 초와 초의 분수 단위로 된 값을 가지며, 이는 timestamp가 나타내는 시간이다.

WebVTT cue text parsing rules는 다음 알고리즘으로 구성된다. input은 WebVTT caption 또는 subtitle cue text를 포함한다고 여겨지는 문자열 input이며, 선택적으로 fallback language language가 있다. 이 알고리즘은 list of WebVTT Node Objects를 반환한다.

input을 파싱 중인 문자열로 둔다.
position을 input 안의 포인터로 두며, 처음에는 문자열의 시작을 가리킨다.
result를 처음에는 비어 있는 list of WebVTT Node Objects로 둔다.
current를 WebVTT Internal Node Object result로 둔다.
language stack을 처음에는 비어 있는 language tag의 stack으로 둔다.
language가 설정되어 있으면, result의 applicable language를 language로 설정하고, language를 language stack에 push한다.
Loop: position이 input의 끝을 지났으면, result를 반환하고 이 단계를 중단한다.
token을 WebVTT cue text tokenizer를 호출한 결과로 둔다.
token의 유형에 따라 적절한 단계를 실행한다:
token이 문자열인 경우
1. 값이 string token token의 값인 WebVTT Text Object를 생성한다.
2. 새로 생성된 WebVTT Text Object를 current에 추가한다.
token이 start tag인 경우
start tag token token이 처리되는 방식은 그 tag name에 따라 다음과 같이 달라진다:

tag name이 "c"인 경우

WebVTT Class Object를 Attach한다.

tag name이 "i"인 경우

WebVTT Italic Object를 Attach한다.

tag name이 "b"인 경우

WebVTT Bold Object를 Attach한다.

tag name이 "u"인 경우

WebVTT Underline Object를 Attach한다.

tag name이 "ruby"인 경우

WebVTT Ruby Object를 Attach한다.

tag name이 "rt"인 경우

current가 WebVTT Ruby Object이면, WebVTT Ruby Text Object를 attach한다.

tag name이 "v"인 경우

WebVTT Voice Object를 Attach하고, 그 값을 token의 annotation string으로 설정하거나, annotation string이 없으면 빈 문자열로 설정한다.

tag name이 "lang"인 경우

token의 annotation string 값을, 또는 annotation string이 없으면 빈 문자열을 language stack에 push한다. 그런 다음 WebVTT Language Object를 attach한다.

그 밖의 경우

token을 무시한다.

위 단계가 특정 구체 클래스의 WebVTT Internal Node Object를 attach하라고 할 때, 사용자 에이전트는 다음 단계를 실행해야 한다:
1. 지정된 구체 클래스의 새 WebVTT Internal Node Object를 생성한다.
2. 새 object의 applicable classes 목록을 token 안의 class 목록으로 설정하되, 빈 문자열인 class는 제외한다.
3. language stack이 비어 있지 않으면 새 object의 applicable language를 language stack의 맨 위 항목으로 설정한다.
4. 새로 생성된 node object를 current에 추가한다.
5. current를 새로 생성된 node object로 둔다.
token이 end tag인 경우
다음 조건 중 하나가 true이면, current를 current의 parent node로 둔다.
- end tag token token의 tag name이 "c"이고 current가 WebVTT Class Object이다.
- end tag token token의 tag name이 "i"이고 current가 WebVTT Italic Object이다.
- end tag token token의 tag name이 "b"이고 current가 WebVTT Bold Object이다.
- end tag token token의 tag name이 "u"이고 current가 WebVTT Underline Object이다.
- end tag token token의 tag name이 "ruby"이고 current가 WebVTT Ruby Object이다.
- end tag token token의 tag name이 "rt"이고 current가 WebVTT Ruby Text Object이다.
- end tag token token의 tag name이 "v"이고 current가 WebVTT Voice Object이다.
그렇지 않고, end tag token token의 tag name이 "lang"이고 current가 WebVTT Language Object이면, current를 current의 parent node로 두고, language stack에서 맨 위 값을 pop한다.

그렇지 않고, end tag token token의 tag name이 "ruby"이고 current가 WebVTT Ruby Text Object이면, current를 current의 parent node의 parent node로 둔다.

그렇지 않으면 token을 무시한다.
token이 timestamp tag인 경우
1. input을 tag value로 둔다.
2. position을 input 안의 포인터로 두며, 처음에는 문자열의 시작을 가리킨다.
3. WebVTT timestamp를 수집한다.
4. 해당 알고리즘이 실패하지 않고, position이 이제 input의 끝을 가리키면(즉, timestamp 뒤에 trailing character가 없으면), 값이 수집된 시간인 WebVTT Timestamp Object를 생성한 다음, 이를 current에 추가한다.
  
  그렇지 않으면 token을 무시한다.
loop로 표시된 단계로 이동한다.

WebVTT cue text tokenizer는 다음과 같다. 이는 token을 emit하며, token은 문자열(그 값은 문자 시퀀스), start tag(tag name, class 목록, 선택적 annotation 포함), end tag(tag name 포함), 또는 timestamp tag(tag value 포함) 중 하나이다.

input 및 position을 이 단계를 호출한 알고리즘에서 같은 이름을 가진 변수와 동일한 것으로 둔다.
tokenizer state를 WebVTT data state로 둔다.
result를 빈 문자열로 둔다.
classes를 빈 목록으로 둔다.
Loop: position이 input의 끝을 지났으면, c를 end-of-file marker로 둔다. 그렇지 않으면, c를 position이 가리키는 input 안의 문자로 둔다.

end-of-file marker는 Unicode 문자가 아니며, tokenizer를 끝내는 데 사용된다.
tokenizer state가 나타내는 상태로 이동한다:

WebVTT data state

c의 값과 일치하는 항목으로 이동한다:

U+0026 AMPERSAND (&)

tokenizer state를 HTML character reference in data state로 설정하고, next로 표시된 단계로 이동한다.

U+003C LESS-THAN SIGN (<)

result가 빈 문자열이면, tokenizer state를 WebVTT tag state로 설정하고 next로 표시된 단계로 이동한다.

그렇지 않으면, 값이 result인 string token을 반환하고 이 단계를 중단한다.

End-of-file marker

값이 result인 string token을 반환하고 이 단계를 중단한다.

그 밖의 모든 것

c를 result에 추가하고 next로 표시된 단계로 이동한다.

HTML character reference in data state

HTML character reference를 consume하려고 시도하며, additional allowed character는 없다.

아무것도 반환되지 않으면, U+0026 AMPERSAND 문자(&)를 result에 추가한다.

그렇지 않으면, 반환된 character token의 data를 result에 추가한다.

그런 다음 어떤 경우에도 tokenizer state를 WebVTT data state로 설정하고, next로 표시된 단계로 이동한다.

WebVTT tag state

c의 값과 일치하는 항목으로 이동한다:

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

tokenizer state를 WebVTT start tag annotation state로 설정하고, next로 표시된 단계로 이동한다.

U+002E FULL STOP character (.)

tokenizer state를 WebVTT start tag class state로 설정하고, next로 표시된 단계로 이동한다.

U+002F SOLIDUS character (/)

tokenizer state를 WebVTT end tag state로 설정하고, next로 표시된 단계로 이동한다.

ASCII digits

result를 c로 설정하고, tokenizer state를 WebVTT timestamp tag state로 설정한 다음, next로 표시된 단계로 이동한다.

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

position을 input 안의 다음 문자로 전진시킨 다음, 아래의 다음 "end-of-file marker" 항목으로 이동한다.

End-of-file marker

tag name이 빈 문자열이고 class와 annotation이 없는 start tag를 반환하고 이 단계를 중단한다.

그 밖의 모든 것

result를 c로 설정하고, tokenizer state를 WebVTT start tag state로 설정한 다음, next로 표시된 단계로 이동한다.

WebVTT start tag state

c의 값과 일치하는 항목으로 이동한다:

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

tokenizer state를 WebVTT start tag annotation state로 설정하고, next로 표시된 단계로 이동한다.

U+000A LINE FEED (LF) character

buffer를 c로 설정하고, tokenizer state를 WebVTT start tag annotation state로 설정한 다음, next로 표시된 단계로 이동한다.

U+002E FULL STOP character (.)

tokenizer state를 WebVTT start tag class state로 설정하고, next로 표시된 단계로 이동한다.

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

position을 input 안의 다음 문자로 전진시킨 다음, 아래의 다음 "end-of-file marker" 항목으로 이동한다.

End-of-file marker

tag name이 result이고 class와 annotation이 없는 start tag를 반환하고 이 단계를 중단한다.

그 밖의 모든 것

c를 result에 추가하고 next로 표시된 단계로 이동한다.

WebVTT start tag class state

c의 값과 일치하는 항목으로 이동한다:

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

classes에 값이 buffer인 항목을 추가하고, buffer를 빈 문자열로 설정하며, tokenizer state를 WebVTT start tag annotation state로 설정한 다음, next로 표시된 단계로 이동한다.

U+000A LINE FEED (LF) character

classes에 값이 buffer인 항목을 추가하고, buffer를 c로 설정하며, tokenizer state를 WebVTT start tag annotation state로 설정한 다음, next로 표시된 단계로 이동한다.

U+002E FULL STOP character (.)

classes에 값이 buffer인 항목을 추가하고, buffer를 빈 문자열로 설정한 다음, next로 표시된 단계로 이동한다.

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

position을 input 안의 다음 문자로 전진시킨 다음, 아래의 다음 "end-of-file marker" 항목으로 이동한다.

End-of-file marker

classes에 값이 buffer인 항목을 추가한 다음, tag name이 result이고 classes에 주어진 class를 가지지만 annotation은 없는 start tag를 반환하고 이 단계를 중단한다.

그 밖의 모든 것

c를 buffer에 추가하고 next로 표시된 단계로 이동한다.

WebVTT start tag annotation state

c의 값과 일치하는 항목으로 이동한다:

U+0026 AMPERSAND (&)

tokenizer state를 HTML character reference in annotation state로 설정하고, next로 표시된 단계로 이동한다.

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

position을 input 안의 다음 문자로 전진시킨 다음, 아래의 다음 "end-of-file marker" 항목으로 이동한다.

End-of-file marker

buffer에서 앞뒤 ASCII whitespace 문자를 제거하고, buffer 안의 하나 이상의 연속된 ASCII whitespace 문자 시퀀스를 단일 U+0020 SPACE 문자로 대체한다. 그런 다음 tag name이 result이고, classes에 주어진 class를 가지며, buffer를 annotation으로 가지는 start tag를 반환하고 이 단계를 중단한다.

그 밖의 모든 것

c를 buffer에 추가하고 next로 표시된 단계로 이동한다.

HTML character reference in annotation state

HTML character reference를 consume하려고 시도하며, additional allowed character는 U+003E GREATER-THAN SIGN (>)이다.

아무것도 반환되지 않으면, U+0026 AMPERSAND 문자(&)를 buffer에 추가한다.

그렇지 않으면, 반환된 character token의 data를 buffer에 추가한다.

그런 다음 어떤 경우에도 tokenizer state를 WebVTT start tag annotation state로 설정하고, next로 표시된 단계로 이동한다.

WebVTT end tag state

c의 값과 일치하는 항목으로 이동한다:

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

position을 input 안의 다음 문자로 전진시킨 다음, 아래의 다음 "end-of-file marker" 항목으로 이동한다.

End-of-file marker

tag name이 result인 end tag를 반환하고 이 단계를 중단한다.

그 밖의 모든 것

c를 result에 추가하고 next로 표시된 단계로 이동한다.

WebVTT timestamp tag state

c의 값과 일치하는 항목으로 이동한다:

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

position을 input 안의 다음 문자로 전진시킨 다음, 아래의 다음 "end-of-file marker" 항목으로 이동한다.

End-of-file marker

tag name이 result인 timestamp tag를 반환하고 이 단계를 중단한다.

그 밖의 모든 것

c를 result에 추가하고 next로 표시된 단계로 이동한다.
Next: position을 input 안의 다음 문자로 전진시킨다.
loop로 표시된 단계로 이동한다.

위 알고리즘에서 HTML character reference를 consume하려고 시도하라고 할 때, 이는 HTML에 정의된 대로 character reference를 consume하려고 시도한다는 뜻이다. [HTML]

HTML 명세가 이 문맥에서 문자를 consume하라고 할 때, 이는 position을 input 안의 다음 문자로 전진시킨다는 뜻이다. 문자를 unconsume하라고 할 때, 이는 position을 input 안의 이전 문자로 되돌린다는 뜻이다. "EOF"는 이 명세의 end-of-file marker와 동등하다. 마지막으로, 이 문맥은 (missing semicolon을 처리할 때) "as part of an attribute"가 아니다.

6.5. WebVTT cue text DOM 구성 규칙

VTTCue interface의 getCueAsHTML() method를 통해 WebVTT cue의 콘텐츠를 가져오기 위해서는, 이를 DocumentFragment로 파싱할 필요가 있다. 이 절은 그 방법을 설명한다.

list of WebVTT Node Objects를 Document owner에 대한 DOM tree로 변환하려면, 사용자 에이전트는 WebVTT Node Objects의 트리와 동형인 DOM node의 트리를 생성해야 하며, WebVTT Node Objects에서 DOM node로의 매핑은 다음과 같다:

WebVTT Node Object	DOM node
List of WebVTT Node Objects	`DocumentFragment` node.
WebVTT Region Object	`DocumentFragment` node.
WebVTT Class Object	HTML span element.
WebVTT Italic Object	HTML i element.
WebVTT Bold Object	HTML b element.
WebVTT Underline Object	HTML u element.
WebVTT Ruby Object	HTML ruby element.
WebVTT Ruby Text Object	HTML rt element.
WebVTT Voice Object	WebVTT Voice Object의 값으로 설정된 title attribute를 가진 HTML span element.
WebVTT Language Object	WebVTT Language Object의 applicable language로 설정된 lang attribute를 가진 HTML span element.
WebVTT Text Object	`data`가 WebVTT Text Object의 값인 `Text` node.
WebVTT Timestamp Object	`target`이 "`timestamp`"이고, `data`가 WebVTT Timestamp Object의 값을 나타내는 WebVTT timestamp인 `ProcessingInstruction` node. 모든 선택적 컴포넌트를 포함하고, `hours` 컴포넌트가 10보다 작으면 leading zero 하나를 가지며, 그렇지 않으면 leading zero를 가지지 않는다.

위에 설명한 매핑의 일부로 생성된 HTML element는 그 namespaceURI가 HTML namespace로 설정되어야 하며, HTML 명세에 정의된 적절한 IDL interface를 사용해야 한다. 또한 대응하는 WebVTT Internal Node Object가 applicable classes를 가지고 있으면, 그 class들을 각각 단일 U+0020 SPACE 문자로 구분하여 연결한 문자열로 설정된 class attribute를 가져야 한다.

DOM tree 안의 모든 node의 ownerDocument attribute는 주어진 document owner로 설정되어야 한다.

위에서 설명되지 않았거나 위에서 정의된 특성에 의존하지 않는 DOM node의 모든 특성은 초기값으로 남겨 두어야 한다.

6.6. chapter title을 추출하기 위한 WebVTT 규칙

WebVTT cue cue에 대한 chapter title을 추출하기 위한 WebVTT 규칙은 다음과 같다:

nodes를 cue의 cue text에 WebVTT cue text parsing rules를 적용하여 얻은 list of WebVTT Node Objects로 둔다.
nodes 안의 각 WebVTT Text Object의 값을 preorder, depth-first traversal 순서로 연결한 것을 반환하되, WebVTT Ruby Text Objects와 그 descendants는 제외한다.

7. 렌더링

이 절은 사용자 에이전트에서 WebVTT caption 또는 subtitle cue를 시각적으로 렌더링하는 방법을 어느 정도 자세히 설명한다. 처리 모델은 CSS를 사용할 수 있는 HTML의 media element와 매우 밀접하게 연결되어 있다. CSS를 지원하지 않는 사용자 에이전트는 스타일링 및 위치 지정 기능 없이 plain text만 렌더링할 것으로 기대된다. 완전한 HTML CSS engine을 지원하지 않는 사용자 에이전트는 완전한 CSS engine을 가진 사용자 에이전트가 렌더링할 것과 동등한 시각적 표현을 렌더링할 것으로 기대된다.

7.1. 처리 모델

WebVTT text track의 표시를 업데이트하기 위한 규칙은 아래 단계를 적용하여 media element(구체적으로는 video element), 또는 다른 playback mechanism의 text track을 렌더링한다. 주어진 media element 또는 다른 playback mechanism에 대해 이 규칙을 사용하는 모든 text track은 함께 렌더링되어, 여러 track의 subtitle이 겹치는 것을 피한다. 이 알고리즘을 호출할 때 fallback language language가 설정될 수 있다.

HTML에서 audio element는 시각적 렌더링 영역이 없으므로, 이 알고리즘은 audio element에 대해 중단된다. 작성자가 audio resource를 위한 WebVTT caption 또는 subtitle을 만드는 경우, 사용자 에이전트가 렌더링할 수 있도록 이를 video element 안에 공개할 필요가 있다.

아래 단계의 output은 media element 또는 다른 playback mechanism의 렌더링 영역을 덮는 CSS box 집합이며, 사용자 에이전트는 이를 사용자에게 적합한 방식으로 렌더링할 것으로 기대된다.

규칙은 다음과 같다:

media element가 audio element이거나, 렌더링 영역이 없는 다른 playback mechanism이면 이 단계를 중단한다.
video를 media element 또는 다른 playback mechanism으로 둔다.
output을 absolutely positioned CSS block box의 빈 목록으로 둔다.
사용자 에이전트가 video에 대한 user interface를 expose하고 있으면, user interface와 같은 영역을 덮는 완전히 투명한 positioned CSS block box 하나 이상을 output에 추가한다.
이 규칙이 마지막으로 실행되었을 때 사용자 에이전트가 video에 대해 user interface를 expose하지 않았지만 지금은 expose하고 있으면, 선택적으로 reset을 true로 둔다. 그렇지 않으면, reset을 false로 둔다.
tracks를 video의 text track 목록 중 다음 조건을 만족하는 subset으로 둔다: 그 text track rendering을 업데이트하기 위한 규칙이 이 WebVTT text track의 표시를 업데이트하기 위한 규칙이고, 그 text track mode가 showing인 것.
cues를 text track cue의 빈 목록으로 둔다.
tracks 안의 각 track track에 대해, track의 cue 목록에서 text track cue active flag가 설정된 모든 cue를 cues에 추가한다.
regions를 WebVTT region의 빈 목록으로 둔다.
tracks 안의 각 track track에 대해, identifier를 가진 모든 region을 track의 region 목록에서 regions에 추가한다.
reset이 false이면, regions 안의 각 WebVTT region region에 대해 regionNode를 WebVTT region object로 둔다.
각 regionNode에 대해 다음 단계를 적용한다:
1. regionNode에 CSS property를 적용하기 위한 일부 변수를 다음과 같이 준비한다:
  - regionWidth를 WebVTT region width로 둔다. width를 regionWidth vw로 둔다(vw는 CSS unit이다). [CSS-VALUES]
  - lineHeight를 6vh로 두고(vh는 CSS unit이다) [CSS-VALUES], regionHeight를 WebVTT region lines로 둔다. lines를 lineHeight에 regionHeight를 곱한 값으로 둔다.
  - viewportAnchorX를 WebVTT region anchor의 x 차원으로 두고, regionAnchorX를 WebVTT region anchor의 x 차원으로 둔다. leftOffset을 regionAnchorX에 width를 곱하고 100.0으로 나눈 값으로 둔다. left를 viewportAnchorX vw에서 leftOffset을 뺀 값으로 둔다.
  - viewportAnchorY를 WebVTT region anchor의 y 차원으로 두고, regionAnchorY를 WebVTT region anchor의 y 차원으로 둔다. topOffset을 regionAnchorY에 lines를 곱하고 100.0으로 나눈 값으로 둔다. top을 viewportAnchorY vh에서 topOffset을 뺀 값으로 둔다.
2. 다음 제약 조건 안에서 CSS 명세의 용어를 regionNode에 적용하여, initial containing block에 상대적으로 위치 지정된 CSS box box를 얻는다:
  1. regionNode와 연결된 style sheet는 없다. (regionNode는 아래에 설명된 대로 box가 생성된 뒤 style sheet를 사용하여 다시 style된다.)
  2. regionNode의 property는 다음 절에서 정의된 대로 값이 설정된다. (그 절은 이 알고리즘에서 앞서 계산된 일부 변수의 값을 사용한다.)
  3. video viewport(및 initial containing block)는 video의 렌더링 영역이다.
3. CSS box box를 output에 추가한다.
reset이 false이면, cues 안의 각 WebVTT cue cue에 대해: cue의 text track cue display state가 CSS box 집합을 가지고 있으면:
- cue의 WebVTT cue region이 null이 아니면, 그 box들을 해당 region의 box에 추가하고 cue를 cues에서 제거한다.
- 그렇지 않으면, 그 box들을 output에 추가하고 cue를 cues에서 제거한다.
아직 대응하는 CSS box가 output에 추가되지 않은 cues 안의 각 WebVTT cue cue에 대해, text track cue order 순서로 다음 하위 단계를 실행한다:
1. nodes를 cue의 cue text에 WebVTT cue text parsing rules를 적용하여 얻은 list of WebVTT Node Objects로 둔다. fallback language language가 제공되면 이를 사용한다.
2. cue의 WebVTT cue region이 null이면, 다음 하위 단계를 실행한다:
  1. nodes에서 CSS box boxes를 얻기 위해 WebVTT cue setting을 적용한다.
  2. cue의 text track cue display state가 boxes 안의 CSS box를 가지게 한다.
  3. boxes 안의 CSS box를 output에 추가한다.
3. 그렇지 않으면, 다음 하위 단계를 실행한다:
  1. region을 cue의 WebVTT cue region으로 둔다.
  2. region의 WebVTT region scroll setting이 up이고 region이 이미 하나의 child를 가지고 있으면, region의 transition-property를 top으로, transition-duration을 0.433s로 설정한다.
  3. offset을 cue의 computed position에 region의 WebVTT region width를 곱하고 100으로 나눈 값으로 둔다 (즉, 이를 region width의 percentage로 해석한다).
  4. cue의 computed position alignment를 사용하여 offset을 다음과 같이 조정한다:
    
    computed position alignment가 center alignment인 경우
    
    offset에서 region의 WebVTT region width의 절반을 뺀다.
    
    computed position alignment가 line-right alignment인 경우
    
    offset에서 region의 WebVTT region width를 뺀다.
  5. left를 offset %로 둔다. [CSS-VALUES]
  6. initial containing block에 상대적으로 위치 지정된 CSS box 집합 boxes를 얻는다.
  7. boxes 안에 line box가 없으면, cue에 대한 이 하위 단계의 나머지를 건너뛴다. cue는 무시된다.
  8. cue의 text track cue display state가 boxes 안의 CSS box를 가지게 한다.
  9. boxes 안의 CSS box를 region에 추가한다.
  10. CSS box boxes 전체의 height가 region box의 height보다 작으면, diff를 두 height 값의 absolute difference로 둔다. top을 diff만큼 증가시키고 이를 regionNode에 다시 적용한다.
output을 반환한다.

사용자 에이전트는 사용자가 위 알고리즘의 cue 위치 지정을 재정의할 수 있게 할 수 있다. 예를 들어 cue를 video의 다른 위치로 드래그하거나, 심지어 video 밖으로 완전히 이동할 수 있게 할 수 있다.

7.2. Cue setting 처리

위 처리 알고리즘이 사용자 에이전트에게 list of WebVTT Node Objects nodes에서 CSS box를 얻기 위해 WebVTT cue setting을 적용할 것을 요구할 때, 사용자 에이전트는 다음 알고리즘을 실행해야 한다.

WebVTT cue writing direction이 horizontal이면, writing-mode를 "horizontal-tb"로 둔다. 그렇지 않고 WebVTT cue writing direction이 vertical growing left이면, writing-mode를 "vertical-rl"로 둔다. 그렇지 않으면 WebVTT cue writing direction은 vertical growing right이다. writing-mode를 "vertical-lr"로 둔다.
다음 목록의 적절한 규칙에 따라 cue에 대한 maximum size의 값을 결정한다:

computed position alignment가 line-left인 경우

maximum size를 100에서 computed position을 뺀 값으로 둔다.

computed position alignment가 line-right인 경우

maximum size를 computed position으로 둔다.

computed position alignment가 center이고, computed position이 50 이하인 경우

maximum size를 computed position에 2를 곱한 값으로 둔다.

computed position alignment가 center이고, computed position이 50보다 큰 경우

maximum size를 100에서 computed position을 뺀 뒤 그 결과에 2를 곱한 값으로 둔다.
WebVTT cue size가 maximum size보다 작으면, size를 WebVTT cue size로 둔다. 그렇지 않으면, size를 maximum size로 둔다.
WebVTT cue writing direction이 horizontal이면, width를 size vw로 두고 height를 auto로 둔다. 그렇지 않으면, width를 auto로 두고 height를 size vh로 둔다. (이는 다음 절에서 렌더링을 위한 CSS property를 설정하는 데 사용하는 CSS 값이다. vw와 vh는 CSS unit이다.) [CSS-VALUES]
다음 목록의 적절한 규칙에 따라 cue에 대한 x-position 또는 y-position의 값을 결정한다:

WebVTT cue writing direction이 horizontal인 경우

computed position alignment가 line-left alignment인 경우

x-position을 computed position으로 둔다.

computed position alignment가 center alignment인 경우

x-position을 computed position에서 size의 절반을 뺀 값으로 둔다.

computed position alignment가 line-right alignment인 경우

x-position을 computed position에서 size를 뺀 값으로 둔다.

WebVTT cue writing direction이 vertical growing left 또는 vertical growing right인 경우

computed position alignment가 line-left alignment인 경우

y-position을 computed position으로 둔다.

computed position alignment가 center alignment인 경우

y-position을 computed position에서 size의 절반을 뺀 값으로 둔다.

computed position alignment가 line-right alignment인 경우

y-position을 computed position에서 size를 뺀 값으로 둔다.
cue에 대해 아직 계산되지 않은 x-position 또는 y-position 중 하나의 값을 다음 목록의 적절한 규칙에 따라 결정한다:

WebVTT cue snap-to-lines flag가 false인 경우

WebVTT cue writing direction이 horizontal인 경우

y-position을 computed line으로 둔다.

WebVTT cue writing direction이 vertical growing left 또는 vertical growing right인 경우

x-position을 computed line으로 둔다.

WebVTT cue snap-to-lines flag가 true인 경우

WebVTT cue writing direction이 horizontal인 경우

y-position을 0으로 둔다.

WebVTT cue writing direction이 vertical growing left 또는 vertical growing right인 경우

x-position을 0으로 둔다.

이는 최종 위치가 아니며, 아래에서 box 치수를 계산하는 데 사용되는 임시 위치일 뿐이다.
left를 x-position vw로 두고 top을 y-position vh로 둔다. (이는 다음 절에서 렌더링을 위한 CSS property를 설정하는 데 사용하는 CSS 값이다. vw와 vh는 CSS unit이다.) [CSS-VALUES]
initial containing block에 상대적으로 위치 지정된 boxes CSS box 집합을 얻는다.
boxes 안에 line box가 없으면, cue에 대한 이 하위 단계의 나머지를 건너뛴다. 이 cue는 무시된다.
다음 목록의 적절한 단계에 따라 boxes의 위치를 조정한다:
cue의 WebVTT cue snap-to-lines flag가 true인 경우
이 알고리즘의 많은 단계는 WebVTT cue writing direction에 따라 달라진다. "Horizontal"로 표시된 단계는 WebVTT cue writing direction이 horizontal일 때만 따라야 하며, "Vertical"로 표시된 단계는 WebVTT cue writing direction이 vertical growing left 또는 vertical growing right 중 하나일 때 따라야 한다. "Vertical Growing Left"로 표시된 단계는 WebVTT cue writing direction이 vertical growing left일 때만 따라야 하며, "Vertical Growing Right"로 표시된 단계는 WebVTT cue writing direction이 vertical growing right일 때만 따라야 한다.
1. Horizontal: full dimension을 video의 렌더링 영역의 height로 둔다.
  
  Vertical: full dimension을 video의 렌더링 영역의 width로 둔다.
2. Horizontal: step을 boxes 안 첫 번째 line box의 height로 둔다.
  
  Vertical: step을 boxes 안 첫 번째 line box의 width로 둔다.
3. step이 0이면, 아래의 done positioning으로 표시된 단계로 이동한다.
4. line을 cue의 computed line으로 둔다.
5. line에 0.5를 더한 뒤 floor하여 정수로 반올림한다.
6. Vertical Growing Left: line에 1을 더한 뒤 부호를 반전한다.
7. position을 step과 line을 곱한 결과로 둔다.
8. Vertical Growing Left: position을 boxes 안의 box들의 bounding box width만큼 감소시킨 다음, position을 step만큼 증가시킨다.
9. line이 0보다 작으면 position을 max dimension만큼 증가시키고, step의 부호를 반전한다.
10. Horizontal: boxes 안의 모든 box를 position이 나타내는 거리만큼 아래로 이동한다.
  
  Vertical: boxes 안의 모든 box를 position이 나타내는 거리만큼 오른쪽으로 이동한다.
11. boxes 안의 모든 box의 위치를 그들의 specified position으로 기억한다.
12. title area를 video의 렌더링 영역 전체를 덮는 box로 둔다.
13. Step loop: boxes 안의 어떤 box도 output 안의 어떤 box와도 겹치지 않고, boxes 안의 모든 box가 title area box 안에 완전히 있으면, 아래의 done positioning으로 표시된 단계로 이동한다.
14. Horizontal: step이 음수이고 boxes 안 첫 번째 line box의 top이 이제 title area의 top보다 위에 있거나, step이 양수이고 boxes 안 첫 번째 line box의 bottom이 이제 title area의 bottom보다 아래에 있으면, switch direction으로 표시된 단계로 이동한다.
  
  Vertical: step이 음수이고 boxes 안 첫 번째 line box의 left edge가 이제 title area의 left edge보다 왼쪽에 있거나, step이 양수이고 boxes 안 첫 번째 line box의 right edge가 이제 title area의 right edge보다 오른쪽에 있으면, switch direction으로 표시된 단계로 이동한다.
15. Horizontal: boxes 안의 모든 box를 step이 나타내는 거리만큼 아래로 이동한다. (step이 음수이면, 이는 실제로 절대적인 의미에서 box를 위쪽으로 이동시키는 결과가 된다.)
  
  Vertical: boxes 안의 모든 box를 step이 나타내는 거리만큼 오른쪽으로 이동한다. (step이 음수이면, 이는 실제로 절대적인 의미에서 box를 왼쪽으로 이동시키는 결과가 된다.)
16. step loop로 표시된 단계로 되돌아간다.
17. Switch direction: switched가 true이면, boxes 안의 모든 box를 제거하고, 아래의 done positioning으로 표시된 단계로 이동한다.
18. 그렇지 않으면, 이전 단계에서 결정한 specified position으로 boxes 안의 모든 box를 되돌린다.
19. step의 부호를 반전한다.
20. switched를 true로 설정한다.
21. step loop로 표시된 단계로 되돌아간다.
cue의 WebVTT cue snap-to-lines flag가 false인 경우
1. bounding box를 boxes 안 box들의 bounding box로 둔다.
2. 다음 목록의 적절한 단계를 실행한다:
  
  WebVTT cue writing direction이 horizontal인 경우
  
  WebVTT cue line alignment가 center alignment인 경우
  
  boxes 안의 모든 box를 bounding box height의 절반만큼 위로 이동한다.
  
  WebVTT cue line alignment가 end alignment인 경우
  
  boxes 안의 모든 box를 bounding box의 height만큼 위로 이동한다.
  
  WebVTT cue writing direction이 vertical growing left 또는 vertical growing right인 경우
  
  WebVTT cue line alignment가 center alignment인 경우
  
  boxes 안의 모든 box를 bounding box width의 절반만큼 왼쪽으로 이동한다.
  
  WebVTT cue line alignment가 end alignment인 경우
  
  boxes 안의 모든 box를 bounding box의 width만큼 왼쪽으로 이동한다.
3. boxes 안의 어떤 box도 output 안의 어떤 box와도 겹치지 않고, boxes 안의 모든 box가 video의 렌더링 영역 안에 있으면, 아래의 done positioning으로 표시된 단계로 이동한다.
4. boxes 안의 box들이 서로에 대해 가지는 상대적 위치를 유지하면서 boxes 안의 어떤 box도 output 안의 어떤 box와도 겹치지 않고, boxes 안의 모든 box가 video의 렌더링 영역 안에 있도록 boxes 안의 box들을 이동할 수 있는 위치가 있으면, boxes 안의 box들을 현재 위치에서 가장 가까운 그러한 위치로 이동한 다음, 아래의 done positioning으로 표시된 단계로 이동한다. 현재 위치에서 등거리에 있는 그러한 위치가 여러 개 있으면, 그중 가장 높은 것을 사용한다. 그 높이에 여러 개가 있으면, 그중 가장 왼쪽 것을 사용한다.
5. 그렇지 않으면, 아래의 done positioning으로 표시된 단계로 이동한다. (box들은 안타깝게도 겹치게 된다.)
Done positioning: boxes를 반환한다.

7.3. CSS box 얻기

위 처리 알고리즘이 사용자 에이전트에게 boxes CSS box 집합을 얻을 것을 요구할 때, 다음 제약 조건 안에서 CSS 명세의 용어를 nodes에 적용한다: [CSS22]

document tree는 nodes를 root로 하는 WebVTT Node Objects의 트리이다.
WebVTT file의 STYLE block 안 selector의 목적상, style sheet는 명시적 이름, namespace, attribute, class, ID가 없고 주 언어를 알 수 없는 단일 빈 element를 포함하는 가상 문서에 적용되어야 하며, 이 element는 주어진 WebVTT file에서 온 text track을 위한 media element처럼 동작한다. selector는 같은 media element에 대한 다른 text track과 match해서는 안 된다. 이 가상 문서에서, 그 element는 element 자체와 match할 selector와 match해서는 안 된다.

이 element는 ::cue, ::cue(), ::cue-region 및 ::cue-region() pseudo-element를 위한 originating element가 되기 위해서만 존재한다.
WebVTT file의 STYLE block 안 declaration의 cascade를 결정하기 위한 목적상, style sheet의 상대적 출현 순서는 그것들이 컬렉션에 추가된 순서와 같아야 하며, 그 컬렉션의 출현 순서는 관련 video element의 document에 적용되는 모든 style sheet 뒤에 와야 한다.
예를 들어, 다음과 같은 (유효하지 않은) HTML document가 주어졌다고 하자:
```
<!doctype html>
<title>Invalid cascade example</title>
<video controls autoplay src="video.webm">
 <track default src="track.vtt">
</video>
<style>
 ::cue { color:red }
</style>
```
...그리고 "track.vtt" file이 다음을 포함한다고 하자:
```
WEBVTT

STYLE
::cue { color:lime }

00:00:00.000 --> 00:00:25.000
Red or green?
```
color:lime declaration이 이긴다. 이는 cascade에서 마지막이기 때문이다. 비록 style element가 document order에서 video element 뒤에 있더라도 그렇다.
WebVTT file의 STYLE block 안 URL 또는 WebVTT file의 STYLE block에서 참조된 resource 안의 어떤 URL을 resolve하기 위한 목적상, URL의 scheme이 "data"가 아니면, 사용자 에이전트는 그 URL이 resolve에 실패한 것처럼 동작해야 한다.

@import 또는 background-image를 통해 외부 resource를 지원하는 것은, 사용자가 video를 시청하는 동안 media element와 track element가 network request를 발행할 수 있게 하는 새로운 능력이 되며, 이는 privacy issue가 될 수 있다.
CSS 명세에 의한 처리 목적상, WebVTT Internal Node Objects는 동일한 contents를 가진 element와 동등하다.
CSS 명세에 의한 처리 목적상, WebVTT Text Objects는 Text node와 동등하다.
nodes와 연결된 style sheet는 없다. (nodes는 box가 생성된 뒤 아래에 설명된 대로 style sheet를 사용하여 다시 style된다.)
nodes의 자식들은 display property의 값이 inline인 anonymous box로 감싸져야 한다. 이것이 WebVTT cue background box이다.
WebVTT Ruby Objects의 자식 중 WebVTT Ruby Text Objects가 아닌 것들의 run은 display property의 값이 ruby-base인 anonymous box로 감싸져야 한다. [CSS3-RUBY]
WebVTT Node Objects의 property는 다음 절에 정의된 대로 값이 설정된다. (그 절은 이 알고리즘에서 앞서 계산된 일부 변수의 값을 사용한다.)
Text run은 CSS line-wrapping 규칙에 따라 감싸져야 한다.
video viewport(및 initial containing block)는 video의 렌더링 영역이다.

boxes를 initial containing block의 descendant로 생성된 box와 그 위치로 둔다.

7.4. WebVTT Node Objects에 CSS property 적용하기

WebVTT text track의 표시를 업데이트하기 위한 규칙을 따를 때, 사용자 에이전트는 이 절에 정의된 대로 CSS user agent cascade layer에서 WebVTT Node Objects의 property를 설정해야 한다. [CSS22]

(root) list of WebVTT Node Objects를 다음 CSS setting으로 초기화한다:

position property는 absolute로 설정되어야 한다
unicode-bidi property는 plaintext로 설정되어야 한다
writing-mode property는 writing-mode로 설정되어야 한다
top property는 top으로 설정되어야 한다
left property는 left로 설정되어야 한다
width property는 width로 설정되어야 한다
height property는 height로 설정되어야 한다
overflow-wrap property는 break-word로 설정되어야 한다
text-wrap property는 balance로 설정되어야 한다 [CSS-TEXT-4]

변수 writing-mode, top, left, width 및 height는 list of WebVTT Node Objects가 그 text에서 구성된 WebVTT cue에 대해 WebVTT text track의 표시를 업데이트하기 위한 규칙에 의해 결정된 같은 이름의 값이다.

(root) list of WebVTT Node Objects의 text-align property는 아래 표에서 첫 번째 셀이 대응하는 cue의 WebVTT cue text alignment 값인 행의 두 번째 셀에 있는 값으로 설정되어야 한다:

WebVTT cue text alignment	text-align 값
Start alignment	start
Center alignment	center
End alignment	end
Left alignment	left
Right alignment	right

(root) list of WebVTT Node Objects의 font shorthand property는 5vh sans-serif로 설정되어야 한다. [CSS-VALUES]

(root) list of WebVTT Node Objects의 color property는 rgba(255,255,255,1)로 설정되어야 한다. [CSS3-COLOR]

WebVTT cue background box 및 WebVTT Ruby Text Objects의 background shorthand property는 rgba(0,0,0,0.8)로 설정되어야 한다. [CSS3-COLOR]

(root) list of WebVTT Node Objects의 white-space property는 pre-line로 설정되어야 한다. [CSS22]

WebVTT Italic Objects의 font-style property는 italic로 설정되어야 한다.

WebVTT Bold Objects의 font-weight property는 bold로 설정되어야 한다.

WebVTT Underline Objects의 text-decoration property는 underline으로 설정되어야 한다.

WebVTT Ruby Objects의 display property는 ruby로 설정되어야 한다. [CSS3-RUBY]

WebVTT Ruby Text Objects의 display property는 ruby-text로 설정되어야 한다. [CSS3-RUBY]

모든 WebVTT region object는 다음 CSS setting으로 초기화된다:

position property는 absolute로 설정되어야 한다
writing-mode property는 horizontal-tb로 설정되어야 한다
background shorthand property는 rgba(0,0,0,0.8)로 설정되어야 한다
overflow-wrap property는 break-word로 설정되어야 한다
font shorthand property는 5vh sans-serif로 설정되어야 한다
color property는 rgba(255,255,255,1)로 설정되어야 한다
overflow property는 hidden으로 설정되어야 한다
width property는 width로 설정되어야 한다
min-height property는 0px로 설정되어야 한다
max-height property는 height로 설정되어야 한다
left property는 left로 설정되어야 한다
top property는 top으로 설정되어야 한다
display property는 inline-flex로 설정되어야 한다
flex-flow property는 column으로 설정되어야 한다
justify-content property는 flex-end로 설정되어야 한다

변수 width, height, top 및 left는 WebVTT region object가 구성된 WebVTT region에 대해 WebVTT text track의 표시를 업데이트하기 위한 규칙에 의해 결정된 같은 이름의 값이다.

모든 WebVTT region object의 자식들은 다음 CSS setting으로 추가로 초기화된다:

position property는 relative로 설정되어야 한다
unicode-bidi property는 plaintext로 설정되어야 한다
width property는 auto로 설정되어야 한다
height property는 height로 설정되어야 한다
left property는 left로 설정되어야 한다
text-align property는 region의 일부가 아닌 root List of WebVTT Node Objects에 대해 설명된 대로 설정되어야 한다

다른 모든 non-inherited property는 초기값으로 설정되어야 한다. root list of WebVTT Node Objects의 inherited property는, 존재하는 경우 WebVTT cue가 렌더링되는 media element로부터 그 값을 inherit해야 한다. media element가 없으면(즉, text track이 다른 media playback mechanism을 위해 렌더링되는 경우), root list of WebVTT Node Objects와 WebVTT region objects의 inherited property는 초기값을 가져야 한다.

media element 또는 다른 playback mechanism에 적용되는 style sheet가 있으면, 이는 다음 절에 정의된 대로 해석되어야 한다.

8. CSS 확장

이 절은 일부 CSS pseudo-element 및 pseudo-class와 이들이 WebVTT에 적용되는 방식을 명시한다. 이 절은 CSS를 지원하지 않는 사용자 에이전트에는 적용되지 않는다.

8.1. 소개

이 절은 비규범적이다.

::cue pseudo-element는 cue를 나타낸다.

::cue(selector) pseudo-element는 주어진 selector와 match하는 cue 또는 cue 내부의 element를 나타낸다.

::cue-region pseudo-element는 region을 나타낸다.

::cue-region(selector) pseudo-element는 주어진 selector와 match하는 region 또는 region 내부의 element를 나타낸다.

다른 모든 pseudo-element와 마찬가지로, 이러한 pseudo-element는 video element의 document tree에 직접 존재하지 않는다.

:past 및 :future pseudo-class는 ::cue(selector) 안에서 WebVTT Internal Node Objects를 current playback position에 기반하여 match하는 데 사용할 수 있다.

다음 표는 주어진 selector로 선택할 수 있는 것의 예와, 관련 object를 생성하는 WebVTT 구문을 함께 보여준다.

Selector (CSS 구문 예제)	Match 대상 (WebVTT 구문 예제)
::cue video::cue { color: yellow; }	모든 list of WebVTT Node Objects. WEBVTT 00:00:00.000 --> 00:00:08.000 Yellow! 00:00:08.000 --> 00:00:16.000 Also yellow!
ID selector in ::cue() video::cue(#cue1) { color: yellow; }	cue의 text track cue identifier가 주어진 ID와 match하는 모든 list of WebVTT Node Objects. WEBVTT cue1 00:00:00.000 --> 00:00:08.000 Yellow!
Type selector 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 Internal Node Objects. 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>
Universal selector in ::cue() video::cue(*:not(:root)) { color: yellow; }	모든 WebVTT Internal Node Objects WEBVTT 00:00:00.000 --> 00:00:08.000 White! <c>Yellow!</c> <i>Yellow!</i> <u>Yellow!</u>
Class selector in ::cue() video::cue(.loud) { color: yellow; }	주어진 applicable classes를 가진 WebVTT Internal Node Objects (root list of WebVTT Node Objects 제외). 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>
Attribute selector 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"의 경우, 주어진 applicable language를 가진 root list of WebVTT Node Objects 또는 WebVTT Language Object; "voice"의 경우, 주어진 voice를 가진 WebVTT Voice Object. 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> applicable language는 list of WebVTT Node Objects에 대해 HTML의 `srclang` attribute로 설정할 수 있다. <video ...> <track src="example-attr.vtt" srclang="en-US" default> </video>
:lang() pseudo-class in ::cue() video::cue(:lang(en)) { color: yellow; } video::cue(:lang(en-GB)) { color: cyan; }	주어진 language range와 match하는 applicable language를 가진 WebVTT Internal Node Objects. WEBVTT 00:00:00.000 --> 00:00:08.000 Yellow! 00:00:08.000 --> 00:00:16.000 <lang en-GB>Cyan!</lang> 위와 같이, applicable language는 list of WebVTT Node Objects에 대해 HTML의 `srclang` attribute로 설정할 수 있다.
:past 및 :future pseudo-class in ::cue() video::cue(:past) { color: yellow; } video::cue(:future) { color: cyan; }	WebVTT Timestamp Objects를 가진 cue에서, WebVTT Internal Node Objects는 current playback position에 따라 달라진다. 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; }	모든 region (WebVTT region objects 목록). 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 selector in ::cue-region() video::cue-region(#scroll) { color: cyan; }	주어진 ID와 match하는 WebVTT region identifier를 가진 모든 region (WebVTT region objects 목록). 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 text track의 표시를 업데이트하기 위한 규칙에 따라 하나 이상의 WebVTT cues를 렌더링할 때, 렌더링에 사용되는 list of WebVTT Node Objects 안의 WebVTT Node Objects는 아래에 정의된 특정 pseudo-selector와 match할 수 있다. 이러한 selector는 WebVTT text track의 표시를 업데이트하기 위한 규칙의 적용 사이에서도(이는 활성 cue 집합이 변경될 때만 실행된다), WebVTT Node Objects 개별 항목과 match하기 시작하거나 중단할 수 있다. 아래에 설명된 pseudo-element를 지원하는 사용자 에이전트는 그에 따라 렌더링을 동적으로 업데이트해야 한다. white-space 또는 font shorthand에 대응하는 property 중 하나(line-height 포함)의 값이 변경되면, WebVTT cue의 text track cue display state는 비워져야 하며, text track의 text track rendering을 업데이트하기 위한 규칙이 즉시 다시 실행되어야 한다.

Pseudo-element는 selector와 match된 element에 적용된다. 이 절의 목적상, 그 element는 matched element이다. 다음 절에서 정의하는 pseudo-element는 matched element를 위해 렌더링되는 WebVTT cues의 일부 스타일링에 영향을 준다.

matched element가 video element가 아니면, 아래에 정의된 pseudo-element는 이 명세에 따라 아무 효과도 갖지 않는다.

text tracks 모델을 구현하는 CSS 사용자 에이전트는 ::cue, ::cue(selector), ::cue-region 및 ::cue-region(selector) pseudo-element와, :past 및 :future pseudo-class를 구현해야 한다.

8.2.1. ::cue pseudo-element

::cue pseudo-element(인수가 없음)는 matched element에 대해 구성된 모든 list of WebVTT Node Objects와 match한다. 단, background shorthand에 대응하는 property는 list of WebVTT Node Objects가 아니라 WebVTT cue background box에 적용되어야 한다.

다음 property는 인수가 없는 ::cue pseudo-element에 적용된다. pseudo-element에 설정된 다른 property는 무시되어야 한다:

color
opacity
visibility
text-decoration shorthand에 대응하는 property
text-shadow
background shorthand에 대응하는 property
outline shorthand에 대응하는 property
font shorthand에 대응하는 property(line-height 포함)
white-space
text-combine-upright
ruby-position

::cue(selector) pseudo-element는 인수를 가지며, 그 인수는 CSS selector로 구성되어야 한다 [SELECTORS4]. 이는 matched element에 대해 구성되고, 또한 주어진 CSS selector와 match하는 모든 WebVTT Internal Node Object와 match한다. 이때 node는 다음과 같이 처리된다:

selector가 match되는 document tree는 cue에 대한 list of WebVTT Node Objects를 root로 하는 WebVTT Node Objects의 트리이다.
WebVTT Internal Node Objects는 트리 안의 element이다.
WebVTT Leaf Node Objects는 match될 수 없다.

element type selector의 목적상, WebVTT Internal Node Objects의 이름은 다음 표에 주어진 것과 같다. 첫 번째 열의 셀에 주어진 concrete class를 가진 object는 같은 행의 두 번째 열에 주어진 이름을 가진다:

Concrete class	이름
WebVTT Class Objects	`c`
WebVTT Italic Objects	`i`
WebVTT Bold Objects	`b`
WebVTT Underline Objects	`u`
WebVTT Ruby Objects	`ruby`
WebVTT Ruby Text Objects	`rt`
WebVTT Voice Objects	`v`
WebVTT Language Objects	`lang`
그 밖의 element(구체적으로는 lists of WebVTT Node Objects)	명시적 이름 없음.

element type selector 및 universal selector의 목적상, WebVTT Internal Node Objects는 빈 문자열로 표현되는 namespace 안에 있는 것으로 간주된다.
universal selector는 root list of WebVTT Node Objects를 포함한 모든 WebVTT Internal Node Objects와 match한다.
::cue(:root)는 ::cue와 동등하다.
attribute selector matching의 목적상, WebVTT Internal Node Objects는 attribute를 갖지 않는다. 단, WebVTT Voice Objects는 "voice"라는 이름의 단일 attribute를 가지며, 그 값은 WebVTT Voice Object의 값이다. WebVTT Language Objects는 "lang"이라는 이름의 단일 attribute를 가지며, 그 값은 object의 applicable language이다. 비어 있지 않은 applicable language를 가진 lists of WebVTT Node Objects는 "lang"이라는 이름의 단일 attribute를 가지며, 그 값은 object의 applicable language이다.
class selector matching의 목적상, WebVTT Internal Node Objects는 WebVTT Node Object’s applicable classes로 설명된 class를 가진다.
:lang() pseudo-class의 목적상, WebVTT Internal Node Objects는 WebVTT Node Object’s applicable language로 설명된 language를 가진다.
ID selector matching의 목적상, lists of WebVTT Node Objects는 cue의 text track cue identifier가 있으면 그 ID를 가진다.

다음 property는 인수를 가진 ::cue() pseudo-element에 적용된다:

color
opacity
visibility
text-decoration shorthand에 대응하는 property
text-shadow
background shorthand에 대응하는 property
outline shorthand에 대응하는 property
transition 및 animation 기능과 관련된 property

또한 selector가 :past 및 :future pseudo-class를 포함하지 않는 경우, 다음 property는 인수를 가진 ::cue() pseudo-element에 적용된다:

font shorthand에 대응하는 property(line-height 포함)
white-space
text-combine-upright
ruby-position

적용되지 않는 property는 무시되어야 한다.

특별한 예외로, background shorthand에 대응하는 property가 list of WebVTT Node Objects에 적용되었을 상황에서는, 대신 WebVTT cue background box에 적용되어야 한다.

8.2.2. :past 및 :future pseudo-class

:past 및 :future pseudo-class는 때때로 WebVTT Node Objects와 match한다. [SELECTORS4]

:past pseudo-class는 in the past인 WebVTT Node Objects와만 match한다.

WebVTT Node Object c는 다음 경우 in the past이다. WebVTT cue의 list of WebVTT Node Objects를 pre-order, depth-first traversal한 결과에서, media element인 matched element의 current playback position보다 값이 작은 WebVTT Timestamp Object가 WebVTT Node Object c 전체보다 뒤에 존재하는 경우이다.

:future pseudo-class는 in the future인 WebVTT Node Objects와만 match한다.

WebVTT Node Object c는 다음 경우 in the future이다. WebVTT cue의 list of WebVTT Node Objects를 pre-order, depth-first traversal한 결과에서, media element인 matched element의 current playback position보다 값이 큰 WebVTT Timestamp Object가 WebVTT Node Object c 전체보다 앞에 존재하는 경우이다.

8.2.3. ::cue-region pseudo-element

Pseudo-element는 selector와 match된 element에 적용된다. 이 절의 목적상, 그 element는 matched element이다. 아래에 정의된 pseudo-element는 matched element를 위해 렌더링되는 text track region의 스타일링에 영향을 준다.

matched element가 video element가 아니면, 아래에 정의된 pseudo-element는 이 명세에 따라 아무 효과도 갖지 않는다.

::cue-region pseudo-element(인수가 없음)는 matched element에 대해 구성된 모든 WebVTT region objects 목록과 match한다.

::cue-region(selector) pseudo-element는 인수를 가지며, 그 인수는 CSS selector로 구성되어야 한다 [SELECTORS4]. 이는 matched element에 대해 구성되고, 다음과 같이 주어진 CSS selector와도 match하는 모든 WebVTT region objects 목록과 match한다:

주어진 ID와 match하는 WebVTT region identifier를 가진 모든 region (WebVTT region objects 목록).

::cue-region(selector)에 대해서는 다른 selector matching이 정의되지 않는다.

::cue에 적용되는 것과 동일한 property가 ::cue-region pseudo-element에 적용된다. pseudo-element에 설정된 다른 property는 무시되어야 한다.

사용자 에이전트가 WebVTT text track의 표시를 업데이트하기 위한 규칙에 따라 하나 이상의 text track region을 렌더링할 때, 렌더링에 사용되는 WebVTT region objects는 위 pseudo-element와 match할 수 있다. pseudo-element를 지원하는 사용자 에이전트는 그에 따라 렌더링을 동적으로 업데이트해야 한다. white-space 또는 font shorthand에 대응하는 property 중 하나(line-height 포함)의 값이 변경되면, region 안의 모든 WebVTT cues의 text track cue display state는 비워져야 하며, text track의 text track rendering을 업데이트하기 위한 규칙이 즉시 다시 실행되어야 한다.

9. API

9.1. `VTTCue` interface

다음 interface는 DOM API에서 WebVTT cue를 expose하는 데 사용된다:

enum AutoKeyword { "auto" };
typedef (double or AutoKeyword) LineAndPositionSetting;
enum DirectionSetting { "" /* horizontal */, "rl", "lr" };
enum LineAlignSetting { "start", "center", "end" };
enum PositionAlignSetting { "line-left", "center", "line-right", "auto" };
enum AlignSetting { "start", "center", "end", "left", "right" };
[Exposed=Window]
interface VTTCue : TextTrackCue {
  constructor(double startTime, unrestricted double endTime, DOMString text);
  attribute VTTRegion? region;
  attribute DirectionSetting vertical;
  attribute boolean snapToLines;
  attribute LineAndPositionSetting line;
  attribute LineAlignSetting lineAlign;
  attribute LineAndPositionSetting position;
  attribute PositionAlignSetting positionAlign;
  attribute double size;
  attribute AlignSetting align;
  attribute DOMString text;
  DocumentFragment getCueAsHTML();
};

cue = new VTTCue( startTime, endTime, text )

addCue() method와 함께 사용할 새 VTTCue object를 반환한다.

startTime argument는 text track cue start time을 설정한다.

endTime argument는 text track cue end time을 설정한다. 값이 positive Infinity인 경우, VTTCue object는 unbounded text track cue를 나타낸다.

text argument는 cue text를 설정한다.

cue . region

이 cue가 속한 VTTRegion object가 있으면 이를 반환하고, 그렇지 않으면 null을 반환한다.

설정할 수 있다.

cue . vertical [ = value ]

WebVTT cue writing direction을 나타내는 문자열을 다음과 같이 반환한다:

horizontal인 경우: 빈 문자열.
vertical growing left인 경우: 문자열 "rl".
vertical growing right인 경우: 문자열 "lr".

설정할 수 있다.

cue . snapToLines [ = value ]

WebVTT cue snap-to-lines flag가 true이면 true를, 그렇지 않으면 false를 반환한다.

설정할 수 있다.

cue . line [ = value ]

WebVTT cue line을 반환한다. 값이 auto인 경우에는 문자열 "auto"가 반환된다.

설정할 수 있다.

cue . lineAlign [ = value ]

WebVTT cue line alignment를 나타내는 문자열을 다음과 같이 반환한다:

start alignment인 경우: 문자열 "start".
center alignment인 경우: 문자열 "center".
end alignment인 경우: 문자열 "end".

설정할 수 있다.

cue . position [ = value ]

WebVTT cue position을 반환한다. 값이 auto인 경우에는 문자열 "auto"가 반환된다.

설정할 수 있다.

cue . positionAlign [ = value ]

WebVTT cue position alignment를 나타내는 문자열을 다음과 같이 반환한다:

line-left alignment인 경우: 문자열 "line-left".
center alignment인 경우: 문자열 "center".
line-right alignment인 경우: 문자열 "line-right".
automatic alignment인 경우: 문자열 "auto".

설정할 수 있다.

cue . size [ = value ]

WebVTT cue size를 반환한다.

설정할 수 있다.

cue . align [ = value ]

WebVTT cue text alignment를 나타내는 문자열을 다음과 같이 반환한다:

start alignment인 경우: 문자열 "start".
center alignment인 경우: 문자열 "center".
end alignment인 경우: 문자열 "end".
left alignment인 경우: 문자열 "left".
right alignment인 경우: 문자열 "right".

설정할 수 있다.

cue . text [ = value ]

cue text를 raw unparsed form으로 반환한다.

설정할 수 있다.

fragment = cue . getCueAsHTML()

cue text를 HTML elements 및 다른 DOM node들의 DocumentFragment로 반환한다.

VTTCue(startTime, endTime, text) constructor는 호출될 때 다음 단계를 실행해야 한다:

새 WebVTT cue를 생성한다. cue를 그 WebVTT cue로 둔다.
cue의 text track cue start time을 startTime argument의 값으로 둔다.
endTime argument의 값이 negative Infinity 또는 Not-a-Number (NaN) 값이면, TypeError exception을 throw한다. 그렇지 않으면, cue의 text track cue end time을 endTime argument의 값으로 둔다.
cue의 cue text를 text argument의 값으로 두고, chapter title을 추출하기 위한 규칙을 chapter title을 추출하기 위한 WebVTT 규칙으로 둔다.
cue의 text track cue identifier를 빈 문자열로 둔다.
cue의 text track cue pause-on-exit flag를 false로 둔다.
cue의 WebVTT cue region을 null로 둔다.
cue의 WebVTT cue writing direction을 horizontal로 둔다.
cue의 WebVTT cue snap-to-lines flag를 true로 둔다.
cue의 WebVTT cue line을 auto로 둔다.
cue의 WebVTT cue line alignment를 start alignment로 둔다.
cue의 WebVTT cue position을 auto로 둔다.
cue의 WebVTT cue position alignment를 auto로 둔다.
cue의 WebVTT cue size를 100으로 둔다.
cue의 WebVTT cue text alignment를 center alignment로 둔다.
cue를 나타내는 VTTCue object를 반환한다.

region attribute는 getting 시, VTTRegion object가 나타내는 WebVTT cue region이 있으면, VTTCue object가 나타내는 WebVTT cue의 해당 region을 나타내는 object를 반환해야 하며, 그렇지 않으면 null을 반환해야 한다. setting 시, WebVTT cue region은 새 값으로 설정되어야 한다.

vertical attribute는 getting 시, VTTCue object가 나타내는 WebVTT cue의 WebVTT cue writing direction이 아래 표의 첫 번째 셀인 행의 두 번째 셀에 있는 문자열을 반환해야 한다:

WebVTT cue writing direction	`vertical` value
Horizontal	"" (빈 문자열)
Vertical growing left	"`rl`"
Vertical growing right	"`lr`"

setting 시, WebVTT cue writing direction은 위 표에서 두 번째 셀이 새 값에 대해 case-sensitive match인 행의 첫 번째 셀에 주어진 값으로 설정되어야 한다.

snapToLines attribute는 getting 시, VTTCue object가 나타내는 WebVTT cue의 WebVTT cue snap-to-lines flag가 true이면 true를, 그렇지 않으면 false를 반환해야 한다. setting 시, WebVTT cue snap-to-lines flag는 새 값으로 설정되어야 한다.

line attribute는 getting 시, VTTCue object가 나타내는 WebVTT cue의 WebVTT cue line을 반환해야 한다. 특수 값 auto는 문자열 "auto"로 표현되어야 한다. setting 시 WebVTT cue line은 새 값으로 설정되어야 한다. 새 값이 문자열 "auto"이면, 이는 특수 값 auto로 해석되어야 한다.

snapToLines 및 line attribute를 어떤 순서로도 설정할 수 있도록 하기 위해, API는 snapToLines를 false로 설정할 때 line이 0..100 범위 밖의 값을 가지거나, 그 반대인 경우에도 이를 reject하지 않는다.

lineAlign attribute는 getting 시, VTTCue object가 나타내는 WebVTT cue의 WebVTT cue line alignment가 아래 표의 첫 번째 셀인 행의 두 번째 셀에 있는 문자열을 반환해야 한다:

WebVTT cue line alignment	`lineAlign` value
Start alignment	"`start`"
Center alignment	"`center`"
End alignment	"`end`"

setting 시, WebVTT cue line alignment은 위 표에서 두 번째 셀이 새 값에 대해 case-sensitive match인 행의 첫 번째 셀에 주어진 값으로 설정되어야 한다.

position attribute는 getting 시, VTTCue object가 나타내는 WebVTT cue의 WebVTT cue position을 반환해야 한다. 특수 값 auto는 문자열 "auto"로 표현되어야 한다. setting 시, 새 값이 음수이거나 100보다 크면 IndexSizeError exception이 throw되어야 한다. 그렇지 않으면, WebVTT cue position은 새 값으로 설정되어야 한다. 새 값이 문자열 "auto"이면, 이는 특수 값 auto로 해석되어야 한다.

positionAlign attribute는 getting 시, VTTCue object가 나타내는 WebVTT cue의 WebVTT cue position alignment가 아래 표의 첫 번째 셀인 행의 두 번째 셀에 있는 문자열을 반환해야 한다:

WebVTT cue position alignment	`positionAlign` value
Line-left alignment	"`line-left`"
Center alignment	"`center`"
Line-right alignment	"`line-right`"
Automatic alignment	"`auto`"

setting 시, WebVTT cue position alignment은 위 표에서 두 번째 셀이 새 값에 대해 case-sensitive match인 행의 첫 번째 셀에 주어진 값으로 설정되어야 한다.

size attribute는 getting 시, VTTCue object가 나타내는 WebVTT cue의 WebVTT cue size를 반환해야 한다. setting 시 새 값이 음수이거나 100보다 크면 IndexSizeError exception이 throw되어야 한다. 그렇지 않으면, WebVTT cue size는 새 값으로 설정되어야 한다.

align attribute는 getting 시, VTTCue object가 나타내는 WebVTT cue의 WebVTT cue text alignment가 아래 표의 첫 번째 셀인 행의 두 번째 셀에 있는 문자열을 반환해야 한다:

WebVTT cue text alignment	`align` value
Start alignment	"`start`"
Center alignment	"`center`"
End alignment	"`end`"
Left alignment	"`left`"
Right alignment	"`right`"

setting 시, WebVTT cue text alignment는 위 표에서 두 번째 셀이 새 값에 대해 case-sensitive match인 행의 첫 번째 셀에 주어진 값으로 설정되어야 한다.

text attribute는 getting 시, VTTCue object가 나타내는 WebVTT cue의 raw cue text를 반환해야 한다. setting 시 cue text는 새 값으로 설정되어야 한다.

getCueAsHTML() method는 entry settings object에 의해 지정된 responsible document에 대한 DocumentFragment로 cue text를 변환해야 한다. 이는 cue text에 WebVTT cue text parsing rules를 적용한 결과에 WebVTT cue text DOM construction rules를 적용하여 수행한다.

getCueAsHTML()에는 fallback language가 제공되지 않는다. DocumentFragment는 language 정보를 expose할 수 없기 때문이다.

9.2. `VTTRegion` interface

다음 interface는 DOM API에서 WebVTT region을 expose하는 데 사용된다:

enum ScrollSetting { "" /* none */, "up" };
[Exposed=Window]
interface VTTRegion {
  constructor();
  attribute DOMString id;
  attribute double width;
  attribute unsigned long lines;
  attribute double regionAnchorX;
  attribute double regionAnchorY;
  attribute double viewportAnchorX;
  attribute double viewportAnchorY;
  attribute ScrollSetting scroll;
};

region = new VTTRegion()

새 VTTRegion object를 반환한다.

region . id

text track region identifier를 반환한다. 설정할 수 있다.

region . width

WebVTT region width를 비디오 너비의 백분율로 반환한다. 설정할 수 있다. 새 값이 0..100 범위 안에 없으면 IndexSizeError를 throw한다.

region . lines

text track region height를 줄 수로 반환한다. 설정할 수 있다. 새 값이 음수이면 IndexSizeError를 throw한다.

region . regionAnchorX

WebVTT region anchor X offset을 region width의 백분율로 반환한다. 설정할 수 있다. 새 값이 0..100 범위 안에 없으면 IndexSizeError를 throw한다.

region . regionAnchorY

WebVTT region anchor Y offset을 region height의 백분율로 반환한다. 설정할 수 있다. 새 값이 0..100 범위 안에 없으면 IndexSizeError를 throw한다.

region . viewportAnchorX

WebVTT region viewport anchor X offset을 비디오 너비의 백분율로 반환한다. 설정할 수 있다. 새 값이 0..100 범위 안에 없으면 IndexSizeError를 throw한다.

region . viewportAnchorY

WebVTT region viewport anchor Y offset을 비디오 높이의 백분율로 반환한다. 설정할 수 있다. 새 값이 0..100 범위 안에 없으면 IndexSizeError를 throw한다.

region . scroll

WebVTT region scroll을 나타내는 문자열을 다음과 같이 반환한다:

unset인 경우: 빈 문자열.
up인 경우: 문자열 "up".

설정할 수 있다.

VTTRegion() constructor는 호출될 때 다음 단계를 실행해야 한다:

새 WebVTT region을 생성한다. region을 그 WebVTT region으로 둔다.
region의 WebVTT region identifier를 빈 문자열로 둔다.
region의 WebVTT region width를 100으로 둔다.
region의 WebVTT region lines를 3으로 둔다.
region의 text track region regionAnchorX를 0으로 둔다.
region의 text track region regionAnchorY를 100으로 둔다.
region의 text track region viewportAnchorX를 0으로 둔다.
region의 text track region viewportAnchorY를 100으로 둔다.
region의 WebVTT region scroll을 빈 문자열로 둔다.
region을 나타내는 VTTRegion object를 반환한다.

id attribute는 getting 시, VTTRegion object가 나타내는 WebVTT region의 WebVTT region identifier를 반환해야 한다. setting 시, WebVTT region identifier는 새 값으로 설정되어야 한다.

width attribute는 getting 시, VTTRegion object가 나타내는 WebVTT region의 WebVTT region width를 반환해야 한다. setting 시, 새 값이 음수이거나 100보다 크면 IndexSizeError exception이 throw되어야 한다. 그렇지 않으면, WebVTT region width는 새 값으로 설정되어야 한다.

lines attribute는 getting 시, VTTRegion object가 나타내는 WebVTT region의 WebVTT region lines를 반환해야 한다. setting 시, WebVTT region lines는 새 값으로 설정되어야 한다.

regionAnchorX attribute는 getting 시, VTTRegion object가 나타내는 WebVTT region의 WebVTT region anchor X offset을 반환해야 한다. setting 시, 새 값이 음수이거나 100보다 크면 IndexSizeError exception이 throw되어야 한다. 그렇지 않으면, WebVTT region anchor X distance는 새 값으로 설정되어야 한다.

regionAnchorY attribute는 getting 시, VTTRegion object가 나타내는 WebVTT region의 WebVTT region anchor Y offset을 반환해야 한다. setting 시, 새 값이 음수이거나 100보다 크면 IndexSizeError exception이 throw되어야 한다. 그렇지 않으면, WebVTT region anchor Y distance는 새 값으로 설정되어야 한다.

viewportAnchorX attribute는 getting 시, VTTRegion object가 나타내는 WebVTT region의 WebVTT region viewport anchor X offset을 반환해야 한다. setting 시, 새 값이 음수이거나 100보다 크면 IndexSizeError exception이 throw되어야 한다. 그렇지 않으면, WebVTT region viewport anchor X distance는 새 값으로 설정되어야 한다.

viewportAnchorY attribute는 getting 시, VTTRegion object가 나타내는 WebVTT region의 WebVTT region viewport anchor Y offset을 반환해야 한다. setting 시, 새 값이 음수이거나 100보다 크면 IndexSizeError exception이 throw되어야 한다. 그렇지 않으면, WebVTT region viewport anchor Y distance는 새 값으로 설정되어야 한다.

scroll attribute는 getting 시, VTTRegion object가 나타내는 WebVTT region의 WebVTT region scroll setting이 아래 표의 첫 번째 셀인 행의 두 번째 셀에 있는 문자열을 반환해야 한다:

WebVTT region scroll	`scroll` value
None	"" (빈 문자열)
Up	"`up`"

setting 시, WebVTT region scroll은 위 표에서 두 번째 셀이 새 값에 대해 case-sensitive match인 행의 첫 번째 셀에 주어진 값으로 설정되어야 한다.

10. IANA 고려 사항

10.1. `text/vtt`

이 등록은 community review를 위한 것이며, IESG에 review, approval 및 IANA 등록을 위해 제출될 것이다.

Type name:

text

Subtype name:

vtt

Required parameters:

N/A

Optional parameters:

N/A

Encoding considerations:

8bit (항상 UTF-8)

Security considerations:

Text track file 자체는 data 안에 민감한 정보가 포함되어 있지 않은 한 즉각적인 위험을 일으키지 않는다. 그러나 implementation은 text track을 처리할 때 특정 origin 기반 제한이 지켜지도록 하기 위해 특정 규칙을 따라야 한다. 이러한 규칙을 올바르게 구현하지 못하면 information leakage, cross-site scripting attack 등으로 이어질 수 있다.

Interoperability considerations:

conforming 및 non-conforming content를 처리하기 위한 규칙은 이 명세에 정의되어 있다.

Published specification:

이 문서가 관련 명세이다.

Applications that use this media type:

Web browser 및 기타 video player.

Additional information:

Magic number(s):

WebVTT file은 모두 다음 byte sequence 중 하나로 시작한다("EOF"는 file의 끝을 의미한다):

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", 그리고 마지막으로 space, tab, line break 또는 file의 끝.)

File extension(s):

"vtt"

Macintosh file type code(s):

이 type에 대해 권장되는 특정 Macintosh file type code는 없다.

Person & email address to contact for further information:

Silvia Pfeiffer <silviapfeiffer1@gmail.com>

Intended usage:

Common

Restrictions on usage:

제한은 적용되지 않는다.

Authors:

Silvia Pfeiffer <silviapfeiffer1@gmail.com>, Simon Pieters <simonp@opera.com>, Philip Jägenstedt <philipj@opera.com>, Ian Hickson <ian@hixie.ch>

Change controller:

W3C

Fragment identifier는 text/vtt resource에서 의미를 갖지 않는다.

Privacy 및 Security 고려 사항

Text 기반 format security

모든 text 기반 format과 마찬가지로, buffer over-run, value overflow(예: 주어진 word length를 overflow하는 integer의 문자열 표현) 등을 일으킬 수 있는 악성 content를 구성하는 것이 가능하다. implementer는 parser를 구현할 때 지나치게 긴 line, field value 또는 encoded value가 security problem을 일으키지 않도록 주의해야 한다.

Styling 관련 privacy 및 security

WebVTT는 CSS style sheet를 embed할 수 있으며, 이는 CSS를 지원하는 사용자 에이전트에서 적용된다. 이러한 상황에서는 CSS의 privacy 및 security 고려 사항이 다음 caveat와 함께 적용된다.

그러한 style sheet는 어떤 external resource도 fetch할 수 없으며, 사용자 에이전트가 이를 허용하지 않는 것이 privacy를 위해 중요하다. 그렇지 않으면, WebVTT file은 사용자가 특정 video를 시청할 때, 심지어 그 video의 current time까지도 third party에게 알리도록 작성될 수 있다.

사용자 에이전트가 user style sheet를 제공하는 것은 가능하지만, 그러한 style sheet의 존재와 성격은 같은 사용자 에이전트(예: browser)에서 실행되는 script가 감지할 수 없다. 이러한 style sheet에 대한 CSS object model은 script에 expose되지 않고, getComputedStyle() API로 ::before 및 ::after 이외의 pseudo-element에 대한 computed style을 얻을 방법이 없기 때문이다. [CSSOM]

Scripting 관련 security

WebVTT는 scripting을 포함하거나 enable하지 않는다. 사용자 에이전트가 WebVTT file에 embedded된 script를 실행하는 방법을 지원하지 않는 것이 중요하다.

그러나 captions 또는 subtitles를 표시하기 위한 것이 아니라, script system에 timed input(‘triggers’)을 제공하도록 설계된 file을 구성하고 전달하는 것은 가능하다. 잘못 작성된 script 또는 script system은 security, privacy 또는 기타 문제를 일으킬 수 있지만, 이 고려 사항은 실제로 script system에 적용된다. WebVTT가 이러한 trigger를 해당 timestamp에서 제공하므로, 악성 file은 이러한 trigger를 매우 빠르게 제시하여 부당한 resource consumption을 일으킬 수도 있다.

Preference의 privacy

WebVTT file을 선택하고 download 또는 해석하게 하는 사용자 에이전트는, 사용자가 caption 또는 subtitle을 필요로 한다는 것과 caption 또는 subtitle에 대한 사용자의 language preference를 origin server에 나타낼 수 있다. 이는 사용자에 대한 (작은) 정보 조각이다. 그러나 caption file의 제공과 이를 retrieve 및 consume할지 여부의 선택은 caption format 자체보다는, offer를 수행하는 format 또는 protocol(예: HTML element)의 특성이다. [HTML]

감사의 말

WebVTT text track file format의 기반으로 사용된 SRT file format을 가진 SubRip software program에 기여한 SubRip community, 특히 Zuggy와 ai4spam에게 감사한다.

WebVTT가 원래 명시되었던 HTML standard에 기여한 Ian Hickson 및 많은 이들에게 감사한다. [HTML]

Thanks to Addison Phillips, Alastor Wu, Andreas Tai, Anna Cavender, Anne van Kesteren, Benjamin Schaaf, Brian Quass, Caitlin Potter, Courtney Kennedy, Cyril Concolato, Dae Kim, David Singer, Eric Carlson, fantasai, Frank Olivier, Fredrik Söderquist, Giuseppe Pascale, Glenn Adams, Glenn Maynard, John Foliot, Kyle Huey, Lawrence Forooghian, Loretta Guarino Reid, Ms2ger, Nigel Megitt, Ralph Giles, Richard Ishida, Rick Eyre, Ronny Mennerich, Theresa O’Connor, and Victor Cărbune for their useful comments.

WebVTT: 웹 비디오 텍스트 트랙 형식

초록

이 문서의 상태

1. 소개

1.1. 간단한 캡션 파일

1.2. 여러 줄을 가진 캡션 cue

1.3. 캡션 스타일링

1.4. 그 밖의 캡션 및 자막 기능

1.5. WebVTT의 주석

1.6. 챕터 예제

1.7. 메타데이터 예제

2. 적합성

2.1. 적합성 클래스

2.2. Unicode 정규화

3. 데이터 모델

3.1. 개요

3.2. WebVTT cue

3.3. WebVTT 캡션 또는 자막 cue

3.4. WebVTT 캡션 또는 자막 region

3.5. WebVTT chapter cue

3.6. WebVTT metadata cue

4. 구문

4.1. WebVTT 파일 구조

4.2. WebVTT cue payload의 유형

4.2.1. WebVTT metadata text

4.2.2. WebVTT caption or subtitle cue text

4.2.3. WebVTT chapter title text

4.3. WebVTT region 설정

4.4. WebVTT cue 설정

4.5. cue 시퀀스의 속성

4.5.1. 중첩 cue만 사용하는 WebVTT file

4.6. WebVTT file의 유형

4.6.1. metadata content를 사용하는 WebVTT file

4.6.2. chapter title text를 사용하는 WebVTT file

4.6.3. caption 또는 subtitle cue text를 사용하는 WebVTT file

5. WebVTT Caption 또는 Subtitle Cue Component의 기본 클래스

5.1. 기본 텍스트 색상

5.2. 기본 텍스트 배경색

6. 파싱

6.1. WebVTT file 파싱

6.2. WebVTT region settings 파싱

6.3. WebVTT cue timings and settings 파싱

6.4. WebVTT cue text 파싱 규칙

6.5. WebVTT cue text DOM 구성 규칙

6.6. chapter title을 추출하기 위한 WebVTT 규칙

7. 렌더링

7.1. 처리 모델

7.2. Cue setting 처리

7.3. CSS box 얻기

7.4. WebVTT Node Objects에 CSS property 적용하기

8. CSS 확장

8.1. 소개

8.2. 처리 모델

8.2.1. ::cue pseudo-element

8.2.2. :past 및 :future pseudo-class

8.2.3. ::cue-region pseudo-element

9. API

9.1. VTTCue interface

9.2. VTTRegion interface

10. IANA 고려 사항

10.1. text/vtt

Privacy 및 Security 고려 사항

Text 기반 format security

Styling 관련 privacy 및 security

Scripting 관련 security

Preference의 privacy

감사의 말

색인

이 명세에서 정의하는 용어

참조 문헌에서 정의하는 용어

참고문헌

규범적 참고문헌

비규범적 참고문헌

IDL 색인

9.1. `VTTCue` interface

9.2. `VTTRegion` interface

10.1. `text/vtt`