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

W3C 후보 권고안

이 버전:
https://www.w3.org/TR/2019/CR-webvtt1-20190404/
최신 공개 버전:
https://www.w3.org/TR/webvtt1/
에디터스 드래프트:
https://w3c.github.io/webvtt/
이전 버전:
테스트 슈트:
https://github.com/web-platform-tests/wpt/tree/master/webvtt
에디터:
(CSIRO)
이전 에디터:
(Opera Software AS)
(NICTA)
(Opera Software ASA)
(Google)
참여하기:
GitHub w3c/webvtt (새 이슈, 오픈 이슈, 레거시 오픈 버그)
커밋:
GitHub w3c/webvtt/commits
@webvtt

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

초록

이 명세서는 WebVTT, 웹 비디오 텍스트 트랙 형식을 정의합니다. 주된 용도는 HTML <track> 요소와 관련하여 외부 텍스트 트랙 리소스를 마크업하는 것입니다. WebVTT 파일은 비디오 콘텐츠에 대한 자막 또는 캡션을 제공하며, 텍스트 비디오 설명 [MAUR], 콘텐츠 탐색을 위한 챕터, 그리고 더 일반적으로 오디오 또는 비디오 콘텐츠와 시간 정렬된 모든 형태의 메타데이터를 제공합니다.

이 명세서는 Draft Community Group Report 및 Web Media Text Tracks Community Group을 기반으로 합니다.

이 문서의 상태

이 섹션은 출판 시점에서 이 문서의 상태를 설명합니다. 다른 문서가 이 문서를 대체할 수 있습니다. 현재 W3C 발행물 목록과 이 기술 보고서의 최신 개정본은 https://www.w3.org/TR/의 W3C 기술 보고서 색인에서 볼 수 있습니다.

이 문서는 W3C Timed Text Working Group에 의해 후보 권고안(Candidate Recommendation)으로 작성되었습니다. 이 문서는 W3C 권고안이 되는 것을 목표로 하고 있습니다. 이 문서에 의견이 있으신 경우, public-tt@w3.org로 (구독, 아카이브) 이메일 제목에 [webvtt]를 붙여 보내주시기 바랍니다. 모든 의견을 환영합니다. W3C는 문서가 안정적이라고 판단될 때 개발자 커뮤니티의 구현을 촉진하기 위해 후보 권고안을 발행합니다. 이 문서는 충분한 검토 기간을 보장하기 위해 최소 2019년 5월 2일까지 후보 권고안 상태를 유지합니다.

작업 그룹의 구현 보고서를 참조하십시오.

이 명세서가 CR 단계를 벗어나기 위해서는, 명세서에 정의된 모든 기능에 대해 최소 2개의 독립적인 구현이 구현 보고서에 문서화되어야 합니다. 구현 보고서는 테스트 슈트에 대한 구현자 제공 테스트 결과를 기반으로 합니다. 작업 그룹은 구현이 공개적으로 제공될 것을 요구하지는 않으나, 공개를 장려합니다.

다음 기능들은 위험에 처해 있으며, CR 기간 중 삭제될 수 있습니다:

WebVTT First Public Working Draft가 발표된 이후 본 버전에 적용된 모든 변경점의 누적 요약은 FPWD WebVTT 변경점에서 확인할 수 있습니다.

편의를 위해, 본 버전과 WebVTT 이전 Working Draft 간의 전체 diff는 이전 Working Draft WebVTT와의 Diff에서 확인할 수 있습니다.

후보 권고안(Candidate Recommendation)으로서의 출판은 W3C 회원에 의한 승인(endorsement)을 의미하지 않습니다. 이 문서는 초안이며 언제든지 업데이트, 대체 또는 폐기될 수 있습니다. ‘작업 중인 문서’ 외 용도로 인용하기에 부적절합니다.

이 문서는 W3C 특허 정책 하에 운영되는 그룹에 의해 제작되었습니다. W3C는 해당 그룹의 산출물과 관련하여 공개된 모든 특허 공개 목록 을 유지합니다. 해당 페이지에는 특허 공개를 위한 안내도 포함되어 있습니다. ‘본인이 필수 청구항’을 포함한다고 믿는 특허를 알고 있는 개인은 W3C 특허 정책 6장에 따라 정보를 공개해야 합니다.

이 문서는 2019년 3월 1일 W3C 프로세스 문서의 적용을 받습니다.

1. 소개

이 절은 비규범적입니다.

WebVTT (Web Video Text Tracks) 형식은 HTML <track> 요소와 함께 외부 텍스트 트랙 리소스를 마크업하는 데 사용됩니다.

WebVTT 파일은 비디오 콘텐츠의 자막이나 캡션을 제공하며, 텍스트 비디오 설명 [MAUR], 콘텐츠 탐색을 위한 챕터, 그리고 일반적으로 오디오 또는 비디오 콘텐츠와 시간 동기화된 다양한 형태의 메타데이터를 제공합니다.

이 명세서의 현 버전 대부분은 WebVTT 파일을 자막 또는 캡션 용도로 사용하는 방법을 설명하는 데 할애되어 있습니다. 챕터와 시간 동기 메타데이터에 대한 정보는 최소한으로 제공되며, 비디오 설명에 대한 내용은 현재 포함되어 있지 않습니다.

이 절에서는 WebVTT 파일의 몇 가지 예시를 소개합니다.

1.1. 간단한 캡션 파일

이 절은 비규범적입니다.

WebVTT 파일의 주 용도는 비디오 콘텐츠에 자막이나 캡션을 제공하는 것입니다. 아래는 인터뷰에 캡션을 단 샘플 파일입니다:

WEBVTT

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

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

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

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

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

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

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

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

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

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

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

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

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

일반적으로 WebVTT 파일은 시간 간격에 맞춰 연결된 텍스트 구간(큐; 정의)의 연속으로 구성됩니다. 캡션 및 자막 이외에도, WebVTT는 주로 큐에서 name-value 쌍을 전달하기 위해 사용되는 시간 동기 메타데이터 전달에 사용할 수 있습니다. WebVTT는 오디오/비디오 파일의 컨텍스트 내비게이션을 돕는 챕터 전달에도 쓸 수 있습니다. 마지막으로, WebVTT는 시각적 콘텐츠를 설명하는 텍스트 비디오 설명 전달에도 활용할 수 있으며, 이는 음성합성을 통해 시각장애 사용자의 이해를 도울 수 있습니다.

이 WebVTT 버전은 자막 및 캡션 케이스 해결에 중점을 두고 있습니다. 다른 용도에 대해서는 추가 명세 작업이 가능합니다. WebVTT 파일의 용도 결정은 파일을 사용하는 소프트웨어가 판단합니다. 예를 들어 HTML의 <track> 요소와 함께 쓸 때는 kind 속성으로 해당 WebVTT 파일의 해석 방식을 지정합니다.

다음 하위 절들은 WebVTT 파일 포맷의 주요 기능을 개략적으로 설명하며, 특히 자막 및 캡션에 사용될 때의 특징에 초점을 맞춥니다.

1.2. 여러 줄의 캡션 큐

이 절은 비규범적입니다.

큐 내의 줄바꿈은 그대로 적용됩니다. 필요하다면 사용자 에이전트가 큐의 너비에 맞추어 추가 줄바꿈을 삽입하기도 합니다. 따라서, 작성자는 반드시 줄바꿈이 필요한 경우가 아니라면 한 줄로 작성할 것을 권장합니다.

아래의 공익광고 비디오 자막 예시는 줄바꿈을 보여줍니다:

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.

첫 번째 큐는 단순해서 아마 한 줄로 표시될 것입니다. 두 번째 큐는 화자별로 두 줄로 표시됩니다. 세 번째 큐는 동영상의 너비에 맞추어 여러 줄로 줄바꿈될 수 있습니다. 예를 들어, 세 큐는 다음과 같이 보일 수 있습니다:

           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.

큐의 폭이 더 작으면, 아래 예시처럼 첫 두 큐도 줄바꿈될 수 있습니다. 두 번째 큐의 명시적 줄바꿈은 여전히 유지됩니다:

      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. 캡션 스타일링

이 절은 규범적이지 않습니다.

비디오 요소를 포함하는 HTML 페이지에 적용되는 CSS 스타일시트는 비디오의 WebVTT 큐와 영역을 ::cue, ::cue(), ::cue-region 및 ::cue-region() 의사요소를 사용하여 타겟할 수 있습니다.

이 예에서는 HTML 페이지가 style 요소에 CSS 스타일시트를 포함하고 있으며, 비디오의 모든 큐에 그라디언트 배경과 텍스트 색상을 적용하고, 비디오 큐 내의 모든 WebVTT 볼드 객체의 텍스트 색상도 변경합니다.

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

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

스타일 블록은 모든 헤더 다음이지만 첫 번째 큐 앞에 배치되며, "STYLE"이라는 라인으로 시작합니다. 주석 블록은 스타일 블록 사이에 삽입될 수 있습니다.

스타일시트에는 빈 줄을 포함할 수 없습니다. 빈 줄은 제거하거나 공백 또는 CSS 주석(예: /**/)으로 채울 수 있습니다.

문자열 "-->"는 스타일시트에서 사용할 수 없습니다. 스타일시트가 "<!--"와 "-->"로 감싸여 있다면, 해당 문자열들은 단순히 제거할 수 있습니다. 만약 "-->"가 CSS 문자열 안에 나타난다면 CSS 이스케이프를 사용하여 예: "--\>"처럼 쓸 수 있습니다.

이 예시는 WebVTT의 스타일 블록으로 큐를 어떻게 스타일링할 수 있는지 보여줍니다.

WEBVTT

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

NOTE comment blocks can be used between style blocks.

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

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

NOTE style blocks cannot appear after the first cue.

1.4. 기타 캡션 및 자막 기능

이 절은 비규범적입니다.

WebVTT는 자주 사용되지 않는 몇 가지 기능도 지원합니다.

이 예시에서는 큐에 식별자가 부여되어 있습니다:

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: test에 대한 스타일 */
::cue(#test) { color: lime; }

CSS의 구문 규칙상, 몇몇 문자는 문자 이스케이프 시퀀스로 이스케이프해야 합니다. 예를 들어 숫자(0-9)로 시작하는 아이디는 이스케이프가 필요합니다. ID 123은 "\31 23"으로 나타내는데(31은 "1"의 유니코드 코드 포인트입니다). CSS 이스케이프에 대한 자세한 내용은 Using character escapes in markup and CSS를 참고하세요. 

/* cue: 123에 대한 스타일 */
::cue(#\31 23) { color: lime; }
/* cue: crédit de transcription에 대한 스타일 */
::cue(#crédit\ de\ transcription) { color: red; }

이 예시는 요소에 클래스를 사용하는 방법—이는 지역화와 유지보수에 유용하며, 큐 텍스트 내 언어 변환을 나타내는 방법도—를 보여줍니다.

WEBVTT

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

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

이 예시에서는 각 큐가 누가 말하는지 보이스 스팬으로 나타냅니다. 첫 번째 큐의 화자 스팬에는 "first"와 "loud"라는 두 클래스가 부여되어 있습니다. 세 번째 큐에는 별도의 화자 없이 이탤릭 텍스트가 있고, 마지막 큐에는 "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!

특별한 예외로, 보이스 스팬이 전체 큐 텍스트를 덮을 때는 닫지 않아도 된다는 점에 유의하십시오.

스타일시트로 해당 스팬에 스타일을 줄 수 있습니다:

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

이 예시는 동영상 뷰포트에서 명시적으로 위치를 지정하여 큐를 배치하는 방법을 보여줍니다.

WEBVTT

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

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

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

이 예시의 큐들은 가로로 표시되어 있으므로, "position" 설정은 비디오 뷰포트의 너비 백분율을 참조합니다. 텍스트가 세로라면 "position" 설정은 뷰포트의 높이 백분율에 해당합니다.

"line-left" 또는 "line-right"는 "position" 설정이 적용되는 박스의 실제 쪽(왼쪽, 오른쪽)을 의미하며, 큐가 가로인지 세로인지와는 무관하게 박스의 물리적 면을 지정합니다. 이는 텍스트가 박스 내 어디에 위치하는지와 직접적으로 관련이 없습니다.

큐는 동영상 뷰포트의 35% 너비만을 차지하며—이는 세 큐 모두의 큐 박스"size"에 해당합니다.

첫 번째 큐의 큐 박스는 10% 지점에 위치합니다. "line-left"와 "line-right"는 위치가 어느 쪽에 대응하는지 지정하며, 여기서는Texto가 가로이므로 "line-left"가 박스의 왼쪽에 해당하여 10~45% 지점(좌측)의 스피커 아래에 표시될 것입니다. 큐가 세로라면 "line-left"는 상단에서부터 계산됩니다.

첫 번째 큐의 박스 내 텍스트 정렬은 "align" 큐 설정을 사용합니다. 좌-to-우 텍스트 렌더에서는 "start" 정렬이 박스의 왼쪽, 우-to-좌에서는 오른쪽에 맞게 됩니다. 본문 방향과 무관하게 항상 해당 스피커 아래에 배치되도록 하는 것입니다. 또 "center" 정렬 디폴트는 텍스트 기본 방향에 따라 박스 위치가 바뀌지 않게 하기 위함입니다.

두 번째 큐는 큐 박스가 비디오 뷰포트 너비 90% 지점(오른쪽)에 오른쪽 맞춤으로 배치됩니다("right" 정렬). 같은 효과는 "position:55%,line-left"로도 낼 수 있습니다. 세 번째 큐는 첫 번째와 동일한 위치에서 가운데 정렬 텍스트를 가집니다.

이 예시는 서로 다른 두 명의 화자를 위해 롤업 캡션이 각각의 영역(region)에 표시되는 방법을 보여줍니다. Fred의 큐는 화면 왼쪽, Bill의 큐는 오른쪽 영역에 스크롤됩니다. Fred의 첫 번째 큐는 20초까지 정의되어 있지만, 영역이 3줄로 제한되어 있으므로 12.5초에 네 번째 큐가 등장하면 사라집니다:

WEBVTT

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

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

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

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

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

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

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

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

영역(region)은 가로 큐에만 정의된다는 점에 유의하십시오.

1.5. WebVTT의 주석

이 절은 비규범적입니다.

WebVTT 파일에 주석을 추가할 수 있습니다.

주석은 빈 줄 뒤에 위치하며, "NOTE"로 시작(공백 또는 개행 뒤)하고, 다음 빈 줄에서 종료되는 블록입니다.

아래는 큐의 타이밍에 대한 가능성 있는 문제를 한 줄짜리 주석으로 적은 예시입니다.

WEBVTT

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

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

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

이 예시는 작성자가 여러 주석을 남긴 경우입니다.

WEBVTT

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

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

NOTE check next cue

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

NOTE end of file

1.6. 챕터 예시

이 절은 비규범적입니다.

WebVTT 파일은 비디오 내비게이션을 위한 챕터로 구성될 수 있습니다.

챕터는 일반 텍스트이며, 보통 한 줄로 이루어져 있습니다.

아래 예시는 강연을 각 슬라이드별 챕터로 나눈 경우입니다.

WEBVTT

NOTE
This is from a talk Silvia gave about WebVTT.

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

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

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

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

1.7. 메타데이터 예시

이 절은 비규범적입니다.

WebVTT 파일은 시간 동기 메타데이터로 구성될 수 있습니다.

메타데이터는 임의의 문자열일 수 있으며, 종종 JSON 객체 형식으로 제공됩니다.

메타데이터 블록 내에 빈 줄을 사용할 수 없습니다. 빈 줄은 WebVTT 큐의 끝을 의미하기 때문입니다.

아래 예시는 강연을 슬라이드별 챕터로 나눈 경우입니다.

WEBVTT

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

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

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

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

2. 적합성

이 명세서의 모든 도해, 예제 및 주석은 비규범적이며, 명시적으로 비규범적이라고 표시된 모든 섹션도 마찬가지입니다. 이 명세서의 나머지 부분은 규범적입니다.

규범적 부분에서의 핵심 단어인 "MUST", "MUST NOT", "SHOULD", "SHOULD NOT", "MAY", 및 "OPTIONAL"은 RFC2119에 설명된 대로 해석됩니다. 규범적 부분에서의 핵심 단어 "OPTIONALLY"는 "MAY" 및 "OPTIONAL"과 동일한 규범적 의미로 해석됩니다. 가독성을 위해, 이 명세서에서는 이러한 단어들을 모두 대문자로 표기하지 않습니다. [RFC2119]

알고리즘의 일부로 명령형으로 표현된 요구사항(예: "strip any leading space characters" 또는 "return false and abort these steps")은 소개부에서 사용된 핵심 단어("must", "should", "may" 등)의 의미로 해석됩니다.

알고리즘이나 특정 단계로 표현된 적합성 요구사항은 최종 결과가 동등하기만 하면 어떤 방식으로든 구현될 수 있습니다. (특히, 이 명세서에 정의된 알고리즘은 따라하기 쉽도록 설계되었으며, 고성능을 목적으로 하지 않습니다.)

2.1. 적합성 클래스

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

§4 구문은 유효한 WebVTT 파일이 무엇으로 구성되는지를 정의합니다. 작성자는 그 안의 요구사항을 따라야 하며, 적합성 검사기를 사용하는 것이 권장됩니다. §6 파싱은 사용자 에이전트가 text/vtt로 라벨된 파일을 유효한 및 유효하지 않은 WebVTT 파일 모두에 대해 어떻게 해석해야 하는지를 정의합니다. 파싱 규칙은 확장성과 일부 구문 오류가 있는 큐를 여전히 렌더링할 수 있도록 하기 위해 구문보다 작성자 오류에 더 관대합니다.

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

사용자 에이전트는 서로 다른 적합성 요구사항을 가진 여러(중첩될 수 있는) 범주에 속합니다.

User agents that support scripting

이 명세서의 모든 처리 요구사항이 적용됩니다. 또한 사용자 에이전트는 Web IDL 명세서에 설명된 대로 이 명세서의 IDL 단편들의 적합한 구현이어야 합니다. [WEBIDL-1]

User agents with no scripting support

이 명세서의 모든 처리 요구사항이 적용되지만, §6.5 WebVTT 큐 텍스트 DOM 구성 규칙 및 §9 API의 요구사항은 제외됩니다.

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

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

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

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

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

이 명세서의 모든 처리 요구사항이 적용됩니다. 그러나 완전한 HTML/CSS 엔진을 지원하지 않는 사용자 에이전트가 CSS 기능의 동등한 동작을 구현해야 하기 때문에, WebVTT에 적용되는 CSS 스타일의 범위를 제한해야 합니다. 완전한 CSS 엔진을 지원하는 사용자 에이전트는 WebVTT 명세를 벗어나는 추가적인 CSS 스타일이 침투하지 않도록 WebVTT에 적용하는 CSS 스타일을 제한해야 합니다.

Conformance checkers

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

Authoring tools

작성 도구는 적합한 WebVTT 파일을 생성해야 합니다. 다른 포맷을 WebVTT로 변환하는 도구도 작성 도구로 간주됩니다.

작성 도구가 비적합한 WebVTT 파일을 편집하는 데 사용될 때, 편집 세션 동안 편집되지 않은 파일의 섹션에 있는 적합성 오류를 보존할 수 있습니다(즉, 편집 도구는 오류가 있는 내용을 라운드트립하는 것을 허용합니다). 그러나 작성 도구는 오류가 보존된 상태라면 출력물이 적합하다고 주장해서는 안 됩니다.

2.2. 유니코드 정규화

이 명세서의 구현체는 처리 중에 유니코드 텍스트를 정규화해서는 안 됩니다.

예를 들어, 식별자가 U+0041 LATIN CAPITAL LETTER A 다음에 U+030A COMBINING RING ABOVE(분해된 문자 시퀀스)로 구성되거나 U+212B ANGSTROM SIGN(호환 문자)로 구성된 큐는 U+00C5 LATIN CAPITAL LETTER A WITH RING ABOVE(합성 문자)로 구성된 ID를 대상으로 하는 선택자와 일치하지 않습니다.

3. 데이터 모델

WebVTT의 박스 모델은 비디오 뷰포트, 큐 및 영역의 세 가지 핵심 요소로 구성됩니다. 비디오 뷰포트는 큐와 영역이 렌더링되는 렌더링 영역입니다. 큐는 일련의 큐 라인들로 구성된 박스입니다. 영역은 큐를 함께 그룹화하는 데 사용되는 비디오 뷰포트의 하위 영역입니다. 큐는 비디오 뷰포트 내부에 직접 배치되거나 뷰포트 내부에 배치된 영역 내부에 배치될 수 있습니다.

큐의 뷰포트 내부 위치는 일련의 큐 설정으로 정의됩니다. 영역의 뷰포트 내부 위치는 일련의 영역 설정으로 정의됩니다. 영역 내부에 있는 큐는 제한된 집합의 큐 설정만 사용할 수 있습니다. 구체적으로, 큐가 "vertical", "line" 또는 "size" 설정을 가지면 그 큐는 영역에서 빠져나갑니다. 그렇지 않으면 큐의 너비는 뷰포트가 아니라 영역 너비에 상대적으로 계산됩니다.

3.1. 개요

이 절은 비규범적입니다.

WebVTT 파일은 비디오 또는 오디오 리소스와 시간 동기화된 데이터 조각의 컨테이너 파일입니다. 따라서 시간 동기화된 데이터의 직렬화 형식으로 간주될 수 있습니다.

WebVTT 파일은 헤더로 시작한 다음 일련의 데이터 블록을 포함합니다. 데이터 블록이 시작 및 종료 시간을 가지면 이를 WebVTT 큐라고 합니다. 주석은 또 다른 종류의 데이터 블록입니다.

WebVTT 파일은 서로 다른 종류의 데이터를 운반할 수 있습니다. HTML 명세는 캡션, 자막, 챕터, 오디오 설명 및 메타데이터를 데이터 종류로 식별하고, 어떤 것이 사용되는지를 텍스트 트랙 종류 속성으로 지정합니다. [HTML51].

WebVTT 파일은 한 종류의 데이터만 포함해야 하며, 서로 다른 종류의 데이터를 혼합해서는 안 됩니다. WebVTT 파일의 데이터 종류는 HTML 파일의 텍스트 트랙 요소 등 외부에서 지정됩니다. 환경이 데이터를 올바르게 해석할 책임이 있습니다.

WebVTT 캡션 또는 자막 큐는 비디오 뷰포트 위에 오버레이로 렌더링되거나 뷰포트의 하위 영역인 영역 내부에 렌더링됩니다.

3.2. WebVTT 큐

A WebVTT 큐는 텍스트 트랙 큐 [HTML51]로서 다음을 추가로 포함합니다:

큐 텍스트

큐의 원시 텍스트와 그 해석 규칙.

3.3. WebVTT 캡션 또는 자막 큐

A WebVTT 캡션 또는 자막 큐는 WebVTT 큐로서 다음과 같은 추가 속성을 가지며, 이는 큐 텍스트를 렌더링하고 DOM 조각으로 변환할 수 있게 합니다:

큐 박스

WebVTT 큐의 큐 박스는 모든 라인 텍스트가 렌더링될 박스입니다. 이는 큐가 영역의 일부인 경우 뷰포트 내부의 영역에 렌더링되거나, 그렇지 않으면 비디오의 뷰포트에 렌더링됩니다.

큐 박스의 비디오 뷰포트 또는 영역 내 위치는 WebVTT 큐 위치 및 WebVTT 큐 라인의 값에 따라 달라집니다.

라인의 길이가 필요하면 큐 박스의 크기 내에서 자동으로 줄바꿈됩니다.

쓰기 방향

쓰기 방향은 다음 중 하나입니다

  • 가로 (한 줄이 수평으로 확장되며 비디오 뷰포트의 상단으로부터 수직으로 오프셋되고, 연속 라인은 아래에 표시됩니다),
  • 세로(왼쪽으로 성장) (한 줄이 수직으로 확장되며 비디오 뷰포트의 오른쪽 가장자리로부터 수평으로 오프셋되고, 연속 라인은 왼쪽에 표시됩니다), 또는
  • 세로(오른쪽으로 성장) (한 줄이 수직으로 확장되며 비디오 뷰포트의 왼쪽 가장자리로부터 수평으로 오프셋되고, 연속 라인은 오른쪽에 표시됩니다).

쓰기 방향은 라인, 위치, 및 크기 큐 설정의 해석에 영향을 미쳐 비디오의 너비 또는 높이를 기준으로 해석되게 합니다.

기본적으로 쓰기 방향은 가로로 설정됩니다.

세로(왼쪽으로 성장) 쓰기 방향은 중국어, 일본어, 한국어의 세로 표기에 사용할 수 있고, 세로(오른쪽으로 성장) 쓰기 방향은 몽골어의 세로 표기에 사용할 수 있습니다.

snap-to-lines 플래그

이 불리언은 라인이 정수 줄 수(큐의 첫 번째 라인의 줄 차원을 사용)인지, 아니면 비디오 차원의 백분율인지 여부를 나타냅니다. 플래그는 라인이 카운트될 때 true로 설정되고, 그렇지 않을 때 false로 설정됩니다.

플래그가 false인 큐는 여러 큐가 같은 위치에 있을 때 겹침 회피를 적용한 모듈로 요청한 대로 오프셋됩니다.

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

라인

라인은 큐 박스의 위치를 정의합니다.

라인은 큐 박스를 비디오 뷰포트의 상단, 오른쪽 또는 왼쪽으로부터 오프셋합니다. 이는 쓰기 방향, snap-to-lines 플래그, 또는 다른 표시 중인 트랙이 차지하는 라인 수에 의해 정의됩니다.

라인은 라인 수, 비디오 뷰포트 높이 또는 너비의 백분율, 또는 다른 표시 트랙에 따라 오프셋이 결정되는 특수값 auto 중 하나로 설정됩니다.

기본적으로 라인은 auto로 설정됩니다.

만약 쓰기 방향이 가로라면, 라인 백분율은 비디오의 높이에 상대적이며, 그렇지 않으면 너비에 상대적입니다.

WebVTT 큐는 다음 알고리즘에 의해 반환되는 값인 계산된 라인을 가집니다. 이 알고리즘은 큐의 다른 측면들을 기준으로 정의됩니다:

  1. 만약 라인이 숫자이고, 해당 WebVTT 큐 snap-to-lines 플래그가 false이며, 라인이 음수이거나 100보다 크다면, 100을 반환하고 이 단계를 중단합니다.

    비록 WebVTT 파서가 라인을 0..100 범위를 벗어난 숫자로 설정하지 않고 동시에 snap-to-lines 플래그를 false로 설정하지 않겠지만, DOM API의 snapToLines 및 line 속성을 사용할 때 이런 상황이 발생할 수 있습니다.

  2. 만약 라인이 숫자라면, WebVTT 큐 라인의 값을 반환하고 이 단계를 중단합니다. (이 경우 snap-to-lines 플래그가 true이므로 0..100 범위를 벗어난 값도 유효하거나, 값이 0..100 범위 내에 있어 플래그 값과 관계없이 유효합니다.)

  3. 만약 해당 snap-to-lines 플래그가 false라면, 값 100을 반환하고 이 단계를 중단합니다. (이 경우 라인은 특수값 auto입니다.)

  4. cue를 WebVTT 큐로 둡니다.

  5. 만약 cue가 텍스트 트랙의 큐 목록에 없거나, 그 텍스트 트랙이 미디어 요소의 텍스트 트랙 목록에 없다면 −1을 반환하고 이 단계를 중단합니다.

  6. track를 큐가 속한 텍스트 트랙으로 둡니다.

  7. n을 해당 미디어 요소의 텍스트 트랙 목록에서 텍스트 트랙 모드가 showing인 트랙들 중에서 track보다 앞에 있는 트랙들의 수로 설정합니다.

  8. n을 하나 증가시킵니다.

  9. n의 부호를 반전시킵니다.

  10. n을 반환합니다.

예를 들어, 하나의 미디어 요소에서 두 개의 텍스트 트랙이 동시에 showing 상태이고, 각 텍스트 트랙이 활성화된 WebVTT 큐를 가지고 있으며 그 라인이 모두 auto라면, 첫 번째 텍스트 트랙의 큐의 계산된 라인은 −1이 되고 두 번째는 −2가 됩니다.

라인 정렬

큐 박스의 라인에 대한 정렬로, 다음 중 하나입니다:

시작 정렬
큐 박스의 상단(가로 큐의 경우), 왼쪽(세로(오른쪽으로 성장) 경우) 또는 오른쪽(세로(왼쪽으로 성장) 경우) 면이 라인에 정렬됩니다.
중앙 정렬
큐 박스가 라인을 기준으로 가운데 정렬됩니다.
끝 정렬
큐 박스의 하단(가로 큐의 경우), 오른쪽(세로(오른쪽으로 성장) 경우) 또는 왼쪽(세로(왼쪽으로 성장) 경우) 면이 라인에 정렬됩니다.

기본적으로 라인 정렬은 start로 설정됩니다.

라인 정렬(line alignment)은 텍스트 정렬과 별개입니다 — 오른쪽-왼쪽 대 왼쪽-오른쪽 큐 텍스트는 라인 정렬에 영향을 주지 않습니다.

위치

위치는 큐 박스의 들여쓰기를 쓰기 방향으로 정의합니다.

위치는 퍼센트 값으로 큐 박스의 위치를 나타내는 숫자이거나, 특수값 auto입니다. auto는 위치가 큐의 텍스트 정렬에 따라 결정됨을 의미합니다.

큐가 영역 내에 없으면, 퍼센트 값은 비디오 치수의 백분율로 해석되고, 그렇지 않으면 영역 치수의 백분율로 해석됩니다.

기본적으로 위치는 auto로 설정됩니다.

만약 쓰기 방향이 가로라면, 위치의 퍼센트는 비디오의 너비에 상대적이며, 그렇지 않으면 높이에 상대적입니다.

WebVTT 큐는 다음 알고리즘에 의해 반환되는 값인 계산된 위치를 가집니다. 이 알고리즘은 큐의 다른 측면들을 기준으로 정의됩니다:

  1. 만약 위치가 0에서 100 사이의 숫자라면, 그 위치 값을 반환하고 이 단계를 중단합니다. (그렇지 않으면 위치는 특수값 auto입니다.)

  2. 만약 큐 텍스트 정렬이 left이면 0을 반환하고 이 단계를 중단합니다.

  3. 만약 큐 텍스트 정렬이 right이면 100을 반환하고 이 단계를 중단합니다.

  4. 그렇지 않으면 50을 반환하고 이 단계를 중단합니다.

기본적으로 위치 정렬의 기본값이 center이므로, 큐에 텍스트 정렬 설정이 없으면 위치는 기본적으로 50%로 설정됩니다.

오른쪽-왼쪽 큐 텍스트를 가진 가로 큐의 경우에도 큐 박스는 비디오 뷰포트의 왼쪽 가장자리에서부터 위치가 측정됩니다. 이는 왼쪽-오른쪽 또는 오른쪽-왼쪽 텍스트를 채울 수 있는 렌더링 공간 템플릿을 정의할 수 있게 합니다.

크기가 100%가 아닌 WebVTT 큐와 텍스트 정렬이 start 또는 end인 경우, 작성자는 기본 auto 위치를 사용해서는 안 됩니다.

텍스트 정렬이 start 또는 end일 때, auto 위치는 50%입니다. 이는 왼쪽 정렬 및 오른쪽 정렬 텍스트의 경우 auto 위치가 각각 0% 및 100%인 것과 다릅니다. 위의 요구사항은 자동 위치 지정이 start 또는 end 정렬 텍스트에 대해 작동하지 않는 것이 놀라울 수 있기 때문에 존재합니다. 큐 텍스트는 왼쪽-오른쪽 기본 방향 또는 오른쪽-왼쪽 기본 방향이거나(라인별로 다를 수 있음) 둘 다 포함할 수 있으므로, 그러한 자동 위치 지정은 예상치 못한 결과를 초래할 수 있습니다.

위치 정렬

큐 박스의 쓰기 방향 차원에서의 정렬로서, 위치가 어떤 부분에 고정되는지를 설명하며, 다음 중 하나입니다:

라인-왼쪽 정렬
큐 박스의 왼쪽(가로 큐의 경우) 또는 상단(그 외 경우) 면이 위치에 정렬됩니다.
가운데 정렬
큐 박스가 위치를 기준으로 가운데 정렬됩니다.
라인-오른쪽 정렬
큐 박스의 오른쪽(가로 큐의 경우) 또는 하단(그 외 경우) 면이 위치에 정렬됩니다.
자동 정렬
큐 박스의 정렬은 큐의 텍스트 정렬 값에 따라 달라집니다.

기본적으로 위치 정렬은 auto로 설정됩니다.

WebVTT 큐는 다음 알고리즘에 의해 반환되는 값인 계산된 위치 정렬을 가집니다. 이 알고리즘은 큐의 다른 측면들을 기준으로 정의됩니다:

  1. 만약 위치 정렬이 auto가 아니면, 위치 정렬의 값을 반환하고 이 단계를 중단합니다.

  2. 만약 큐 텍스트 정렬이 left이면, line-left를 반환하고 이 단계를 중단합니다.

  3. 만약 큐 텍스트 정렬이 right이면, line-right를 반환하고 이 단계를 중단합니다.

  4. 만약 큐 텍스트 정렬이 start이면, 큐 텍스트의 기본 방향이 왼쪽-오른쪽이면 line-left를 반환하고, 그렇지 않으면 line-right를 반환합니다.

  5. 만약 큐 텍스트 정렬이 end이면, 큐 텍스트의 기본 방향이 왼쪽-오른쪽이면 line-right를 반환하고, 그렇지 않으면 line-left를 반환합니다.

  6. 그렇지 않으면 center를 반환합니다.

위치(position)는 항상 비디오의 왼쪽(가로 큐의 경우) 또는 상단(그 외 경우)으로부터 측정되기 때문에, 위치 정렬의 line-left 값은 가로 및 세로 큐에 대해 왼쪽과 상단 사이에서 달라집니다.

크기

큐 박스의 크기를 나타내는 숫자로, 쓰기 방향에 따라 비디오의 백분율로 해석됩니다.

기본적으로 WebVTT 큐 크기는 100%로 설정됩니다.

만약 쓰기 방향이 가로라면, 크기의 퍼센트는 비디오의 너비에 상대적이고, 그렇지 않으면 높이에 상대적입니다.

텍스트 정렬

큐 박스 내 모든 텍스트 라인의 정렬로, 쓰기 방향 차원에서의 정렬이며 다음 중 하나입니다:

시작 정렬
각 라인의 텍스트는 박스의 시작 쪽으로 개별적으로 정렬되며, 그 라인의 시작 쪽은 CSS의 plaintext 값에 대한 unicode-bidi 속성 규칙을 사용하여 결정됩니다. [CSS-WRITING-MODES-3]
가운데 정렬
텍스트는 박스의 시작과 끝 사이에서 가운데로 정렬됩니다.
끝 정렬
각 라인의 텍스트는 박스의 끝 쪽으로 개별적으로 정렬되며, 그 라인의 끝 쪽은 plaintext 값에 대한 CSS 규칙을 사용하여 결정됩니다. [CSS-WRITING-MODES-3]
왼쪽 정렬
텍스트는 박스의 왼쪽 면(가로 큐의 경우) 또는 상단 면(그 외 경우)에 정렬됩니다.
오른쪽 정렬
텍스트는 박스의 오른쪽 면(가로 큐의 경우) 또는 하단 면(그 외 경우)에 정렬됩니다.

기본적으로 텍스트 정렬은 가운데 정렬로 설정됩니다.

각 라인의 기본 방향(Unicode 양방향 알고리즘이 그 라인에서 문자를 표시할 순서를 결정하는 데 사용됨)은 각 라인에서 첫 번째 강력 방향 문자를 찾아 CSS의 plaintext 알고리즘을 사용하여 결정됩니다. 드문 경우에 첫 번째 강력 문자가 해당 라인의 잘못된 기본 방향을 생성하는 경우, 작성자는 라인 시작에 U+200E LEFT-TO-RIGHT MARK 또는 U+200F RIGHT-TO-LEFT MARK 문자를 사용하여 이를 수정할 수 있습니다. [BIDI]

이 예에서 두 번째 큐는 오른쪽-왼쪽 기본 방향을 가지며 ".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;"로 이스케이프 가능).

라인 내에 포함된 일부 텍스트의 기본 방향이 주변 텍스트와 달라야 하는 경우, 쌍으로 이루어진 유니코드 bidi 포맷팅 코드 문자를 사용하여 이를 달성할 수 있습니다.

이 예에서, bidi 포맷팅 코드 문자가 사용되지 않았다고 가정하면 큐 텍스트는 "I’ve read the book 3 דנליונ times!"로 렌더링됩니다(즉, "3"이 책 제목의 잘못된 쪽에 위치함). (다시 말하지만, 아래 텍스트는 모든 문자를 왼쪽-오른쪽으로 표시합니다.)

WEBVTT

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

만약 책 제목 앞에 U+2068 FIRST STRONG ISOLATE(FSI) 문자를 넣고 책 제목 뒤에 U+2069 POP DIRECTIONAL ISOLATE(PDI) 문자를 넣으면, 의도한 대로 "I’ve read the book דנליונ 3 times!"로 렌더링될 것입니다. (해당 문자는 "&#x2068;" 및 "&#x2069;"로 이스케이프할 수 있습니다.)

기본 텍스트 정렬은 가운데 정렬이며, 이는 큐 텍스트의 기본 방향과 상관없습니다. 각 라인의 텍스트 정렬을 라인의 기본 방향과 일치시키려면(예: 영어는 왼쪽, 히브리어는 오른쪽) start 정렬을 사용하거나 반대의 정렬을 위해 end 정렬을 사용하십시오.

이 예에서 start 정렬이 사용됩니다. 첫 번째 라인은 기본 방향이 왼쪽-오른쪽이므로 왼쪽 정렬되고, 두 번째 라인은 기본 방향이 오른쪽-왼쪽이므로 오른쪽 정렬됩니다.

WEBVTT

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

이는 다음과 같이 렌더링됩니다:

Hello!
                                            !םולש

왼쪽 정렬 및 오른쪽 정렬은 라인의 기본 방향에 관계없이 큐 텍스트를 왼쪽 또는 오른쪽으로 정렬하는 데 사용할 수 있습니다.

영역

큐가 속할 수 있는 선택적 WebVTT 영역.

기본적으로 영역은 null로 설정됩니다.

연관된 텍스트 트랙 렌더링 갱신 규칙은 WebVTT 큐에 대한 WebVTT 텍스트 트랙 표시 갱신 규칙입니다.

활성 WebVTT 큐의 active flag가 설정된 상태에서 그 큐의 쓰기 방향, snap-to-lines 플래그, 라인, 라인 정렬, 위치, 위치 정렬, 크기, 텍스트 정렬, 영역 또는 텍스트의 값이 변경되면, 사용자 에이전트는 텍스트 트랙 큐 표시 상태를 비우고 즉시 해당 텍스트 트랙의 텍스트 트랙에 대한 표시 갱신 규칙을 실행해야 합니다.

3.4. WebVTT 캡션 또는 자막 영역

WebVTT 영역은 비디오 뷰포트의 하위 부분을 나타내며 WebVTT 캡션 또는 자막 큐에 대해 제한된 렌더링 영역을 제공합니다.

영역은 캡션 또는 자막 큐를 그룹화하여 함께 렌더링할 수 있도록 하는 수단을 제공하며, 특히 위로 스크롤되는 경우에 중요합니다.

각 WebVTT 영역은 다음으로 구성됩니다:

식별자

U+0020 SPACE 또는 U+0009 CHARACTER TABULATION 문자를 제외한 0개 이상의 임의의 문자로 이루어진 문자열. 문자열은 서브스트링 "-->" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN)를 포함해서는 안 됩니다. 기본값은 빈 문자열입니다.

너비

포함된 큐의 각 라인 텍스트가 렌더링될 박스의 너비를 나타내는 숫자로서, 비디오 너비의 백분율로 해석됩니다. 기본값은 100입니다.

라인 수 값

포함된 큐의 각 라인 텍스트가 렌더링될 박스의 라인 수를 나타내는 숫자입니다. 기본값은 3입니다.

WebVTT 영역은 고정된 렌더링 영역을 정의하기 때문에, 영역이 허용하는 라인 수보다 많은 라인을 가진 큐는 잘리게 됩니다. 스크롤 되는 영역의 경우 잘림은 위쪽에서 발생하고, 비스크롤 영역의 경우 아래쪽에서 발생합니다.

영역 앵커 포인트

영역 내에서 비디오 뷰포트에 고정되어 영역이 글꼴 크기 변경 등으로 이동하더라도 위치가 변하지 않는 x 및 y 좌표 두 개입니다. 기본값은 (0,100), 즉 영역의 왼쪽 하단 코너입니다.

영역-뷰포트 앵커 포인트

영역 앵커 포인트가 고정되는 비디오 뷰포트 내의 x 및 y 좌표 두 개입니다. 기본값은 (0,100), 즉 비디오 뷰포트의 왼쪽 하단 코너입니다.

스크롤 값

다음 중 하나입니다:

없음
영역 내의 큐가 스크롤되지 않고 처음 그려진 위치에 고정되도록 합니다.
위로
영역 내의 큐가 영역의 아래쪽에 추가되어 이미 표시된 큐들을 위로 밀어 올려 새 큐의 모든 라인이 영역 내에 보일 때까지 밀려나도록 합니다.

다음 다이어그램은 영역을 비디오 뷰포트에 앵커링하는 방법을 보여줍니다. 검은 십자가는 앵커 지점을 나타내고, 주황색은 영역 내에서의 앵커 오프셋을, 녹색은 비디오 뷰포트 내에서의 앵커 오프셋을 설명합니다. 마치 메모를 보드에 핀으로 고정한 것처럼 생각하십시오:

visual explanation of WebVTT regions
이미지 설명: 비디오 뷰포트 내부에 WebVTT 영역이 있습니다. 영역 내부에는 검은 십자가로 표시된 앵커 포인트가 있습니다. 비디오 뷰포트의 모서리에서 앵커까지의 수직 및 수평 거리는 녹색 화살표로 표시되며, 이는 영역 뷰포트 앵커 X 및 Y 오프셋을 나타냅니다. 영역의 모서리에서 앵커까지의 수직 및 수평 거리는 주황색 화살표로 표시되며, 이는 영역 앵커 X 및 Y 오프셋을 나타냅니다. 영역의 크기는 수평 축에 대한 영역 너비와 수직 축에 대한 영역 라인 수로 표현됩니다.

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

텍스트 트랙 영역 목록

0개 이상의 WebVTT 영역의 목록입니다.

3.5. WebVTT 챕터 큐

WebVTT 챕터 큐는 WebVTT 큐로서 그 큐 텍스트가 내비게이션 대상으로서 챕터 제목으로 해석되는 것입니다.

챕터 큐는 오디오 또는 비디오 파일의 타임라인을 연속적이고 중첩되지 않는 간격으로 표시합니다. 또한 이러한 간격을 하위 챕터로 세분화하여 내비게이션 트리를 구성할 수 있습니다.

3.6. WebVTT 메타데이터 큐

WebVTT 메타데이터 큐는 WebVTT 큐로서 그 큐 텍스트가 시간 정렬된 메타데이터로 해석되는 것입니다.

4. 구문

4.1. WebVTT 파일 구조

WebVTT 파일은 UTF-8로 인코딩된 WebVTT 파일 본문로 구성되어야 하며 MIME 타입 text/vtt로 라벨링되어야 합니다. [RFC3629]

WebVTT 파일 본문은 다음 구성 요소들을 아래 순서로 포함합니다:

  1. 선택적 U+FEFF 바이트 순서 표시(BOM) 문자.
  2. 문자열 "WEBVTT".
  3. 선택적으로, U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION 문자(탭) 하나와 그 뒤에 U+000A LINE FEED(LF) 또는 U+000D CARRIAGE RETURN(CR) 문자가 아닌 임의의 문자들이 따라올 수 있습니다.
  4. 파일 매직이 있는 줄을 종료하고 본문과 구분하기 위한 두 개 이상의 WebVTT 라인 종결자.
  5. 제로 또는 그 이상의 WebVTT 영역 정의 블록, WebVTT 스타일 블록 및 WebVTT 주석 블록이 하나 이상의 WebVTT 라인 종결자로 서로 구분되어 존재할 수 있습니다.
  6. 제로 또는 그 이상의 WebVTT 라인 종결자.
  7. 제로 또는 그 이상의 WebVTT 큐 블록 및 WebVTT 주석 블록이 하나 이상의 WebVTT 라인 종결자로 서로 구분되어 존재할 수 있습니다.
  8. 제로 또는 그 이상의 WebVTT 라인 종결자.

WebVTT 라인 종결자는 다음 중 하나로 구성됩니다:

WebVTT 영역 정의 블록은 다음 구성 요소들을 주어진 순서로 포함합니다:

  1. 문자열 "REGION".
  2. 제로 또는 그 이상의 U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION(탭) 문자.
  3. WebVTT 라인 종결자.
  4. WebVTT 영역 설정 리스트.
  5. WebVTT 라인 종결자.

WebVTT 스타일 블록은 다음 구성 요소들을 주어진 순서로 포함합니다:

  1. 문자열 "STYLE".
  2. 제로 또는 그 이상의 U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION(탭) 문자.
  3. WebVTT 라인 종결자.
  4. U+000A LINE FEED(LF) 문자 및 U+000D CARRIAGE RETURN(CR) 문자를 제외한 0개 이상의 문자들의 임의 시퀀스(각각은 선택적으로 다음 항목과 WebVTT 라인 종결자로 구분될 수 있음). 단, 전체 결과 문자열은 서브스트링 "-->"를 포함해서는 안 됩니다. 이 문자열은 CSS 스타일시트를 나타내며 관련 CSS 명세에서 제시된 요구사항이 적용됩니다. [CSS22]
  5. WebVTT 라인 종결자.

WebVTT 큐 블록은 다음 구성 요소들을 주어진 순서로 포함합니다:

  1. 선택적으로, WebVTT 큐 식별자와 그 뒤의 WebVTT 라인 종결자.
  2. WebVTT 큐 타이밍.
  3. 선택적으로 하나 이상의 U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION(탭) 문자와 그 뒤의 WebVTT 큐 설정 리스트.
  4. WebVTT 라인 종결자.
  5. 큐 페이로드: WebVTT 캡션 또는 자막 큐 텍스트, WebVTT 챕터 제목 텍스트, 또는 WebVTT 메타데이터 텍스트 중 하나이지만, 서브스트링 "-->"를 포함해서는 안 됩니다.
  6. WebVTT 라인 종결자.

하나의 WebVTT 큐 블록은 WebVTT 파일의 시간 정렬된 텍스트 또는 데이터 한 조각에 해당합니다(예: 하나의 자막). 큐 페이로드는 큐와 연관된 텍스트 또는 데이터입니다.

WebVTT 큐 식별자는 서브스트링 "-->"나 U+000A LINE FEED(LF) 또는 U+000D CARRIAGE RETURN(CR) 문자를 포함하지 않는 하나 이상의 문자 시퀀스입니다.

WebVTT 큐 식별자는 모든 WebVTT 큐 식별자 중에서 해당 WebVTT 큐의 식별자들 사이에서 고유해야 합니다.

WebVTT 큐 식별자는 스크립트나 CSS에서 특정 큐를 참조하는 데 사용할 수 있습니다.

WebVTT 큐 타이밍 부분은 다음 구성 요소들을 주어진 순서로 포함합니다:

  1. WebVTT 타임스탬프로 표현된 큐의 시작 시간 오프셋. 이 WebVTT 타임스탬프가 파일 내 이전의 모든 큐의 시작 시간 오프셋보다 크거나 같아야 합니다.
  2. 하나 이상의 U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION(탭) 문자.
  3. 문자열 "-->".
  4. 하나 이상의 U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION(탭) 문자.
  5. WebVTT 타임스탬프로 표현된 큐의 종료 시간 오프셋. 이 WebVTT 타임스탬프는 큐의 시작 시간 오프셋보다 커야 합니다.

WebVTT 큐 타이밍은 WebVTT 큐 블록의 시작 및 종료 오프셋을 제공합니다. 서로 다른 큐는 겹칠 수 있으며, 큐는 항상 시작 시간 순으로 나열됩니다.

WebVTT 타임스탬프는 주어진 순서로 다음 구성 요소들을 포함합니다:

  1. 선택적으로(만약 hours가 0이 아니면 필수):
    1. 두 자리 이상인 ASCII 숫자들로서 hours를 10진 정수로 나타냄.
    2. U+003A 콜론 문자(:)
  2. 두 자리 ASCII 숫자, minutes를 10진 정수로 0 ≤ minutes ≤ 59 범위로 나타냄.
  3. U+003A 콜론 문자(:)
  4. 두 자리 ASCII 숫자, seconds를 10진 정수로 0 ≤ seconds ≤ 59 범위로 나타냄.
  5. U+002E FULL STOP 문자(.)
  6. 세 자리 ASCII 숫자, 천분의 일 초 seconds-frac을 10진 정수로 나타냄.

WebVTT 타임스탬프는 동기화할 WebVTT 파일의 미디어 데이터의 현재 재생 위치에 상대적으로 항상 해석됩니다.

WebVTT 큐 설정 리스트는 임의의 순서로 구분된 0개 이상의 WebVTT 큐 설정들로 구성되며, 각 설정은 하나 이상의 U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION(탭) 문자로 구분됩니다. 각 설정은 주어진 순서대로 다음 구성 요소들로 이루어집니다:

  1. WebVTT 큐 설정 이름.
  2. 선택적인 U+003A 콜론 문자(:).
  3. 선택적인 WebVTT 큐 설정 값.

WebVTT 큐 설정 이름과 WebVTT 큐 설정 값은 각각 U+000A LINE FEED 및 U+000D CARRIAGE RETURN 문자를 제외한 하나 이상의 문자로 구성되며, 전체 결과 문자열은 서브스트링 "-->"를 포함해서는 안 됩니다.

WebVTT 백분율는 다음 구성 요소들로 이루어집니다:

  1. 하나 이상의 ASCII 숫자들.
  2. 선택적으로:
    1. U+002E 점 문자(.).
    2. 하나 이상의 ASCII 숫자들.
  3. U+0025 퍼센트 기호(%).

숫자로 해석될 때, WebVTT 백분율은 0..100 범위여야 합니다.

WebVTT 주석 블록은 주어진 순서대로 다음 구성 요소들을 포함합니다:

  1. 문자열 "NOTE".
  2. 선택적으로, 다음 구성 요소들을 주어진 순서대로 포함:
    1. 다음 중 하나:
    2. U+000A LINE FEED 및 U+000D CARR리지를 제외한 0개 이상의 문자들의 시퀀스(각각은 선택적으로 다음 항목과 WebVTT 라인 종결자로 구분될 수 있음), 단 전체 결과 문자열은 서브스트링 "-->"를 포함해서는 안 됩니다.
  3. WebVTT 라인 종결자.

WebVTT 주석 블록은 파서에 의해 무시됩니다.

4.2. WebVTT 큐 페이로드의 유형

4.2.1. WebVTT 메타데이터 텍스트

WebVTT 메타데이터 텍스트는 U+000A LINE FEED 및 U+000D CARRIAGE RETURN 문자를 제외한 0개 이상의 문자들의 임의 시퀀스로 구성되며, 각 문자는 선택적으로 다음 항목과 WebVTT 라인 종결자로 구분될 수 있습니다. (즉, 연속된 두 개의 WebVTT 라인 종결자를 갖지 않고 시작 또는 끝이 WebVTT 라인 종결자로 시작하거나 끝나지 않는 모든 텍스트.)

WebVTT 메타데이터 텍스트 큐는 스크립트 기반 애플리케이션(예: HTML text track kind로서 metadata 사용)에서만 유용합니다.

4.2.2. WebVTT 캡션 또는 자막 큐 텍스트

WebVTT 캡션 또는 자막 큐 텍스트는 큐 페이로드로서 0개 이상의 WebVTT 캡션 또는 자막 큐 구성 요소들로 구성되며, 임의의 순서로 각 구성 요소는 선택적으로 다음 항목과 WebVTT 라인 종결자로 구분될 수 있습니다.

WebVTT 캡션 또는 자막 큐 구성 요소는 다음과 같습니다:

HTML 문자 참조를 제외한 모든 WebVTT 캡션 또는 자막 큐 구성 요소는 마침표('.') 표기법을 사용하여 큐 구성 요소 시작 태그에 클래스 이름을 붙일 수 있습니다. 클래스 이름은 즉시 점('.') 다음에 와야 합니다.

WebVTT 큐 내부 텍스트는 선택적 WebVTT 라인 종결자 다음에, 임의의 순서로 0개 이상의 WebVTT 캡션 또는 자막 큐 구성 요소들이 오고, 각 요소는 선택적으로 WebVTT 라인 종결자로 끝날 수 있습니다.

WebVTT 큐 클래스 스팬은 주석을 허용하지 않는 WebVTT 큐 스팬 시작 태그 "c", 큐 텍스트를 나타내는 WebVTT 큐 내부 텍스트, 그리고 "c"인 WebVTT 큐 스팬 종료 태그로 구성됩니다.

WebVTT 큐 이탤릭 스팬은 주석을 허용하지 않는 WebVTT 큐 스팬 시작 태그 "i", 이탤릭 처리된 텍스트를 나타내는 WebVTT 큐 내부 텍스트, 그리고 "i"인 WebVTT 큐 스팬 종료 태그로 구성됩니다.

WebVTT 큐 볼드 스팬은 주석을 허용하지 않는 WebVTT 큐 스팬 시작 태그 "b", 굵게 처리된 텍스트를 나타내는 WebVTT 큐 내부 텍스트, 그리고 "b"인 WebVTT 큐 스팬 종료 태그로 구성됩니다.

WebVTT 큐 밑줄 스팬은 주석을 허용하지 않는 WebVTT 큐 스팬 시작 태그 "u", 밑줄 처리된 텍스트를 나타내는 WebVTT 큐 내부 텍스트, 그리고 "u"인 WebVTT 큐 스팬 종료 태그로 구성됩니다.

WebVTT 큐 루비 스팬은 다음 구성 요소들을 주어진 순서로 포함합니다:

  1. 주석을 허용하지 않는 WebVTT 큐 스팬 시작 태그 "ruby".
  2. 다음 그룹의 구성 요소가 하나 이상 순서대로 반복됩니다:
    1. WebVTT 큐 내부 텍스트, 루비 베이스를 나타냄.
    2. WebVTT 큐 스팬 시작 태그 "rt" (주석 불허).
    3. WebVTT 큐 루비 텍스트 스팬: WebVTT 큐 내부 텍스트, 루비 주석의 루비 텍스트 구성 요소를 나타냄.
    4. WebVTT 큐 스팬 종료 태그 "rt". 이 그룹이 루비 스팬에서 마지막 발생인 경우 이 마지막 종료 태그 문자열은 생략될 수 있습니다.
  3. 만약 마지막 종료 태그 문자열이 생략되지 않았다면: 선택적으로 WebVTT 라인 종결자.
  4. 만약 마지막 종료 태그 문자열이 생략되지 않았다면: 제로 또는 그 이상의 U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION(탭) 문자, 각 문자는 선택적으로 WebVTT 라인 종결자를 따를 수 있습니다.
  5. WebVTT 큐 스팬 종료 태그 "ruby".

큐 위치 지정은 베이스 텍스트의 기준선 위치를 제어하며, 루비 텍스트 자체를 제어하지 않습니다.

WebVTT의 루비는 HTML의 루비 기능의 하위 집합입니다. 향후 HTML 및 CSS에서 이러한 기능이 더 성숙해지면 루비 베이스 텍스트용 객체나 복잡한 루비를 지원하도록 확장될 수 있습니다. [HTML51] [CSS3-RUBY]

WebVTT 큐 보이스 스팬은 다음 구성 요소들을 주어진 순서로 포함합니다:

  1. WebVTT 큐 스팬 시작 태그 "v" (주석을 요구함); 주석은 음성의 이름을 나타냅니다.
  2. WebVTT 큐 내부 텍스트.
  3. WebVTT 큐 스팬 종료 태그 "v". 만약 이 WebVTT 큐 보이스 스팬이 그것이 속한 구성 요소들 중 유일한 구성 요소라면, 끝 태그는 간략화를 위해 생략될 수 있습니다.

WebVTT 큐 언어 스팬은 다음 구성 요소들을 주어진 순서로 포함합니다:

  1. WebVTT 큐 스팬 시작 태그 "lang" (주석을 요구함); 주석은 다음 구성 요소의 언어를 나타내며 유효한 BCP 47 언어 태그여야 합니다. [BCP47]
  2. WebVTT 큐 내부 텍스트.
  3. WebVTT 큐 스팬 종료 태그 "lang".

위의 유효한 BCP 47 언어 태그에 관한 요구사항은 작성자 요구사항이므로, 적합성 검사기는 언어 태그의 유효성 검사를 수행하겠지만 다른 사용자 에이전트는 그러지 않을 것입니다.

WebVTT 큐 스팬 시작 태그는 tag name을 가지며 주석을 요구하거나 허용하지 않으며, 다음 구성 요소들을 주어진 순서로 포함합니다:

  1. U+003C LESS-THAN SIGN 문자(<).
  2. tag name.
  3. 다음 시퀀스가 0회 이상 반복됩니다:
    1. U+002E FULL STOP 문자(.)
    2. U+0009 CHARACTER TABULATION(탭), U+000A LINE FEED(LF), U+000D CARRIAGE RETURN(CR), U+0020 SPACE, U+0026 AMPERSAND(&), U+003C LESS-THAN SIGN(<), U+003E GREATER-THAN SIGN(>), U+002E FULL STOP(.) 문자를 제외한 하나 이상의 문자들로 이루어진 클래스. 이 클래스는 큐 스팬의 의미를 설명합니다.

  4. 만약 시작 태그가 주석을 요구한다면: U+0020 SPACE 문자 또는 U+0009 CHARACTER TABULATION(탭) 문자, 그 뒤에 다음 구성 요소들 중 하나 이상이 따라오며, 이들의 표현을 이어붙인 값은 U+0020 SPACE 및 U+0009 CHARACTER TABULATION(탭) 문자를 제외한 적어도 하나의 문자를 포함해야 합니다:

  5. U+003E GREATER-THAN SIGN 문자(>).

WebVTT 큐 스팬 종료 태그는 tag name을 가지며, 다음 구성 요소들을 주어진 순서로 포함합니다:

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

WebVTT 큐 타임스탬프는 U+003C LESS-THAN SIGN 문자(<), 그 뒤에 해당 시점에 큐의 특정 지점이 활성화되는 시간을 나타내는 WebVTT 타임스탬프, 그리고 U+003E GREATER-THAN SIGN 문자(>)가 이어집니다. 이 WebVTT 타임스탬프가 나타내는 시간은 큐 내의 이전 WebVTT 큐 타임스탬프들이 나타내는 시간보다 크고, 또한 큐의 시작 시간 오프셋보다 크며 종료 시간 오프셋보다는 작아야 합니다.

WebVTT 큐 텍스트 스팬은 U+000A LINE FEED(LF), U+000D CARRIAGE RETURN(CR), U+0026 AMPERSAND(&), 및 U+003C LESS-THAN SIGN(<) 문자를 제외한 하나 이상의 문자로 구성됩니다.

WebVTT 큐 스팬 시작 태그 주석 텍스트는 U+000A LINE FEED(LF), U+000D CARRIAGE RETURN(CR), U+0026 AMPERSAND(&), 및 U+003E GREATER-THAN SIGN(>) 문자를 제외한 하나 이상의 문자로 구성됩니다.

4.2.3. WebVTT 챕터 제목 텍스트

WebVTT 챕터 제목 텍스트는 큐 텍스트로서 다음 구성 요소들 중 0개 이상을 사용하며, 각 구성 요소는 선택적으로 다음 항목과 WebVTT 라인 종결자로 구분될 수 있습니다:

4.3. WebVTT 영역 설정

하나의 WebVTT 큐 설정 목록은 WebVTT 영역에 대한 참조를 포함할 수 있습니다. 영역을 정의하려면 WebVTT 영역 정의 블록을 지정합니다.

WebVTT 영역 설정 목록은 다음 구성 요소들 중 0개 이상으로 이루어지며, 임의의 순서로 하나 이상의 U+0020 SPACE 문자, U+0009 CHARACTER TABULATION(탭) 문자 또는 WebVTT 라인 종결자로 구분됩니다. 단, 문자열은 연속된 두 개의 WebVTT 라인 종결자를 포함해서는 안 됩니다. 각 구성 요소는 하나의 WebVTT 영역 설정 목록 문자열 당 한 번만 포함되어야 합니다.

WebVTT 영역 설정 목록은 영역의 치수, 위치 지정 및 앵커링에 관한 구성 옵션을 제공합니다. 예를 들어, 영역 내부의 큐 그룹을 영역의 중앙 및 비디오 뷰포트의 중앙에 앵커할 수 있게 합니다. 이 경우 글꼴 크기가 커지면 영역은 중심으로부터 모든 방향으로 균일하게 확장됩니다.

WebVTT 영역 식별자 설정은 아래 순서로 된 구성 요소들로 이루어집니다:

  1. 문자열 "id".

  2. U+003A COLON 문자 (:).

  3. ASCII 공백 문자를 제외한 하나 이상 임의의 문자로 이루어진 문자열. 이 문자열은 서브스트링 "-->" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN)를 포함해서는 안 됩니다.

하나의 WebVTT 영역 식별자 설정은 해당 WebVTT 파일의 모든 WebVTT 영역의 영역 식별자 설정들 사이에서 고유해야 합니다.

WebVTT 영역 식별자 설정은 각 WebVTT 큐 설정 목록에 반드시 존재해야 합니다. 식별자가 없으면 문법 상 WebVTT 큐를 WebVTT 영역과 연관시킬 수 없습니다.

WebVTT 영역 식별자 설정은 영역에 이름을 부여하여 그 영역에 속한 큐들이 참조할 수 있도록 합니다.

WebVTT 영역 너비 설정은 아래 순서로 된 구성 요소들로 이루어집니다:

  1. 문자열 "width".

  2. U+003A COLON 문자 (:).

  3. WebVTT 백분율.

WebVTT 영역 너비 설정은 큐가 렌더링되고 정렬이 계산되는 영역에 대해 비디오 너비의 백분율로 고정된 너비를 제공합니다.

WebVTT 영역 라인 수 설정은 아래 순서로 된 구성 요소들로 이루어집니다:

  1. 문자열 "lines".

  2. U+003A COLON 문자 (:).

  3. 하나 이상의 ASCII 숫자.

WebVTT 영역 라인 수 설정은 큐가 렌더링되는 영역에 대해 라인 수로 표현된 고정된 높이를 제공합니다. 따라서 스크롤 영역인 경우 롤업 영역의 높이를 정의합니다.

WebVTT 영역 앵커 설정은 아래 순서로 된 구성 요소들로 이루어집니다:

  1. 문자열 "regionanchor".

  2. U+003A COLON 문자 (:).

  3. WebVTT 백분율.

  4. U+002C COMMA 문자 (,).

  5. WebVTT 백분율.

WebVTT 영역 앵커 설정은 영역 박스 내에서 위치가 고정되는 지점을 지정하는 두 개의 백분율 튜플을 제공합니다. 첫 번째 백분율은 x 차원을, 두 번째는 y 차원을 영역 박스의 왼쪽 위 모서리로부터 측정합니다. WebVTT 영역 앵커 설정이 주어지지 않으면 앵커는 기본값으로 0%, 100%(즉 왼쪽 하단 코너)가 됩니다.

WebVTT 영역-뷰포트 앵커 설정은 아래 순서로 된 구성 요소들로 이루어집니다:

  1. 문자열 "viewportanchor".

  2. U+003A COLON 문자 (:).

  3. WebVTT 백분율.

  4. U+002C COMMA 문자 (,).

  5. WebVTT 백분율.

WebVTT 영역-뷰포트 앵커 설정은 영역 앵커 포인트가 고정되는 비디오 뷰포트 내 지점을 지정하는 두 개의 백분율 튜플을 제공합니다. 첫 번째 백분율은 x 차원, 두 번째는 y 차원을 비디오 뷰포트의 왼쪽 위 모서리로부터 측정합니다. 영역 뷰포트 앵커가 주어지지 않으면 기본값은 0%, 100%(즉 왼쪽 하단 코너)입니다.

브라우저에서 영역은 비디오 뷰포트를 기준으로 한 절대 위치의 CSS 박스에 매핑됩니다. 즉, 영역들이 절대 위치로 정렬되는 기준이 되는 상대 위치 박스가 비디오 뷰포트를 나타내며, 오버플로우는 숨김 처리됩니다.

WebVTT 영역 스크롤 설정은 아래 순서로 된 구성 요소들로 이루어집니다:

  1. 문자열 "scroll".

  2. U+003A COLON 문자 (:).

  3. 문자열 "up".

WebVTT 영역 스크롤 설정은 해당 영역에 렌더링된 큐들이 초기 렌더링 위치에서 이동하여 롤업(즉 비디오 뷰포트의 위쪽 방향으로 이동)할 수 있는지 여부를 지정합니다. 스크롤 설정이 생략되면 큐는 렌더된 위치에서 이동하지 않습니다.

큐는 기존에 렌더된 큐 라인 아래의 빈 라인에 한 줄씩 추가됩니다. 이미 렌더된 큐 라인이 제거되고 그것이 다른 렌더된 큐 라인의 위에 있었던 경우, 그 큐 라인은 그 자리를 차지하게 되어 주어진 방향으로 스크롤됩니다. 새 큐 라인을 영역에 추가할 공간이 충분하지 않으면 가장 위의 큐 라인이 보이는 영역에서 밀려나(overflow:hidden으로 서서히 보이지 않게 됨) 새로운 큐 라인이 추가될 공간을 만듭니다.

스크롤 방향이 없을 때는, 큐 라인들이 영역의 아래쪽 라인에 가장 가까운 빈 라인에 추가됩니다. 빈 라인이 없으면 가장 오래된 라인이 교체됩니다.

4.4. WebVTT 큐 설정

하나의 WebVTT 큐 설정은 WebVTT 큐 설정 목록의 일부로, 큐 박스의 위치 및 정렬과 그 내부의 큐 텍스트에 관한 구성 옵션을 제공합니다.

예를 들어, 일련의 WebVTT 큐 설정으로 큐 박스를 왼쪽에 정렬하거나 오른쪽 상단에 위치시키고 그 내부의 큐 텍스트를 가운데 정렬하도록 할 수 있습니다.

현재 WebVTT 큐 설정 중 WebVTT 큐 설정 목록에 나타날 수 있는 것들은 다음과 같습니다:

이들 각 설정은 하나의 WebVTT 큐 설정 목록에 두 번 이상 포함되어서는 안 됩니다.

WebVTT 세로 텍스트 큐 설정은 WebVTT 큐 설정으로서 아래 순서의 구성 요소들로 이루어집니다:

  1. WebVTT 큐 설정 이름(WebVTT 큐 설정 이름)으로 문자열 "vertical".

  2. U+003A COLON 문자 (:).

  3. 다음 문자열들 중 하나를 WebVTT 큐 설정 값으로 가짐: "rl", "lr".

WebVTT 세로 텍스트 큐 설정은 큐가 가로 레이아웃 대신 세로 텍스트 레이아웃을 사용하도록 구성합니다. 예를 들어 일본어에서 세로 레이아웃이 사용될 수 있습니다. 기본값은 가로 레이아웃입니다.

WebVTT 라인 큐 설정은 아래 순서의 구성 요소들로 이루어집니다:

  1. 문자열 "line"을 WebVTT 큐 설정 이름으로 사용.

  2. U+003A COLON 문자 (:).

  3. 다음을 WebVTT 큐 설정 값으로 사용:

    1. 오프셋 값, 아래 중 하나:

      비디오 뷰포트를 기준으로 특정 오프셋을 나타내려면

      WebVTT 백분율.

      또는 라인 번호를 나타내려면
      1. 선택적으로 U+002D HYPHEN-MINUS 문자 (-).
      2. 하나 이상의 ASCII 숫자.

    2. 선택적 정렬 값, 다음 구성 요소로 이루어짐:

      1. U+002C COMMA 문자 (,).
      2. 다음 문자열 중 하나: "start", "center", "end"

WebVTT 라인 큐 설정은 큐 박스가 쓰기 방향에 직교하는 방향으로 비디오 뷰포트의 가장자리로부터 얼마나 오프셋되는지를 구성합니다. 가로 큐의 경우 이는 비디오 뷰포트 상단으로부터의 수직 오프셋이고, 세로 큐의 경우 수평 오프셋입니다. 오프셋은 큐 박스의 start, center 또는 end 정렬을 기준으로 하며, 기본값은 start입니다. 오프셋은 관련된 쓰기 모드 종속 비디오 뷰포트 치수의 백분율로 주어지거나 라인 수로 주어질 수 있습니다. 라인 번호는 큐의 첫 번째 라인 크기를 기반으로 합니다. 양수 라인 번호는 비디오 뷰포트의 시작에서부터 계산(첫 번째 라인은 0번)하고, 음수 라인 번호는 끝에서부터 계산(마지막 라인은 −1번)합니다.

WebVTT 위치 큐 설정은 아래 순서의 구성 요소들로 이루어집니다:

  1. 문자열 "position"을 WebVTT 큐 설정 이름으로 사용.

  2. U+003A COLON 문자 (:).

  3. 다음을 WebVTT 큐 설정 값으로 사용:

    1. 다음으로 구성된 위치 값: WebVTT 백분율.

    2. 선택적 정렬 값, 다음으로 구성됨:

      1. U+002C COMMA 문자 (,).
      2. 다음 문자열 중 하나: "line-left", "center", "line-right"

WebVTT 위치 큐 설정은 WebVTT 라인 큐 설정에 직교하는 방향에서 큐 박스의 들여쓰기 위치를 구성합니다. 가로 큐의 경우 이는 수평 위치입니다. 큐 위치는 비디오 뷰포트의 백분율로 주어집니다. 위치 지정은 line-left, center 또는 line-right 중 하나에 대해 적용되며, 이는 계산된 위치 정렬(computed position alignment)에 의해 결정되지만 WebVTT 위치 큐 설정에 의해 재정의될 수 있습니다.

WebVTT 크기 큐 설정은 아래 순서의 구성 요소들로 이루어집니다:

  1. 문자열 "size"를 WebVTT 큐 설정 이름으로 사용.

  2. U+003A COLON 문자 (:).

  3. WebVTT 큐 설정 값으로서의 WebVTT 백분율.

WebVTT 크기 큐 설정은 WebVTT 위치 큐 설정과 같은 방향에서 큐 박스의 크기를 구성합니다. 가로 큐의 경우 이는 큐 박스의 너비입니다. 값은 비디오 뷰포트 너비의 백분율로 주어집니다.

WebVTT 정렬 큐 설정은 아래 순서의 구성 요소들로 이루어집니다:

  1. 문자열 "align"을 WebVTT 큐 설정 이름으로 사용.

  2. U+003A COLON 문자 (:).

  3. 다음 문자열들 중 하나를 WebVTT 큐 설정 값으로 사용: "start", "center", "end", "left", "right"

WebVTT 정렬 큐 설정은 큐 내 텍스트의 정렬을 구성합니다. "start"와 "end" 키워드는 큐 텍스트 라인의 기본 방향에 상대적입니다; 예컨대 왼쪽에서 오른쪽으로 읽는 영어 텍스트의 경우 "start"는 왼쪽 정렬을 의미합니다.

WebVTT 영역 큐 설정은 아래 순서의 구성 요소들로 이루어집니다:

  1. 문자열 "region"을 WebVTT 큐 설정 이름으로 사용.

  2. U+003A COLON 문자 (:).

  3. WebVTT 큐 설정 값으로서의 WebVTT 영역 식별자.

WebVTT 영역 큐 설정은 큐가 영역의 식별자를 참조하여 해당 영역의 일부가 되도록 구성합니다. 단, 큐에 "vertical", "line" 또는 "size" 큐 설정이 있는 경우에는 해당되지 않습니다. 큐가 영역의 일부인 경우, 그 큐의 "position" 및 "align" 큐 설정은 라인 박스들에 대해 영역 박스를 기준으로 적용되며, 큐 박스의 너비와 높이는 뷰포트 치수가 아니라 영역 치수를 기준으로 계산됩니다.

4.5. 큐 시퀀스의 속성

4.5.1. 중첩된 큐만 사용하는 WebVTT 파일

모든 큐가 다음 규칙을 따르는 WebVTT 파일을 중첩된 큐만 사용하는 WebVTT 파일이라고 합니다:

임의의 두 큐 cue1 및 cue2가 각각 시작 및 종료 시간 오프셋 (x1, y1) 및 (x2, y2)를 가질 때,

다음 예시는 이 정의에 부합합니다:

WEBVTT

00:00.000 --> 01:24.000
Introduction

00:00.000 --> 00:44.000
Topics

00:44.000 --> 01:19.000
Presenters

01:24.000 --> 05:00.000
Scrolling Effects

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

03:00.000 --> 05:00.000
Timeline Panel

이 WebVTT 파일의 큐를 트리 구조로 표현할 수 있는 방법을 확인하십시오:

파일에 이 방식으로 표현할 수 없는 큐가 있으면, 이는 중첩된 큐만 사용하는 WebVTT 파일의 정의에 맞지 않습니다. 예를 들어:

WEBVTT

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

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

이 90초 예시에서는 두 큐가 부분적으로 겹치며, 첫 번째는 두 번째가 끝나기 전에 끝나고 두 번째는 첫 번째가 끝나기 전에 시작합니다. 따라서 이것은 중첩된 큐만 사용하는 WebVTT 파일이 아닙니다.

4.6. WebVTT 파일의 유형

WebVTT 파일의 문법 정의는 다양한 혼합 큐를 가진 여러 종류의 WebVTT 파일을 작성할 수 있도록 허용합니다. 그러나 일반적으로 작성되는 WebVTT 파일 유형은 그중 소수에 불과합니다.

적합성 검사기는 WebVTT 파일을 검증할 때 이러한 유형들을 검증하기 위해 문법 검사 범위를 제한하도록 선택지를 제공할 수 있습니다.

4.6.1. 메타데이터 콘텐츠를 사용하는 WebVTT 파일

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

4.6.2. 챕터 제목 텍스트를 사용하는 WebVTT 파일

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

4.6.3. 캡션 또는 자막 큐 텍스트를 사용하는 WebVTT 파일

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

5. WebVTT 캡션 또는 자막 큐 구성요소의 기본 클래스

많은 캡션 포맷은 텍스트 색상과 텍스트 배경색의 제한된 부분 집합을 지정하는 단순한 방법을 가지고 있습니다. 따라서 WebVTT 규격은 저자가 색 있는 텍스트와 텍스트 배경을 표준 방식으로 마크업하는 데 사용할 수 있도록 큐 구성요소 클래스 이름의 기본 집합을 제공합니다.

CSS 스타일시트를 지원하는 사용자 에이전트는 이 섹션을 사용자 에이전트 스타일시트를 추가하여 구현할 수 있습니다.

5.1. 기본 텍스트 색상

WebVTT 캡션 또는 자막 큐 구성요소 중 아래 표의 첫 번째 열에 있는 항목과 일치하는 하나 이상의 클래스 이름을 가진 요소는 그들의 color 속성을 표준적인 프레젠테이션 힌트로서 표의 두 번째 열에 있는 값으로 설정해야 합니다:

class names color value
white rgba(255,255,255,1)
lime rgba(0,255,0,1)
cyan rgba(0,255,255,1)
red rgba(255,0,0,1)
yellow rgba(255,255,0,1)
magenta rgba(255,0,255,1)
blue rgba(0,0,255,1)
black rgba(0,0,0,1)

캡션 배경을 다루는 경우 혼동하지 마십시오: 클래스 lime의 색상은 전통적으로 캡션에서 green이라는 이름으로 사용되어 온 색입니다(예: 608/708).

기본 어두운 배경에서는 blue와 black 클래스를 사용하지 마십시오. 이들은 읽기 불가능한 텍스트를 만들 수 있습니다. 일반적으로 색 대비에 관한 지침은 WCAG를 참조하시고 [WCAG20] 텍스트 색상, 배경 색상 및 비디오의 색상을 고려하십시오.

5.2. 기본 텍스트 배경색

WebVTT 캡션 또는 자막 큐 구성요소 중 아래 표의 첫 번째 열에 있는 항목과 일치하는 하나 이상의 클래스 이름을 가진 요소는 그들의 background-color 속성을 프레젠테이션 힌트로서 표의 두 번째 열에 있는 값으로 설정해야 합니다:

class names background value
bg_white rgba(255,255,255,1)
bg_lime rgba(0,255,0,1)
bg_cyan rgba(0,255,255,1)
bg_red rgba(255,0,0,1)
bg_yellow rgba(255,255,0,1)
bg_magenta rgba(255,0,255,1)
bg_blue rgba(0,0,255,1)
bg_black rgba(0,0,0,1)

클래스 bg_lime의 색상은 전통적으로 캡션에서 green이라는 이름으로 사용되어 온 색입니다(예: 608/708).

색상과 배경 클래스의 캐스케이드를 결정할 때는, 등장 순서가 클래스들의 캐스케이드를 결정합니다.

다음 예시는 클래스 사용 방법을 보여줍니다.

WEBVTT

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

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

기본 클래스는 저자가 변경할 수 있습니다. 예: ::cue(.yellow) {color:cyan} 은 .yellow 클래스가 적용된 모든 텍스트를 시안(cyan)으로 변경합니다。

6. 파싱

WebVTT 파일 파싱은 캡션, 자막, 챕터, 메타데이터 등 모든 종류의 WebVTT 파일에서 동일하게 적용됩니다. 챕터나 메타데이터 파일의 경우 대부분의 단계가 생략됩니다.

6.1. WebVTT 파일 파싱

WebVTT 파서는 입력 바이트 스트림, 텍스트 트랙 큐 목록 output, 그리고 CSS 스타일 시트 stylesheets가 주어지면 UTF-8 디코드 알고리즘을 사용해 바이트 스트림을 디코드한 뒤, 아래 WebVTT 파서 알고리즘에 따라 결과 문자열을 파싱해야 합니다. 이로 인해 WebVTT 큐가 output에 추가되고, CSS 스타일 시트가 stylesheets에 추가됩니다. [RFC3629]

WebVTT 파서의 변환 및 파싱 단계는 일반적으로 비동기적으로 실행되며, 입력 바이트 스트림이 점진적으로 갱신됩니다. 이를 증분 WebVTT 파서라고 합니다.

WebVTT 파서는 주어진 바이트 스트림을 파싱하기 전에 파일 서명을 확인합니다. 스트림에 WebVTT 파일 서명이 없으면 파싱을 중단합니다.

WebVTT 파서 알고리즘은 다음과 같습니다:

  1. input을 유니코드로 변환한 후 다음 변환을 적용하여 파싱할 문자열로 두세요:

    • 모든 U+0000 NULL 문자를 U+FFFD 대체 문자로 바꿉니다.

    • 모든 U+000D 캐리지 리턴 U+000A 라인 피드(CRLF) 쌍을 U+000A 라인 피드(LF) 한 개로 바꿉니다.

    • 남은 모든 U+000D 캐리지 리턴 문자를 U+000A 라인 피드(LF)로 바꿉니다.

  2. input 내 포인터인 position을 문자열의 처음 위치로 설정하세요. 증분 WebVTT 파서에서 이 알고리즘(및 연동되는 추가 알고리즘)이 position 포인터를 이동할 때, 사용자 에이전트는 바이트 스트림에서 적절한 추가 문자가 input에 추가될 때까지 기다려야 하며 알고리즘이 input 끝을 지나 읽지 못하도록 해야 합니다. 스트림이 종료되어 모든 문자가 input에 추가된 후, 해당 알고리즘 지시에 따라 position 포인터가 input 끝을 지날 수 있습니다.

  3. seen cue를 false로 설정하세요.

  4. input이 6자 미만이면 이 단계를 중단하세요. 파일이 올바른 WebVTT 파일 서명으로 시작하지 않았으므로 성공적으로 처리되지 못했습니다.

  5. input이 정확히 6자이면서 "WEBVTT"와 일치하지 않으면 이 단계를 중단하세요. 파일이 올바른 WebVTT 파일 서명으로 시작하지 않았으므로 성공적으로 처리되지 못했습니다.

  6. input이 6자보다 많으나 처음 6자가 "WEBVTT"와 정확히 일치하지 않거나, 일곱 번째 문자가 U+0020(스페이스), U+0009(탭), U+000A(LF)가 아니면 이 단계를 중단합니다. 파일이 올바른 WebVTT 파일 서명으로 시작하지 않았으므로 성공적으로 처리되지 못했습니다.

  7. U+000A 라인 피드(LF)가 아닌 코드 포인트 시퀀스를 모으세요.

  8. position이 input 끝을 넘으면 이 단계를 중단하세요. 파일은 성공적으로 처리됐으나 유의미한 데이터가 없어 WebVTT 큐가 output에 추가되지 않았습니다.

  9. position이 가리키는 문자는 U+000A 라인 피드(LF)입니다. position을 input의 다음 문자로 이동하세요.

  10. position이 input의 끝을 넘으면 이 단계를 중단하세요. 파일은 성공적으로 처리됐으나 유의미한 데이터가 없어 WebVTT 큐가 output에 추가되지 않았습니다.

  11. Header: position이 가리키는 문자가 U+000A 라인 피드(LF)가 아니라면 in header 플래그로 WebVTT 블록을 수집하세요. 그렇지 않으면 position을 input의 다음 문자로 이동하세요.

  12. U+000A 라인 피드(LF) 문자 시퀀스를 모으세요.

  13. regions를 빈 텍스트 트랙 지역 목록으로 두세요.

  14. 블록 루프: position이 input의 끝을 넘지 않는 동안:

    1. WebVTT 블록을 수집하고 반환값을 block에 할당하세요.

    2. block이 WebVTT 큐이면 block을 텍스트 트랙 큐 목록 output에 추가하세요.

    3. 그 밖에 block이 CSS 스타일 시트이면 block을 stylesheets에 추가하세요.

    4. 그 밖에 block이 WebVTT 지역 객체이면 block을 regions에 추가하세요.

    5. U+000A 라인 피드(LF) 문자 시퀀스를 모으세요.

  15. 끝: 파일이 끝났습니다. 이 단계를 중단하세요. WebVTT 파서가 완료되었습니다. 파일이 성공적으로 처리됐습니다.

위 알고리즘이 WebVTT 블록을 수집(선택적으로 in header 플래그 포함)하라고 할 때, 사용자 에이전트는 다음 단계를 실행해야 합니다:

  1. input, position, seen cue, regions은 호출한 알고리즘 내 변수를 그대로 사용하세요.

  2. line count를 0으로 두세요.

  3. previous position을 position으로 두세요.

  4. line을 빈 문자열로 두세요.

  5. buffer를 빈 문자열로 두세요.

  6. seen EOF를 false로 두세요.

  7. seen arrow를 false로 두세요.

  8. cue를 null로 두세요.

  9. stylesheet를 null로 두세요.

  10. region을 null로 두세요.

  11. 루프: 다음 하위 단계를 반복하세요:

    1. U+000A 라인 피드(LF)가 아닌 코드 포인트 시퀀스를 모아 line에 할당하세요(있다면).

    2. line count를 1 증가시키세요.

    3. position이 input 끝을 넘으면 seen EOF를 true로 두세요. 그렇지 않으면, position이 가리키는 문자는 U+000A 라인 피드(LF)이므로 position을 input의 다음 문자로 이동하세요.

    4. line에 세 문자 부분 문자열 "-->"(U+002D, U+002D, U+003E)이 포함되어 있다면 다음 하위 단계를 실행하세요:

      1. in header가 설정되지 않고 아래 조건 중 하나라도 참이면:

        • line count가 1이다

        • line count가 2이고 seen arrow가 false이다

        ...다음 하위 단계를 실행하세요:

        1. seen arrow를 true로 두세요.

        2. previous position을 position으로 두세요.

        3. 큐 생성: cue를 새로운 WebVTT 큐로 만들고 다음과 같이 초기화하세요:

          1. cue의 텍스트 트랙 큐 식별자를 buffer로 설정하세요.

          2. cue의 텍스트 트랙 큐 pause-on-exit 플래그를 false로 설정하세요.

          3. cue의 WebVTT 큐 지역을 null로 설정하세요.

          4. cue의 WebVTT 큐 쓰기 방향을 horizontal로 설정하세요.

          5. cue의 WebVTT 큐 snap-to-lines 플래그를 true로 설정하세요.

          6. cue의 WebVTT 큐 line을 auto로 설정하세요.

          7. cue의 WebVTT 큐 line alignment를 start alignment로 설정하세요.

          8. cue의 WebVTT 큐 position을 auto로 설정하세요.

          9. cue의 WebVTT 큐 position alignment를 auto로 설정하세요.

          10. cue의 WebVTT 큐 size를 100으로 설정하세요.

          11. cue의 WebVTT 큐 text alignment를 center alignment로 설정하세요.

          12. cue의 cue text를 빈 문자열로 설정하세요.

        4. WebVTT 큐의 timings 및 settings 수집을 line에서 regions와 함께 cue에 적용하세요. 실패 시 cue를 null로 두세요. 그렇지 않으면 buffer를 빈 문자열로, seen cue를 true로 두세요.

        그렇지 않으면 position을 previous position으로 돌리고 루프를 종료하세요.

    5. 그 밖에 line이 빈 문자열이면 루프를 종료하세요.

    6. 그 밖에 다음 하위 단계를 실행하세요:

      1. in header가 해제되어 있고 line count가 2이면 다음을 실행하세요:

        1. seen cue가 false이고 buffer가 "STYLE"로 시작하며 나머지 문자가 모두 ASCII 공백이면, 다음 하위 단계를 실행하세요:

          1. stylesheet를 CSS 스타일 시트 생성 결과로 두고 속성은 다음과 같습니다: [CSSOM]

            location
            null
            parent CSS style sheet
            null
            owner node
            null
            owner CSS rule
            null
            media
            빈 문자열
            title
            빈 문자열
            alternate flag
            Unset
            origin-clean flag
            Set

          2. buffer를 빈 문자열로 두세요.

        2. 그밖에 seen cue가 false이고, buffer가 "REGION"으로 시작하며, 나머지 문자가 모두 ASCII 공백이면, 다음 하위 단계를 실행하세요:

          1. Region 생성: region을 새 WebVTT 지역으로 두세요.

          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 라인 피드(LF) 문자를 buffer 뒤에 추가하세요.

      3. line을 buffer에 추가하세요.

      4. previous position을 position으로 두세요.

    7. seen EOF가 true이면 루프를 종료하세요.

  12. cue가 null이 아니면 cue의 cue text를 buffer로 하고 cue를 반환하세요.

  13. 그렇지 않고 stylesheet가 null이 아니면 스타일시트 파싱을 buffer에서 수행하세요. 규칙 목록이 반환되면 해당 목록을 stylesheet의 CSS rules로 두세요. 그렇지 않으면 빈 목록으로 두세요. [CSSOM] [CSS-SYNTAX-3] 마지막으로 stylesheet를 반환하세요.

  14. 그밖에 region이 null이 아니면, WebVTT 지역 설정 수집을 buffer에서 region과 함께 실행, WebVTT 지역 객체를 region에서 만들고 반환하세요.

  15. 그 외의 경우 null을 반환하세요.

6.2. WebVTT 지역 설정 파싱

WebVTT 파서 알고리즘에서 문자열 input에서 WebVTT 지역 설정 수집을 텍스트 트랙에 대해 수행하라고 지시하면, 사용자 에이전트는 다음 알고리즘을 실행해야 합니다.

WebVTT 지역 객체는 WebVTT 지역을 나타내는 개념적 구조이며, WebVTT 노드 객체 목록의 루트 노드로 사용됩니다. 이 알고리즘은 WebVTT 지역 객체의 목록을 반환합니다.

  1. settings를 공백 기준으로 input을 분할한 결과로 두세요.

  2. settings 목록의 각 토큰 setting마다 다음 하위 단계를 실행하세요:

    1. setting에 U+003A COLON 문자(:)가 포함되지 않거나, setting에서 첫 번째 U+003A COLON 문자가 setting의 첫 문자 또는 마지막 문자라면 next setting 단계로 건너뜁니다.

    2. name을 setting에서 첫 번째 U+003A COLON 문자(:)까지(제외) 앞부분의 부분 문자열로 둡니다.

    3. value를 setting에서 첫 번째 U+003A COLON 문자(:) 뒤부터 끝까지의 부분 문자열로 둡니다.

    4. name의 값에 따라 맞는 하위 단계를 실행하세요:

      name이 "id"와 대소문자 구분 일치라면

      region의 식별자를 value로 두세요.

      그 외 name이 "width"와 대소문자 구분 일치라면

      백분율 문자열 파싱을 value에 대해 수행하여 percentage가 반환되면, region의 WebVTT 지역 너비를 percentage로 두세요.

      그 외 name이 "lines"와 대소문자 구분 일치라면

      1. value에 ASCII 숫자 외의 문자가 포함되면 next setting 단계로 건너뜁니다.

      2. value를 정수로 해석하고 number로 둡니다.

      3. region의 WebVTT 지역 lines를 number로 두세요.

      그 외 name이 "regionanchor"와 대소문자 구분 일치라면

      1. value에 U+002C COMMA 문자(,)가 포함되지 않았으면 next setting 단계로 건너뜁니다.

      2. anchorX를 value의 첫 번째 U+002C COMMA 문자(,)까지(제외) 앞부분의 부분 문자열로 둡니다.

      3. anchorY를 value의 첫 번째 U+002C COMMA 문자(,) 뒤부터 끝까지의 부분 문자열로 둡니다.

      4. 백분율 문자열 파싱을 anchorX 또는 백분율 문자열 파싱을 anchorY에 대해 수행한 결과가 percentage가 아니면 next setting 단계로 건너뜁니다.

      5. region의 WebVTT 지역 앵커점을 anchorX, anchorY에서 계산된 percentage 값의 튜플로 두세요.

      그 외 name이 "viewportanchor"와 대소문자 구분 일치라면

      1. value에 U+002C COMMA 문자(,)가 포함되지 않았으면 next setting 단계로 건너뜁니다.

      2. viewportanchorX를 value의 첫 번째 U+002C COMMA 문자(,)까지(제외) 앞부분의 부분 문자열로 둡니다.

      3. viewportanchorY를 value의 첫 번째 U+002C COMMA 문자(,) 뒤부터 끝까지의 부분 문자열로 둡니다.

      4. 백분율 문자열 파싱을 viewportanchorX 또는 백분율 문자열 파싱을 viewportanchorY에 대해 수행한 결과가 percentage가 아니면 next setting 단계로 건너뜁니다.

      5. region의 WebVTT 지역 뷰포트 앵커점을 viewportanchorX, viewportanchorY에서 계산된 percentage 값의 튜플로 두세요.

      그 외 name이 "scroll"와 대소문자 구분 일치라면

      1. value가 "up"과 대소문자 구분 일치라면, region의 scroll 값을 up으로 두세요.

    5. Next setting: 다음 설정으로 넘어가세요.

백분율 문자열 파싱 규칙은 아래와 같습니다. 반환값은 0..100 사이의 숫자거나 없을 수 있습니다. 알고리즘 수행 중 "실패"라고 명시되면, 즉시 중단하고 아무것도 반환하지 않습니다.

  1. input을 파싱할 문자열로 둡니다.

  2. input이 WebVTT 백분율 문법과 일치하지 않으면 실패합니다.

  3. input의 마지막 문자를 제거합니다.

  4. percentage를 부동소수점 숫자 값 파싱 규칙에 따라 input에서 얻은 값으로 둡니다. [HTML51]

  5. percentage가 오류이거나 0 미만이거나 100 초과일 경우 실패합니다.

  6. percentage를 반환합니다.

6.3. WebVTT 큐 타이밍 및 설정 파싱

위 알고리즘에서 문자열 input에서 WebVTT 큐 타이밍 및 설정 수집을 텍스트 트랙 지역 목록 regions을 사용해 WebVTT 큐 cue에 대해 수행하라고 했을 때, 사용자 에이전트는 다음 알고리즘을 실행해야 합니다.

  1. input을 파싱할 문자열로 둡니다.

  2. position을 input의 시작을 가리키는 포인터로 둡니다.

  3. 공백 문자 건너뛰기.

  4. WebVTT 타임스탬프 수집. 알고리즘이 실패하면 이 단계를 중단하고 실패를 반환합니다. 그렇지 않으면 cue의 텍스트 트랙 큐 시작 시간을 수집된 시간으로 둡니다.

  5. 공백 문자 건너뛰기.

  6. position의 문자가 U+002D 하이픈 마이너스 문자(-)가 아니라면 이 단계를 중단하고 실패를 반환합니다. 그렇지 않으면 position을 한 글자 앞으로 이동합니다.

  7. position의 문자가 U+002D 하이픈 마이너스 문자(-)가 아니라면 이 단계를 중단하고 실패를 반환합니다. 그렇지 않으면 position을 한 글자 앞으로 이동합니다.

  8. position의 문자가 U+003E 보다 큰 문자(>)가 아니라면 이 단계를 중단하고 실패를 반환합니다. 그렇지 않으면 position을 한 글자 앞으로 이동합니다.

  9. 공백 문자 건너뛰기.

  10. WebVTT 타임스탬프 수집. 알고리즘이 실패하면 이 단계를 중단하고 실패를 반환합니다. 그렇지 않으면 cue의 텍스트 트랙 큐 종료 시간을 수집된 시간으로 둡니다.

  11. remainder를 input의 position부터 시작하는 뒷부분 문자열로 둡니다.

  12. WebVTT 큐 설정 파싱을 remainder에서 regions와 함께 cue에 대해 수행합니다.

사용자 에이전트가 WebVTT 큐 설정 파싱을 문자열 input에서 텍스트 트랙 지역 목록 regions을 사용하여 텍스트 트랙 큐 cue에 대해 수행해야 할 경우, 다음 단계를 실행해야 합니다:

  1. settings를 공백 기준으로 input을 분할한 결과로 둡니다.

  2. settings 목록의 각 setting마다 다음 하위 단계를 실행합니다:

    1. setting에 U+003A 콜론(:) 문자가 포함되어 있지 않거나, setting에서 첫 번째 U+003A 콜론 문자가 첫째나 마지막 문자라면, next setting 단계로 건너뜁니다.

    2. name을 setting의 첫 번째 U+003A 콜론 문자(:) 앞까지(제외) 앞부분 부분 문자열로 둡니다.

    3. value를 setting의 첫 번째 U+003A 콜론 문자(:) 뒤부터 끝까지의 뒷부분 부분 문자열로 둡니다.

    4. name 값에 따라 다음 해당 하위 단계를 실행하세요:

      name이 "region"과 대소문자 구분 일치일 경우

      1. cue의 WebVTT 큐 지역을 regions 내 WebVTT 지역 중 WebVTT 지역 식별자가 value와 같은 마지막 항목(없으면 null)으로 둡니다.

      name이 "vertical"과 대소문자 구분 일치일 경우

      1. value가 "rl"과 대소문자 구분 일치라면 cue의 WebVTT 큐 쓰기 방향을 세로(좌)로 둡니다.

      2. 그밖에 value가 "lr"과 대소문자 구분 일치라면 cue의 WebVTT 큐 쓰기 방향을 세로(우)로 둡니다.

      3. cue의 WebVTT 큐 쓰기 방향이 가로가 아니라면 cue의 WebVTT 큐 지역을 null로 둡니다.

      name이 "line"과 대소문자 구분 일치일 경우

      1. value에 U+002C 쉼표(,)가 있으면 linepos를 쉼표 전 앞부분으로, linealign을 쉼표 뒤 뒷부분으로 합니다.

      2. 그외의 경우 linepos에 value 전체를, linealign은 null로 둡니다.

      3. linepos에 ASCII 숫자가 하나도 없다면 next setting으로 건너뜁니다.

      4. linepos의 마지막 문자가 U+0025 퍼센트(%)라면

        백분율 문자열 파싱이 실패하지 않으면, number를 반환된 percentage 값으로 정하고, 실패 시 next setting으로 건너뜁니다.

        그 외

        1. linepos에 하이픈(-), ASCII 숫자, U+002E 점(.) 이외의 문자가 있으면 next setting으로 건너뜁니다.

        2. 첫 문자 이외에 하이픈(-)이 있으면 next setting으로 건너뜁니다.

        3. 점(.)이 2개 이상 있으면 next setting으로 건너뜁니다.

        4. 점(.)이 있고, 그 앞/뒤 문자가 ASCII 숫자가 아니거나, 첫/마지막 문자가 점(.)이면 next setting으로 건너뜁니다.

        5. number를 부동소수점 파싱 규칙으로 linepos에서 얻은 값으로 둡니다.

        6. number가 오류이면 next setting으로 건너뜁니다.

      5. linealign이 "start"와 대소문자 구분 일치라면 cue의 WebVTT 큐 줄 정렬을 start alignment로 둡니다.

      6. 그 외 linealign이 "center"와 대소문자 구분 일치라면 cue의 WebVTT 큐 줄 정렬을 center alignment로 둡니다.

      7. 그 외 linealign이 "end"와 대소문자 구분 일치라면 cue의 WebVTT 큐 줄 정렬을 end alignment로 둡니다.

      8. 그 외 linealign이 null이 아니면 next setting으로 건너뜁니다.

      9. cue의 WebVTT 큐 라인을 number로 둡니다.

      10. linepos의 마지막 문자가 퍼센트(%)이면 cue의 WebVTT 큐 snap-to-lines 플래그를 false로, 아니면 true로 둡니다.

      11. cue의 WebVTT 큐 라인이 auto가 아니면 cue의 WebVTT 큐 지역을 null로 둡니다.

      name이 "position"과 대소문자 구분 일치일 경우

      1. value에 U+002C 쉼표(,)가 있으면 colpos를 쉼표 전 앞부분, colalign을 쉼표 뒤 뒷부분으로 두세요.

      2. 아니면 colpos는 value 전체, colalign은 null로 두세요.

      3. 백분율 문자열 파싱이 colpos에 실패하지 않으면 number를 반환된 percentage 값으로 하고, 실패 시 next setting으로 건너뜁니다(position 값은 auto로 유지됨).

      4. colalign이 "line-left"와 대소문자 구분 일치라면 cue의 WebVTT 큐 위치 정렬을 line-left alignment로 둡니다.

      5. 그 외 colalign이 "center"와 대소문자 구분 일치라면 cue의 WebVTT 큐 위치 정렬을 center alignment로 둡니다.

      6. 그 외 colalign이 "line-right"와 대소문자 구분 일치라면 cue의 WebVTT 큐 위치 정렬을 line-right alignment로 둡니다.

      7. 그 외 colalign이 null이 아니면 next setting으로 건너뜁니다.

      8. cue의 position을 number로 둡니다.

      name이 "size"와 대소문자 구분 일치일 경우

      1. 백분율 문자열 파싱이 value에 실패하지 않으면 number를 반환된 percentage 값으로 하고, 실패 시 next setting으로 건너뜁니다.

      2. cue의 WebVTT 큐 크기를 number로 둡니다.

      3. cue의 WebVTT 큐 크기가 100이 아니면 cue의 WebVTT 큐 지역을 null로 둡니다.

      name이 "align"와 대소문자 구분 일치일 경우

      1. value가 "start"와 대소문자 구분 일치라면 cue의 WebVTT 큐 텍스트 정렬을 start alignment로 둡니다.

      2. value가 "center"와 대소문자 구분 일치라면 cue의 WebVTT 큐 텍스트 정렬을 center alignment로 둡니다.

      3. value가 "end"와 대소문자 구분 일치라면 cue의 WebVTT 큐 텍스트 정렬을 end alignment로 둡니다.

      4. value가 "left"와 대소문자 구분 일치라면 cue의 WebVTT 큐 텍스트 정렬을 left alignment로 둡니다.

      5. value가 "right"와 대소문자 구분 일치라면 cue의 WebVTT 큐 텍스트 정렬을 right alignment로 둡니다.

    5. Next setting: 다음 토큰이 있다면 계속 진행합니다.

이 명세가 사용자 에이전트에게 WebVTT 타임스탬프 수집을 지시할 때, 다음 단계를 실행해야 합니다:

  1. input과 position을 호출 알고리즘에서 동일 이름의 변수로 둡니다.

  2. most significant units를 분으로 둡니다.

  3. position이 input의 끝을 초과하면 오류를 반환하고 종료합니다.

  4. position이 가리키는 문자가 ASCII 숫자가 아니면, 오류를 반환하고 종료합니다.

  5. ASCII 숫자 코드 포인트를 연속해서 수집하고, string에 그 부분 문자열을 둡니다.

  6. string을 10진수 정수로 변환하고 value1로 둡니다.

  7. string이 정확히 2자가 아니거나, value1이 59보다 크면 most significant units를 시로 둡니다.

  8. position이 input의 끝을 넘어가거나, position의 문자가 U+003A 콜론(:)이 아니면 오류 반환 및 종료. 아니면 position을 한 글자 앞으로 이동.

  9. ASCII 숫자 코드 포인트를 연속해서 수집하고 string에 저장.

  10. string이 정확히 2자가 아니면 오류 반환 및 종료.

  11. string을 10진수 정수로 변환하고 value2로 둡니다.

  12. most significant units가 시이거나, position이 input 끝을 넘지 않았고 position의 문자가 콜론(:)이라면 다음을 실행합니다:

    1. position이 input 끝을 넘거나 콜론(:)이 아니면 오류, 아니면 position을 한 글자 앞으로 이동합니다.

    2. ASCII 숫자 코드 포인트를 연속해서 수집하고 string에 저장.

    3. string이 정확히 2자가 아니면 오류.

    4. string을 10진수 정수로 변환하고 value3에 둡니다.

    그 외(most significant units가 시 아님 & position이 끝이거나 문자가 콜론(:)이 아니면) value3에 value2 값, value2에 value1 값, value1는 0으로 둡니다.

  13. position이 input 끝을 넘거나, 문자가 마침표(.)가 아니면 오류 반환 및 종료, 아니면 position을 한 글자 앞으로 이동.

  14. ASCII 숫자 코드 포인트를 연속해서 수집하고 string에 저장.

  15. string이 정확히 3자가 아니면 오류 반환 및 종료.

  16. string을 10진수 정수로 변환하고 value4에 둡니다.

  17. value2가 59 초과거나 value3가 59 초과면 오류 반환 및 종료.

  18. result를 value1×60×60 + value2×60 + value3 + value4∕1000 으로 둡니다.

  19. result를 반환합니다.

6.4. WebVTT 큐 텍스트 파싱 규칙

WebVTT 노드 객체는 큐 텍스트의 구성 요소를 표현하기 위한 개념적 구조로, 내부 구문과 무관하게 처리 과정을 설명할 수 있게 해줍니다.

WebVTT 노드 객체는 두 가지 주요 범주가 있습니다: WebVTT 내부 노드 객체와 WebVTT 리프(Leaf) 노드 객체입니다.

WebVTT 내부 노드 객체는 다른 WebVTT 노드 객체를 포함할 수 있습니다. 이는 HTML이나 DOM의 요소들과 개념적으로 유사합니다. WebVTT 내부 노드 객체는 자식 WebVTT 노드 객체의 순서 있는 목록을 가집니다. WebVTT 내부 노드 객체는 자식의 부모라고 불립니다. 순환 구조는 생기지 않으며, 이렇게 만들어진 부모-자식 관계는 트리 구조를 형성합니다. WebVTT 내부 노드 객체는 또한 클래스 명이 순서 있게 모인 목록(적용 가능한 클래스)과 BCP 47 언어 태그로 해석되는 언어 정보(적용 가능한 언어)도 가집니다. [BCP47]

유저 에이전트는 적용 가능한 언어로 올바르지 않거나 잘 형성되지 않은 언어 태그라도 추가할 수 있습니다. [BCP47]

WebVTT 내부 노드 객체의 구체 클래스는 다음과 같습니다:

WebVTT 노드 객체 목록

이 객체는 WebVTT 노드 객체 트리의 루트 노드로 사용됩니다.

WebVTT 클래스 객체

이 객체는 WebVTT 큐 클래스 영역에서 텍스트 구간을 나타내며, 큐 텍스트의 일부에 적용 가능한 클래스로만 주석을 달며, 다른 의미(기울임, 굵게 등)를 내포하지 않습니다.

WebVTT 이탤릭체 객체

이 객체는 WebVTT 큐 이탤릭스 영역에서 이탤릭체 텍스트 구간을 나타내며, WebVTT 캡션 또는 자막 큐 텍스트에 해당합니다.

WebVTT 볼드체 객체

이 객체는 WebVTT 큐 볼드 영역에서 굵은 텍스트 구간을 나타내며, WebVTT 캡션 또는 자막 큐 텍스트에 해당합니다.

WebVTT 밑줄 객체

이 객체는 WebVTT 큐 밑줄 영역에서 밑줄 텍스트 구간을 나타내며, WebVTT 캡션 또는 자막 큐 텍스트에 해당합니다.

WebVTT 루비(Ruby) 객체

이 객체는 WebVTT 큐 루비 영역에서 루비 Span 구간을 나타내며, WebVTT 캡션 또는 자막 큐 텍스트에 해당합니다.

WebVTT 루비 텍스트 객체

이 객체는 WebVTT 큐 루비 텍스트 영역에서 루비 텍스트 구간을 나타내며, WebVTT 캡션 또는 자막 큐 텍스트에 해당합니다.

WebVTT 보이스(Voice) 객체

이 객체는 특정 화자와 연관된 텍스트 구간(WebVTT 큐 보이스 영역)을 나타내며, WebVTT 캡션 또는 자막 큐 텍스트에서 사용됩니다. WebVTT 보이스 객체는 화자의 이름에 해당하는 값을 가집니다.

WebVTT 언어(Language) 객체

이 객체는 WebVTT 큐 언어 영역의 텍스트 구간을 나타내며, WebVTT 캡션 또는 자막 큐 텍스트에서 해당 구간만 적용 가능한 언어가 주변 텍스트와 다를 수 있음을 표기하지만, 다른 의미(기울임, 굵게 등)는 내포하지 않습니다.

WebVTT 리프(Leaf) 노드 객체는 데이터(텍스트 등)를 담으며, 자식 WebVTT 노드 객체를 포함할 수 없습니다.

WebVTT 리프 노드 객체의 구체 클래스는 다음 두 가지입니다:

WebVTT 텍스트 객체

텍스트의 일부입니다. WebVTT 텍스트 객체는 그 값이 해당 텍스트입니다.

WebVTT 타임스탬프 객체

타임스탬프입니다. WebVTT 타임스탬프 객체는 시간(초 및 소수점 이하)을 값으로 가집니다.

WebVTT 큐 텍스트 파싱 규칙은 다음 알고리즘을 포함합니다. 입력은 input으로, WebVTT 캡션 또는 자막 큐 텍스트가 들어오며, 선택적으로 대체 언어 language도 들어올 수 있습니다. 이 알고리즘은 WebVTT 노드 객체 목록을 반환합니다.

  1. input을 파싱할 문자열로 둡니다.

  2. position을 input의 시작을 가리키는 포인터로 둡니다.

  3. result를 빈 WebVTT 노드 객체 목록으로 둡니다.

  4. current를 WebVTT 내부 노드 객체 result로 둡니다.

  5. language stack을 빈 언어 태그 스택으로 둡니다.

  6. language가 지정되어 있으면, result의 적용 가능한 언어를 language로 설정하고 language stack에 language를 푸시합니다.

  7. Loop: position이 input의 끝을 지나면 result를 반환하고 이 단계를 중단합니다.

  8. token을 WebVTT 큐 텍스트 토크나이저를 호출한 결과로 둡니다.

  9. token의 종류에 따라 다음 절차를 실행합니다:

    token이 문자열인 경우

    1. 문자열 토큰 token 값을 가지는 WebVTT 텍스트 객체를 생성합니다.

    2. 생성된 WebVTT 텍스트 객체를 current에 추가합니다.

    token이 시작 태그인 경우

    시작 태그 토큰 token의 처리 방법은 태그 이름에 따라 다릅니다:

    태그명이 "c"인 경우

    WebVTT 클래스 객체를 부착합니다.

    태그명이 "i"인 경우

    WebVTT 이탤릭체 객체를 부착합니다.

    태그명이 "b"인 경우

    WebVTT 볼드체 객체를 부착합니다.

    태그명이 "u"인 경우

    WebVTT 밑줄 객체를 부착합니다.

    태그명이 "ruby"인 경우

    WebVTT 루비 객체를 부착합니다.

    태그명이 "rt"인 경우

    current가 WebVTT 루비 객체인 경우 WebVTT 루비 텍스트 객체를 부착합니다.

    태그명이 "v"인 경우

    WebVTT 보이스 객체를 부착하고, 노트의 어노테이션 문자열 값을 설정합니다(없으면 빈 문자열).

    태그명이 "lang"인 경우

    토큰의 어노테이션 문자열 값을 language stack에 푸시(없으면 빈 문자열), 그리고 WebVTT 언어 객체를 부착합니다.

    그 외

    해당 토큰을 무시합니다.

    위 단계에서 특정 구체 클래스의 WebVTT 내부 노드 객체를 부착하라고 할 때, 다음을 실행합니다:

    1. 지정된 구체 클래스의 WebVTT 내부 노드 객체를 새로 생성합니다.

    2. 새 객체의 적용 가능한 클래스 목록을 토큰 내 클래스 목록(빈 문자열 제외)으로 설정합니다.

    3. 새 객체의 적용 가능한 언어를 language stack의 맨 위 값(비어있지 않을 때만)으로 둡니다.

    4. 생성된 노드 객체를 current에 추가합니다.

    5. current를 새로 생성된 노드 객체로 둡니다.

    token이 종료 태그인 경우

    아래 조건 중 하나라도 해당되면 current를 상위 노드로 이동합니다.

    그밖에 종료 태그명이 "lang"이고 current가 WebVTT 언어 객체라면, current를 부모 노드로 옮기고 language stack 맨 위 값을 팝합니다.

    그밖에 종료 태그명이 "ruby"이고 current가 WebVTT 루비 텍스트 객체라면, current를 현재 부모의 부모 노드로 옮깁니다.

    그 외에는 해당 토큰을 무시합니다.

    token이 타임스탬프 태그인 경우

    1. input을 태그 값으로 둡니다.

    2. position을 input의 시작을 가리키는 포인터로 둡니다.

    3. WebVTT 타임스탬프 수집을 합니다.

    4. 이 알고리즘이 실패하지 않고 position이 input의 끝을 가리키고 있다면, 수집된 시간 값을 가진 WebVTT 타임스탬프 객체를 생성하여 current에 추가합니다.

      그 외에는 해당 토큰을 무시합니다.

  10. Loop 단계로 이동합니다.

WebVTT 큐 텍스트 토크나이저는 다음과 같다. 이 토크나이저는 문자열(값이 문자들의 시퀀스인), 시작 태그(태그 이름, 클래스 목록, 선택적으로 주석 포함), 종료 태그(태그 이름 포함), 또는 타임스탬프 태그(태그 값 포함) 중 하나의 토큰을 방출한다.

  1. input과 position을 이 단계들을 호출한 알고리즘에서 같은 이름을 가진 변수로 둔다.

  2. tokenizer state를 WebVTT 데이터 상태로 둔다.

  3. result를 빈 문자열로 둔다.

  4. classes를 빈 리스트로 둔다.

  5. Loop: position이 input의 끝을 지났으면 c를 EOF 마커로 둔다. 그렇지 않으면, c를 position이 가리키는 input의 문자로 둔다.

    EOF 마커는 유니코드 문자가 아니며 토크나이저 종료 용도다.

  6. tokenizer state가 가리키는 상태로 이동:

    WebVTT 데이터 상태

    c의 값에 따라 아래로 분기:

    U+0026 AMPERSAND (&)

    tokenizer state를 HTML 문자 참조(데이터 상태)로 두고 next 단계로 점프.

    U+003C LESS-THAN SIGN (<)

    result가 빈 문자열이면 tokenizer state를 WebVTT 태그 상태로 두고 next로 점프.

    그렇지 않으면, 값이 result인 문자열 토큰을 반환하고 이 단계들을 중단.

    EOF 마커

    값이 result인 문자열 토큰을 반환하고 이 단계들을 중단.

    그 외

    c를 result에 추가하고 next로 점프.

    HTML 문자 참조(데이터 상태)

    HTML 문자 참조 소비를 시도한다. 추가 허용 문자는 없음.

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

    그 외에는 반환된 문자 토큰의 데이터를 result에 추가.

    이 후에는 반드시 tokenizer state를 WebVTT 데이터 상태로 두고 next 단계로 점프.

    WebVTT 태그 상태

    c 값에 따라 아래로 분기:

    U+0009 TAB
    U+000A LF
    U+000C FF
    U+0020 SPACE

    tokenizer state를 WebVTT 시작 태그 주석 상태로 두고 next로 점프.

    U+002E FULL STOP (.)

    tokenizer state를 WebVTT 시작 태그 클래스 상태로 두고 next로 점프.

    U+002F SOLIDUS (/)

    tokenizer state를 WebVTT 종료 태그 상태로 두고 next로 점프.

    ASCII 숫자

    result에 c를 대입, tokenizer state를 WebVTT 타임스탬프 태그 상태로 두고 next로 점프.

    U+003E GREATER-THAN SIGN (>)

    position을 한 글자 앞으로 이동 후 아래 "EOF 마커"로 점프.

    EOF 마커

    태그 이름이 빈 문자열, 클래스와 주석이 없는 시작 태그를 반환하고 이 단계들을 중단.

    그 외

    result에 c를 대입, tokenizer state를 WebVTT 시작 태그 상태로 두고 next로 점프.

    WebVTT 시작 태그 상태

    c의 값에 따라 아래로 분기:

    U+0009 TAB
    U+000C FF
    U+0020 SPACE

    tokenizer state를 WebVTT 시작 태그 주석 상태로 두고 next로 점프.

    U+000A LF

    buffer에 c를 대입, tokenizer state를 WebVTT 시작 태그 주석 상태로 두고 next로 점프.

    U+002E FULL STOP (.)

    tokenizer state를 WebVTT 시작 태그 클래스 상태로 두고 next로 점프.

    U+003E GREATER-THAN SIGN (>)

    position을 한 글자 앞으로 이동 후 아래 "EOF 마커"로 점프.

    EOF 마커

    태그 이름 result이고 클래스, 주석 없는 시작 태그를 반환하고 이 단계들을 중단.

    그 외

    result에 c를 추가하고 next로 점프.

    WebVTT 시작 태그 클래스 상태

    c 값에 따라 아래로 분기:

    U+0009 TAB
    U+000C FF
    U+0020 SPACE

    classes에 값 buffer를 엔트리로 추가, buffer를 빈 문자열로 하고 tokenizer state를 WebVTT 시작 태그 주석 상태로 두고 next로 점프.

    U+000A LF

    classes에 값 buffer를 엔트리로 추가, buffer를 c로 하고 tokenizer state를 WebVTT 시작 태그 주석 상태로 두고 next로 점프.

    U+002E FULL STOP (.)

    classes에 buffer를 추가하고, buffer를 빈 문자열로 하고 next로 점프.

    U+003E GREATER-THAN SIGN (>)

    position을 한 글자 앞으로 이동 후 아래 "EOF 마커"로 점프.

    EOF 마커

    classes에 buffer를 추가, 태그 이름 result와 클래스 목록 classes, 주석 없는 시작 태그를 반환, 이 단계 중단.

    그 외

    buffer에 c를 추가하고 next로 점프.

    WebVTT 시작 태그 주석 상태

    c 값에 따라 아래로 분기:

    U+0026 AMPERSAND (&)

    tokenizer state를 HTML 문자 참조(주석 상태)로 두고 next로 점프.

    U+003E GREATER-THAN SIGN (>)

    position을 한 글자 앞으로 이동 후 아래 "EOF 마커"로 점프.

    EOF 마커

    buffer의 앞뒤 ASCII 공백을 제거, 연속된 공백을 U+0020 SPACE 1개로 변경, 그런 다음 태그 이름 result, 클래스 classes, 주석 buffer로 시작 태그 반환, 이 단계 중단.

    그 외

    buffer에 c를 추가하고 next로 점프.

    HTML 문자 참조(주석 상태)

    HTML 문자 참조 소비를 시도한다. 추가 허용 문자는 U+003E GREATER-THAN SIGN(>)이다.

    아무것도 반환되지 않으면 buffer에 U+0026 AMPERSAND(&) 추가.

    그 외 반환된 문자 토큰의 데이터를 buffer에 추가.

    이후 반드시 tokenizer state를 WebVTT 시작 태그 주석 상태로 두고 next로 점프.

    WebVTT 종료 태그 상태

    c의 값에 따라 아래로 분기:

    U+003E GREATER-THAN SIGN (>)

    position을 한 글자 앞으로 이동 후 아래 "EOF 마커"로 점프.

    EOF 마커

    태그 이름 result의 종료 태그를 반환하고 중단.

    그 외

    result에 c를 추가, next로 점프.

    WebVTT 타임스탬프 태그 상태

    c 값에 따라 아래로 분기:

    U+003E GREATER-THAN SIGN (>)

    position을 한 글자 앞으로 이동 후 아래 "EOF 마커"로 점프.

    EOF 마커

    태그 이름 result의 타임스탬프 태그를 반환하고 중단.

    그 외

    result에 c를 추가, next로 점프.

  7. Next: position을 input의 다음 문자로 이동.

  8. loop 단계로 점프.

위 알고리즘에서 HTML 문자 참조 소비를 시도하라고 하면, HTML의 문자 참조 소비 정의를 따른다. [HTML51]

HTML 명세에서 문자 소비는 position을 input의 다음 문자로 이동시키는 뜻이다. 문자 "언소비"는 position을 input의 이전 문자로 이동시키는 뜻이다. "EOF"는 이 명세 내의 EOF 마커와 동일하다. 마지막으로, 이 문맥은 세미콜론이 빠질 때 "속성의 일부로" 처리되는 문맥이 아님에 유의.

6.5. WebVTT 큐 텍스트 DOM 구성 규칙

웹VTT 큐의 내용을 getCueAsHTML() 메서드를 통해 검색하려면, 그것을 DocumentFragment로 파싱해야 합니다. 이 절에서는 그 방법을 설명합니다.

웹VTT 노드 객체 목록을 DOM 트리로 변환할 때, 문서 owner에 대해 사용자 에이전트는 WebVTT Node Objects 트리와 동형(isomorphous)인 DOM 노드 트리를 생성해야 하며, 다음과 같이 WebVTT Node Objects에서 DOM 노드로의 매핑을 따릅니다:

WebVTT Node Object DOM node
List of WebVTT Node Objects DocumentFragment 노드.
WebVTT Region Object DocumentFragment 노드.
WebVTT Class Object HTML span 요소.
WebVTT Italic Object HTML i 요소.
WebVTT Bold Object HTML b 요소.
WebVTT Underline Object HTML u 요소.
WebVTT Ruby Object HTML ruby 요소.
WebVTT Ruby Text Object HTML rt 요소.
WebVTT Voice Object HTML span 요소로, title 속성이 WebVTT Voice Object의 값으로 설정됨.
WebVTT Language Object HTML span 요소로, lang 속성이 WebVTT Language Object의 applicable language으로 설정됨.
WebVTT Text Object Text 노드로, 그 data 는 WebVTT Text Object의 값입니다.
WebVTT Timestamp Object ProcessingInstruction 노드로, 그 target 은 "timestamp"이며, data 는 WebVTT timestamp로, WebVTT Timestamp Object의 값을 나타냅니다. 모든 선택적 구성요소가 포함되며, hours 구성요소가 10보다 작으면 한 자리 앞에 0을 붙이고, 그렇지 않으면 선행 0을 붙이지 않습니다.

위 매핑의 일부로 생성된 HTML 요소들은 그 namespaceURI가 HTML 네임스페이스로 설정되어야 하며, HTML 명세에 정의된 적절한 IDL 인터페이스를 사용해야 합니다. 또한 해당 WebVTT Internal Node Object에 적용 가능한 클래스가 있다면, 그 클래스들을 단일 U+0020 SPACE 문자로 구분하여 연결한 문자열로 class 속성을 설정해야 합니다.

DOM 트리의 모든 노드의 ownerDocument 속성은 주어진 문서 owner로 설정되어야 합니다.

위에서 설명되었거나 위의 특성에 의해 결정되는 것 이외의 모든 DOM 노드 특성은 초기값으로 남겨야 합니다.

6.6. WebVTT 챕터 제목 추출 규칙

The WebVTT rules for extracting the chapter title 은 WebVTT cue cue 에 대해 다음과 같습니다:

  1. nodes를 WebVTT Node Objects 목록으로 두되, 그것은 cue의 cue text에 WebVTT cue text parsing rules를 적용하여 얻은 것입니다.

  2. 프리오더(pre-order), 깊이 우선 탐색으로 nodes에 있는 각 WebVTT Text Object의 값들을 연결한 문자열을 반환하되, WebVTT Ruby Text Objects와 그 자손은 제외합니다.

7. 렌더링

이 절은 사용자 에이전트에서 WebVTT 캡션 또는 자막 큐를 시각적으로 렌더링하는 방법을 자세히 설명합니다. 처리 모델은 HTML의 미디어 요소와 CSS 사용 환경에 밀접하게 연관되어 있습니다. CSS를 지원하지 않는 사용자 에이전트는 스타일링과 위치 지정 기능 없이 단순 텍스트만 렌더링해야 합니다. 완전한 HTML/CSS 엔진을 지원하지 않는 사용자 에이전트는 완전한 CSS 엔진을 가진 사용자 에이전트가 렌더링할 시각적 표현과 동등한 결과를 렌더링해야 합니다.

7.1. 처리 모델

rules for updating the display of WebVTT text tracks는 텍스트 트랙을 렌더링합니다(특히 video 요소) 또는 다른 재생 메커니즘의 텍스트 트랙을 아래 단계들을 적용하여 렌더링합니다. 주어진 미디어 요소 또는 다른 재생 메커니즘에 대해 이 규칙들을 사용하는 모든 텍스트 트랙은 함께 렌더링되어야 하며, 이는 여러 트랙의 자막이 서로 겹치는 것을 방지합니다. 이 알고리즘을 호출할 때 대체 언어 language를 설정할 수 있습니다.

HTML에서 audio 요소는 시각적 렌더링 영역이 없으므로 이 알고리즘은 audio 요소에 대해 중단됩니다. 오디오 리소스에 대해 WebVTT 캡션 또는 자막을 작성한 저작자는 이를 렌더링하려면 비디오 요소에 게시해야 합니다.

아래 단계들의 출력은 미디어 요소 또는 다른 재생 메커니즘의 렌더링 영역을 덮는 CSS 박스 집합이며, 사용자 에이전트는 이것을 사용자의 환경에 맞게 렌더링해야 합니다.

규칙은 다음과 같습니다:

  1. 만약 media element가 audio 요소이거나 렌더링 영역이 없는 다른 재생 메커니즘이면, 이 단계를 중단합니다.

  2. video를 그 media element 또는 다른 재생 메커니즘으로 둡니다.

  3. output을 절대 위치를 가지는 CSS 블록 박스의 빈 목록으로 둡니다.

  4. 만약 사용자 에이전트가 video에 대해 UI를 노출하고 있다면, output에 사용자 인터페이스와 동일한 영역을 덮는 완전히 투명한 위치 지정된 하나 이상의 CSS 블록 박스를 추가합니다.

  5. 이 규칙들이 마지막으로 실행되었을 때 사용자 에이전트가 UI를 노출하지 않았으나 지금은 노출하고 있다면, 선택적으로 reset을 true로 둘 수 있습니다. 그렇지 않으면 reset을 false로 둡니다.

  6. tracks를 video의 텍스트 트랙 목록 중, 이 규칙들을 업데이트 규칙으로 가지며, 그 text track mode가 showing인 트랙들의 부분집합으로 둡니다.

  7. cues를 빈 text track cues 목록으로 둡니다.

  8. tracks의 각 트랙 track에 대해, track의 cue 목록에서 active flag가 설정된 모든 cues를 cues에 추가합니다.

  9. regions를 빈 WebVTT regions 목록으로 둡니다.

  10. tracks의 각 트랙 track에 대해, track의 list of regions에서 식별자를 가진 모든 regions을 regions에 추가합니다.

  11. 만약 reset이 false이면, regions의 각 WebVTT region region에 대해 regionNode를 WebVTT region object로 둡니다.

  12. 각 regionNode에 대해 다음 단계를 적용합니다:

    1. 다음과 같이 regionNode에 CSS 속성을 적용하기 위해 일부 변수를 준비합니다:

      • regionWidth를 WebVTT region width로 둡니다. width는 regionWidth vw로 둡니다 (vw는 CSS 단위).

      • lineHeight를 6vh로 두고 regionHeight를 WebVTT region lines로 둡니다. lines는 lineHeight 곱하기 regionHeight입니다.

      • viewportAnchorX를 WebVTT region anchor의 x 차원으로 두고 regionAnchorX를 동일 앵커의 x 차원으로 둡니다. leftOffset는 regionAnchorX × width ÷ 100.0입니다. left는 viewportAnchorX vw에서 leftOffset을 뺀 값입니다.

      • viewportAnchorY를 WebVTT region anchor의 y 차원으로 두고 regionAnchorY를 동일 앵커의 y 차원으로 둡니다. topOffset는 regionAnchorY × lines ÷ 100.0입니다. top은 viewportAnchorY vh에서 topOffset을 뺀 값입니다.

    2. 다음 제약 조건 내에서 CSS 명세의 규정을 regionNode에 적용하여 초기 포함 블록에 상대적으로 위치된 CSS 박스 box를 얻습니다:

      1. regionNode에 연결된 스타일 시트는 없습니다. (regionNodes는 이후 박스가 생성된 후 스타일 시트를 사용하여 다시 스타일링됩니다.)

      2. regionNode의 속성들은 다음 섹션에서 정의된 값으로 설정됩니다. (그 섹션은 이 알고리즘에서 앞서 계산된 일부 변수를 사용합니다.)

      3. 비디오 뷰포트(및 초기 포함 블록)는 video의 렌더링 영역입니다.

    3. CSS 박스 box를 output에 추가합니다.

  13. 만약 reset이 false이면, cues의 각 WebVTT cue cue에 대해: 만약 cue의 text track cue display state가 CSS 박스 집합을 가지고 있다면:

    • 만약 cue의 WebVTT cue region이 null이 아니면, 그 박스들을 해당 region의 box에 추가하고 cue를 cues에서 제거합니다.

    • 그렇지 않으면, 그 박스들을 output에 추가하고 cue를 cues에서 제거합니다.

  14. 아직 output에 대응되는 CSS 박스가 추가되지 않은 각 WebVTT cue cue에 대해, text track cue order에 따라 다음 하위 단계를 실행합니다:

    1. nodes를 WebVTT Node Objects 목록으로 두되, 이는 cue의 cue text에 WebVTT cue text parsing rules를 (제공된 경우 대체 언어 language와 함께) 적용하여 얻은 것입니다.

    2. 만약 cue의 WebVTT cue region이 null이면, 다음 하위 단계를 실행합니다:

      1. Apply WebVTT cue settings를 실행하여 nodes로부터 CSS 박스 boxes를 얻습니다.

      2. cue의 text track cue display state에 boxes의 CSS 박스들을 설정합니다.

      3. boxes의 CSS 박스들을 output에 추가합니다.

    3. 그렇지 않으면, 다음 하위 단계를 실행합니다:

      1. region를 cue의 WebVTT cue region으로 둡니다.

      2. 만약 region의 WebVTT region scroll 설정이 up이고, region이 이미 자식을 하나 가지고 있다면 region의 transition-property를 top으로, transition-duration을 0.433s로 설정합니다.

      3. offset를 cue의 computed position × region의 WebVTT region width ÷ 100으로 둡니다 (즉, 영역 너비에 대한 백분율로 해석).

      4. offset를 cue의 computed position alignment에 따라 다음과 같이 조정합니다:

        만약 computed position alignment이 center alignment이면

        offset에서 region의 WebVTT region width의 절반을 뺍니다.

        만약 computed position alignment이 line-right alignment이면

        offset에서 region의 WebVTT region width를 뺍니다.

      5. left를 offset %로 둡니다.

      6. Obtain a set of CSS boxes를 호출하여 초기 포함 블록에 상대적으로 위치된 boxes를 얻습니다.

      7. 만약 boxes에 라인 박스가 없으면, 해당 cue에 대한 나머지 하위 단계를 건너뜁니다. 큐는 무시됩니다.

      8. cue의 text track cue display state에 boxes의 CSS 박스들을 설정합니다.

      9. boxes의 CSS 박스들을 region에 추가합니다.

      10. 만약 boxes의 전체 높이가 region 박스의 높이보다 작으면, 두 높이 값의 절대 차이를 diff로 두고 top을 diff만큼 증가시켜 regionNode에 다시 적용합니다.

  15. output를 반환합니다.

사용자 에이전트는 사용자가 위 알고리즘의 큐 위치 지정을 재정의하도록 허용할 수 있습니다(예: 큐를 비디오의 다른 위치로 드래그하거나 완전히 비디오 밖으로 이동하는 등).

7.2. 큐 설정 처리

위 처리 알고리즘에서 사용자 에이전트가 CSS 박스를 얻기 위해 WebVTT 큐 설정을 적용해야 한다면, 다음 알고리즘을 실행해야 합니다.

  1. WebVTT 큐 쓰기 방향이 수평이라면 writing-mode를 "horizontal-tb"로 둡니다. 그렇지 않고 WebVTT 큐 쓰기 방향이 세로 좌(vertical growing left)라면 writing-mode를 "vertical-rl"로 둡니다. 그렇지 않으면 WebVTT 큐 쓰기 방향이 세로 우(vertical growing right)이므로 writing-mode를 "vertical-lr"로 둡니다.

  2. 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의 두 배로 둡니다.

    computed position alignment가 center이고 computed position이 50 초과일 경우

    maximum size를 100에서 computed position을 뺀 후 그 결과의 두 배로 둡니다.

  3. WebVTT 큐 크기가 maximum size보다 작으면 size를 WebVTT 큐 크기로, 그렇지 않으면 size를 maximum size로 둡니다.

  4. WebVTT 큐 쓰기 방향이 수평이라면 width는 size vw, height는 auto로 둡니다. 그 외에는 width는 auto, height는 size vh로 둡니다. (이 값들은 CSS 속성용입니다; vw 및 vh는 CSS 단위입니다.) [CSS-VALUES]

  5. cue에 대해 x-position 혹은 y-position 값을 다음 규칙에 따라 결정합니다:

    WebVTT 큐 쓰기 방향이 수평일 경우
    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 큐 쓰기 방향이 세로 좌 또는 세로 우일 경우
    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를 뺀 값으로 둡니다.

  6. cue에 대해 아직 계산되지 않은 x-position 또는 y-position 값을 아래 규칙에 따라 결정합니다:

    WebVTT cue snap-to-lines 플래그가 false인 경우
    WebVTT 큐 쓰기 방향이 수평인 경우

    y-position을 computed line으로 둡니다.

    WebVTT 큐 쓰기 방향이 세로 좌 또는 세로 우인 경우

    x-position을 computed line으로 둡니다.

    WebVTT cue snap-to-lines 플래그가 true인 경우
    WebVTT 큐 쓰기 방향이 수평일 경우

    y-position을 0으로 둡니다.

    WebVTT 큐 쓰기 방향이 세로 좌 또는 세로 우일 경우

    x-position을 0으로 둡니다.

    이 값들은 최종 위치가 아니라, 아래에서 박스 크기 계산용 임시 위치입니다.

  7. left를 x-position vw, top을 y-position vh로 둡니다. (이 값들은 CSS 속성을 위한 것이며, vw 및 vh는 CSS 단위입니다.) [CSS-VALUES]

  8. CSS 상자 집합 얻기 boxes 초기 포함 블록을 기준으로 배치됨.

  9. boxes에 라인 박스가 하나도 없으면 해당 cue에 대한 나머지 하위 단계를 건너뜁니다. 이 큐는 무시됩니다.

  10. boxes 위치를 아래의 적절한 단계에 따라 조정합니다:

    cue의 WebVTT cue snap-to-lines 플래그가 true일 때

    이 알고리즘의 단계들 중 다수는 WebVTT 큐 쓰기 방향에 따라 달라집니다. "수평"으로 표기된 단계는 WebVTT 큐 쓰기 방향이 수평일 때만 따라야 하며, "수직" 단계는 WebVTT 큐 쓰기 방향이 세로 좌 또는 세로 우일 때 따라야 합니다. "세로 좌" 단계는 WebVTT 큐 쓰기 방향이 세로 좌일 때만, "세로 우" 단계는 WebVTT 큐 쓰기 방향이 세로 우일 때만 따라야 합니다.

    1. 수평: full dimension을 video 렌더링 영역의 높이로 둡니다.

      수직: full dimension을 video 렌더링 영역의 너비로 둡니다.

    2. 수평: step을 boxes에서 첫 번째 라인 박스의 높이로 둡니다.

      수직: step을 boxes에서 첫 번째 라인 박스의 너비로 둡니다.

    3. step이 0이면 아래 done positioning 단계로 이동합니다.

    4. line을 computed line으로 둡니다.

    5. line에 0.5를 더한 뒤 버림하여 정수로 만듭니다.

    6. 세로 좌: line에 1을 더한 후 부호를 반전합니다.

    7. position을 step × line으로 둡니다.

    8. 세로 좌: position에서 boxes의 경계 박스 너비를 빼고, step을 더합니다.

    9. line이 0보다 작으면 position에 max dimension을 더하고, step의 부호를 반전합니다.

    10. 수평: boxes 내 모든 박스를 position만큼 아래로 이동합니다.

      수직: boxes 내 모든 박스를 position만큼 오른쪽으로 이동합니다.

    11. boxes 내 모든 박스의 위치를 specified position으로 저장합니다.

    12. title area를 video 렌더링 영역 전체를 덮는 박스로 둡니다.

    13. step loop: boxes 내 어느 박스도 output 내 박스와 겹치지 않고, 모든 boxes 박스가 title area 안에 완전히 들어가 있으면 아래 done positioning으로 이동합니다.

    14. 수평: step이 음수이고 boxes의 첫 번째 라인 박스 위쪽이 title area 위쪽 위로 가면, 또는 step이 양수이고 첫 번째 라인 박스 아래쪽이 title area 아래쪽 아래로 가면 switch direction 단계로 이동.

      수직: step이 음수이고 첫 번째 라인 박스 왼쪽 끝이 title area 왼쪽을 벗어나거나, step이 양수이고 오른쪽 끝이 title area 오른쪽을 벗어나면 switch direction으로.

    15. 수평: boxes 내 모든 박스를 step만큼 아래로 이동(음수면 실제로는 위로).

      수직: boxes 내 모든 박스를 step만큼 오른쪽으로 이동(음수면 실제로는 왼쪽으로 이동).

    16. step loop 단계로 돌아가기.

    17. switch direction: 만약 switched가 true이면, boxes 내 모든 박스를 제거하고 done positioning 단계로 이동.

    18. 그렇지 않으면 boxes 내 모든 박스를 앞서 저장한 specified position으로 되돌린다.

    19. step의 부호를 반전합니다.

    20. switched를 true로 두세요.

    21. step loop로 돌아가기.

    cue의 WebVTT cue snap-to-lines 플래그가 false인 경우

    1. bounding box를 boxes의 경계 박스로 둡니다.

    2. 다음의 적절한 단계를 실행합니다:

      WebVTT 큐 쓰기 방향이 수평인 경우
      WebVTT 큐 라인 정렬이 center alignment일 때

      boxes 내 모든 박스를 bounding box의 높이의 절반만큼 위로 이동합니다.

      WebVTT 큐 라인 정렬이 end alignment일 때

      boxes 내 모든 박스를 bounding box 높이만큼 위로 이동합니다.

      WebVTT 큐 쓰기 방향이 세로 좌 또는 세로 우인 경우
      WebVTT 큐 라인 정렬이 center alignment일 때

      boxes 내 모든 박스를 bounding box 너비의 절반만큼 왼쪽으로 이동합니다.

      WebVTT 큐 라인 정렬이 end alignment일 때

      boxes 내 모든 박스를 bounding box 너비만큼 왼쪽으로 이동합니다.

    3. boxes 내 어떤 박스도 output 내 박스와 겹치지 않고, 모든 boxes 박스가 video의 렌더링 영역 안에 있다면 아래 done positioning 단계로 이동.

    4. 만약 boxes 내 박스들이 서로의 상대적 위치를 유지한 채, output 내 박스와 겹치지 않고, 그리고 video의 렌더링 영역 안에 있도록 이동시킬 수 있는 위치가 있다면, 그 현재 위치에서 가장 가까운 위치로 boxes를 이동시킨 후 done positioning으로 이동. 둘 이상 같은 거리가 있다면 그 중 가장 위, 가장 위가 여러 개라면 그 중 왼쪽의 위치를 선택합니다.

    5. 그 외에는 done positioning 단계로 이동. (이 경우 박스들이 겹칠 수 있음)

  11. done positioning: boxes를 반환합니다.

7.3. CSS 박스 얻기

위 처리 알고리즘에서 사용자 에이전트에게 CSS 박스 집합 얻기 boxes를 요구할 경우, 다음 제약 내에서 nodes에 CSS 명세의 규정을 적용해야 합니다: [CSS22]

boxes는 초기 포함 블록 자손으로 생성된 박스들과 그 위치입니다.

7.4. WebVTT Node Object에 CSS 속성 적용

WebVTT 텍스트 트랙 표시 갱신 규칙을 따를 때, 사용자 에이전트는 본 절의 정의대로 WebVTT Node Object 속성을 CSS user agent cascade layer에서 지정해야 합니다. [CSS22]

(루트) WebVTT 노드 객체 목록을 다음 CSS 설정으로 초기화합니다:

변수 writing-mode, top, left, width, height는 WebVTT 텍스트 트랙 표시 갱신 규칙에서 결정된 값입니다. WebVTT cue의 큐 텍스트로부터 WebVTT 노드 객체 목록이 만들어진 경우 그 값을 사용합니다.

(루트) text-align 속성은 아래 테이블 첫 번째 열이 해당 WebVTT 큐 텍스트 정렬인 행의 두 번째 셀에 있는 값을 사용해야 합니다:

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

(루트) font 단축 속성은 5vh sans-serif로 설정해야 합니다. [CSS-VALUES]

(루트) color 속성은 rgba(255,255,255,1)로 설정해야 합니다. [CSS3-COLOR]

background 단축 속성은 WebVTT 큐 배경 박스나 WebVTT Ruby 텍스트 객체 모두 rgba(0,0,0,0.8)로 설정해야 합니다. [CSS3-COLOR]

(루트) white-space 속성은 pre-line으로 설정해야 합니다. [CSS22]

font-style 속성은 WebVTT 이탤릭 객체에 대해 italic이 되어야 합니다.

font-weight 속성은 WebVTT 볼드 객체에 대해 bold로 설정해야 합니다.

text-decoration 속성은 WebVTT 밑줄 객체에 대해 underline으로 설정해야 합니다.

display 속성은 WebVTT Ruby 객체에 대해 ruby로 설정해야 합니다. [CSS3-RUBY]

display 속성은 WebVTT Ruby 텍스트 객체에 대해 ruby-text로 설정해야 합니다. [CSS3-RUBY]

모든 WebVTT region object는 아래 CSS 설정으로 초기화됩니다:

변수 width, height, top, left는 WebVTT 텍스트 트랙 표시 갱신 규칙에서 결정된 값입니다. WebVTT region에서 WebVTT region object를 만들 때 해당 값을 사용합니다.

모든 WebVTT region object의 자식들은 다음 CSS 설정으로 추가 초기화됩니다:

기타 모든 비상속 속성은 초기값으로, 루트 WebVTT 노드 객체 목록의 상속 속성은 렌더링 대상 미디어 요소에서 상속해야 합니다(있는 경우). 미디어 요소가 없다면(즉, 텍스트 트랙이 다른 미디어 플레이어에 의해 렌더링되는 경우), 루트 WebVTT 노드 객체 목록과 WebVTT region object의 상속 속성도 초기값을 사용해야 합니다.

미디어 요소 또는 다른 재생 메커니즘에 적용되는 스타일시트가 있다면, 다음 절에 서술된 대로 해석해야 합니다.

8. CSS 확장

이 절에서는 몇 가지 CSS 의사요소와 의사클래스를 정의하고 이들이 WebVTT에 어떻게 적용되는지 명시합니다. 이 절은 CSS를 지원하지 않는 사용자 에이전트에는 적용되지 않습니다.

8.1. 소개

이 절은 비-규범적(non-normative)입니다.

::cue 의사요소는 큐(cue)를 나타냅니다.

::cue(selector) 의사요소는 주어진 셀렉터와 일치하는 큐 또는 큐 안의 요소를 나타냅니다.

::cue-region 의사요소는 영역(region)을 나타냅니다.

::cue-region(selector) 의사요소는 주어진 셀렉터와 일치하는 영역 또는 영역 내의 요소를 나타냅니다.

다른 모든 의사요소와 마찬가지로, 이 의사요소들은 video 요소의 문서 트리에 직접 존재하지 않습니다.

:past 및 :future 의사클래스는 ::cue(selector) 안에서 WebVTT 내부 노드 객체를 현재 재생 위치에 따라 매칭할 수 있습니다.

다음 표는 특정 셀렉터로 무엇을 선택할 수 있는지, 그리고 그에 해당하는 WebVTT 구문 예시를 보여줍니다.

선택자(CSS 문법 예시) 매칭 예시(WebVTT 구문)

::cue

video::cue {
  color: yellow;
}

모든 WebVTT 노드 객체 목록.

WEBVTT

00:00:00.000 --> 00:00:08.000
Yellow!

00:00:08.000 --> 00:00:16.000
Also yellow!

ID 선택자 (::cue() 안)

video::cue(#cue1) {
  color: yellow;
}

큐의 text track cue identifier가 지정된 ID와 일치하는 WebVTT 노드 객체 목록.

WEBVTT

cue1
00:00:00.000 --> 00:00:08.000
Yellow!

타입 선택자 (::cue() 안)

video::cue(c),
video::cue(i),
video::cue(b),
video::cue(u),
video::cue(ruby),
video::cue(rt),
video::cue(v),
video::cue(lang) {
  color: yellow;
}

지정된 이름을 가진 WebVTT 내부 노드 객체(루트 WebVTT 노드 객체 목록은 제외).

WEBVTT

00:00:00.000 --> 00:00:08.000
<c>Yellow!</c>
<i>Yellow!</i>
<u>Yellow!</u>
<b>Yellow!</b>
<u>Yellow!</u>
<ruby>Yellow! <rt>Yellow!</rt></ruby>
<v Kathryn>Yellow!</v>
<lang en>Yellow!</lang>

클래스 선택자 (::cue() 안)

video::cue(.loud) {
  color: yellow;
}

주어진 적용 가능한 클래스를 가진 WebVTT 내부 노드 객체(루트 WebVTT 노드 객체 목록은 제외).

WEBVTT

00:00:00.000 --> 00:00:08.000
<c.loud>Yellow!</c>
<i.loud>Yellow!</i>
<u.loud>Yellow!</u>
<b.loud>Yellow!</b>
<u.loud>Yellow!</u>
<ruby.loud>Yellow! <rt.loud>Yellow!</rt></ruby>
<v.loud Kathryn>Yellow!</v>
<lang.loud en>Yellow!</lang>

속성 선택자 (::cue() 안)

video::cue([lang="en-US"]) {
  color: yellow;
}
video::cue(lang[lang="en-GB"]) {
  color: cyan;
}
video::cue(v[voice="Kathryn"] {
  color: lime;
}

"lang"의 경우 해당 적용 가능한 언어가 일치하는 루트 WebVTT 노드 객체 목록 또는 WebVTT 언어 객체; "voice"의 경우 해당 화자를 가진 WebVTT 보이스 객체.

WEBVTT

00:00:00.000 --> 00:00:08.000
Yellow!

00:00:08.000 --> 00:00:16.000
<lang en-GB>Cyan!</lang>

00:00:16.000 --> 00:00:24.000
<v Kathryn>I like lime.</v>

적용 가능한 언어는 WebVTT 노드 객체 목록의 경우 HTML의 srclang 속성값으로 지정할 수 있습니다. 

<video ...>
 <track src="example-attr.vtt"
        srclang="en-US" default>
</video>

:lang() 의사클래스 (::cue() 안) 

video::cue(:lang(en)) {
  color: yellow;
}
video::cue(:lang(en-GB)) {
  color: cyan;
}

주어진 언어 범위에 일치하는 적용 가능한 언어를 가진 WebVTT 내부 노드 객체. 

WEBVTT

00:00:00.000 --> 00:00:08.000
Yellow!

00:00:08.000 --> 00:00:16.000
<lang en-GB>Cyan!</lang>

위와 같이 적용 가능한 언어는 HTML의 srclang 속성으로 지정할 수 있습니다.

:past 및 :future 의사클래스 (::cue() 안) 

video::cue(:past) {
  color: yellow;
}
video::cue(:future) {
  color: cyan;
}

타임스탬프(WebVTT Timestamp Object)가 포함된 큐에서, WebVTT 내부 노드 객체는 현재 재생 위치에 따라 매칭될 수 있습니다.

WEBVTT

00:00:00.000 --> 00:00:08.000
<c>No match (no timestamps)</c>

00:00:08.000 --> 00:00:16.000
No match <00:00:12.000> (no elements)

00:00:16.000 --> 00:00:24.000
<00:00:16.000> <c>This</c>
<00:00:18.000> <c>can</c>
<00:00:20.000> <c>match</c>
<00:00:22.000> <c>:past/:future</c>
<00:00:24.000>

::cue-region

video::cue-region {
  color: yellow;
}

모든 영역(WebVTT region object 목록).

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 선택자 (::cue-region() 안)

video::cue-region(#scroll) {
  color: cyan;
}

지정된 ID를 가진 WebVTT 지역 식별자가 일치하는 영역(WebVTT region object 목록).

WEBVTT

REGION
id:editor-comments
width: 40%
regionanchor:0%,100%
viewportanchor:10%,90%

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

00:00:00.000 --> 00:00:08.000
No match (normal cue)

00:00:08.000 --> 00:00:16.000 region:editor-comments
Yellow!

00:00:10.000 --> 00:00:16.000 region:scroll
Over here it’s Cyan!

8.2. 처리 모델

사용자 에이전트가 WebVTT 텍스트 트랙 표시 갱신 규칙에 따라 하나 이상의 WebVTT 큐를 렌더링할 때, 렌더링에 사용된 WebVTT 노드 객체 목록 내 WebVTT 노드 객체는 아래 정의된 특정 의사 셀렉터로 매칭될 수 있습니다. 이 셀렉터들은 WebVTT 노드 객체 개별 매칭이, 큐 렌더링 중, 심지어 웹VTT 텍스트 트랙 표시 갱신 규칙의 적용 사이(활성 큐 집합이 변경될 때만 실행됨)에도 시작/중지될 수 있습니다. 이 아래 의사요소를 지원하는 에이전트는 렌더링을 동적으로 업데이트해야 합니다. white-space 또는 font 단축 속성(및 line-height) 관련 속성이 변경되면, 해당 WebVTT 큐의 text track cue display state를 비우고 곧바로 트랙의 텍스트 트랙 렌더링 업데이트 규칙을 다시 실행해야 합니다.

의사요소는 셀렉터로 매칭된 요소에 적용됩니다. 이 절에서 이 요소를 매칭된 요소(matched element)라고 합니다. 아래 정의된 의사요소들은 매칭된 요소에 대해 렌더링되는 WebVTT 큐의 일부 스타일에 영향을 줍니다.

매칭된 요소가 video 요소가 아니라면, 아래 명세에 의거 이 의사요소들은 아무 효과도 갖지 않습니다.

CSS 사용자 에이전트가 텍스트 트랙 모델을 구현한다면, ::cue, ::cue(selector), ::cue-region, ::cue-region(selector) 의사요소 및 :past 및 :future 의사클래스를 지원해야 합니다.

8.2.1. ::cue 의사요소

::cue 의사요소(인자가 없는 경우)는 매칭된 요소를 위해 생성된 모든 WebVTT 노드 객체 목록과 일치합니다. 단, background 단축 속성에 대응하는 속성은 WebVTT 노드 객체 목록 대신 WebVTT 큐 배경 박스에 적용되어야 합니다.

다음 속성들은 인자 없는 ::cue 의사요소에 적용됩니다. 다른 속성이 의사요소에 설정되면 무시해야 합니다:

::cue(selector) 의사요소(인자 사용)는 인자로 CSS 셀렉터 [SELECTORS4]를 가져야 하며, 매칭된 요소에 대해 생성된 WebVTT 내부 노드 객체 중 그 CSS 셀렉터와 일치하는 객체와 일치합니다. 각 노드는 다음과 같이 취급합니다:

다음 속성들은 인자가 있는 ::cue() 의사요소에 적용됩니다:

추가로, 다음 속성들은 셀렉터가 :past 및 :future 의사클래스를 포함하지 않을 때 인자 있는 ::cue() 의사요소에 적용됩니다:

적용되지 않는 속성은 무시해야 합니다.

특별 예외로 background 단축 속성에 해당하는 속성이 WebVTT 노드 객체 목록에 적용되어야 할 때는, 대신 WebVTT 큐 배경 박스에 적용되어야 합니다.

8.2.2. :past 및 :future 의사클래스

:past 및 :future 의사클래스는 때때로 WebVTT 노드 객체와 일치합니다. [SELECTORS4]

:past 의사클래스는 과거에 속하는 WebVTT 노드 객체에만 일치합니다.

WebVTT 노드 객체 c가 과거에 있음이려면, WebVTT cue의 WebVTT 노드 객체 목록을 프리오더, 깊이우선 탐색할 때 c 바로 뒤에 해당 WebVTT 타임스탬프 객체가 존재하며, 그 값이 매칭된 요소인 미디어 요소의 현재 재생 위치보다 작으면 됩니다.

:future 의사클래스는 미래에 속하는 WebVTT 노드 객체에만 일치합니다.

WebVTT 노드 객체 c가 미래에 있음이려면, WebVTT cue의 WebVTT 노드 객체 목록을 프리오더, 깊이우선 탐색할 때 c 바로 앞에 해당 WebVTT 타임스탬프 객체가 존재하며, 그 값이 매칭된 요소인 미디어 요소의 현재 재생 위치보다 크면 됩니다.

8.2.3. ::cue-region 의사요소

의사요소는 셀렉터에 매칭되는 요소에 적용됩니다. 이 절에서는 이 요소를 “매칭된 요소(matched element)”라 부릅니다. 아래 정의된 의사요소는 매칭된 요소에 대해 렌더링되는 텍스트 트랙 region의 스타일에 영향을 줍니다.

매칭된 요소가 video 요소가 아니면, 아래 명세에 따라 이 의사요소는 영향을 갖지 않습니다.

::cue-region 의사요소(인자 없음)는 매칭된 요소에 대해 생성된 모든 WebVTT region object 목록과 일치합니다.

::cue-region(selector) 의사요소(인자 사용)는 인자로 CSS 셀렉터 [SELECTORS4]를 가져야 하며, 매칭된 요소에 대해 생성된 WebVTT region object 목록과, 아래와 같이 해당 셀렉터와 일치하는 경우에 일치합니다:

::cue-region(selector)에 대해 다른 셀렉터 매칭 정의는 없습니다.

::cue에 적용되는 동일한 속성이 ::cue-region 의사요소에도 적용되며, 의사요소에 설정된 기타 속성은 무시합니다.

사용자 에이전트가 WebVTT 텍스트 트랙 표시 갱신 규칙에 따라 하나 이상의 텍스트 트랙 영역(region)을 렌더링할 때, 렌더링에 사용된 WebVTT region object는 위 정의된 의사요소로 매칭될 수 있습니다. 이 의사요소를 지원하는 에이전트는 렌더링을 동적으로 업데이트해야 합니다. white-space 또는 font 단축 속성(및 line-height) 관련 속성이 변경되면, 해당 region의 모든 WebVTT cue의 text track cue display state를 비우고 곧바로 트랙의 텍스트 트랙 렌더링 업데이트 규칙을 다시 실행해야 합니다.

9. API

9.1. VTTCue 인터페이스

다음 인터페이스는 DOM API에서 WebVTT 큐를 노출할 때 사용됩니다:

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

새로운 VTTCue 객체를 반환하며, addCue() 메서드에서 사용할 수 있습니다.

startTime 인수는 텍스트 트랙 큐 시작 시간을 설정합니다.

endTime 인수는 텍스트 트랙 큐 종료 시간을 설정합니다.

text 인수는 큐 텍스트를 설정합니다.

cue . region

이 큐가 속한 VTTRegion 객체를 반환하며, 없으면 null을 반환합니다.

설정할 수 있습니다.

cue . vertical [ = value ]

WebVTT 큐 쓰기 방향을 나타내는 문자열을 반환합니다. 아래와 같습니다:

수평의 경우

빈 문자열입니다.

세로(왼쪽으로 성장)

"rl" 문자열입니다.

세로(오른쪽으로 성장)

"lr" 문자열입니다.

설정할 수 있습니다.

cue . snapToLines [ = value ]

WebVTT cue snap-to-lines 플래그가 true이면 true, 아니면 false를 반환합니다.

설정할 수 있습니다.

cue . line [ = value ]

WebVTT 큐 라인을 반환합니다. 값이 auto이면 문자열 "auto"를 반환합니다.

설정할 수 있습니다.

cue . lineAlign [ = value ]

WebVTT 큐 라인 정렬을 나타내는 문자열을 반환합니다. 아래와 같습니다:

start alignment일 때

"start" 문자열입니다.

center alignment일 때

"center" 문자열입니다.

end alignment일 때

"end" 문자열입니다.

설정할 수 있습니다.

cue . position [ = value ]

WebVTT 큐 위치를 반환합니다. 값이 auto이면 문자열 "auto"를 반환합니다.

설정할 수 있습니다.

cue . positionAlign [ = value ]

WebVTT 큐 위치 정렬을 나타내는 문자열을 반환합니다. 아래와 같습니다:

line-left alignment일 때

"line-left" 문자열입니다.

center alignment일 때

"center" 문자열입니다.

line-right alignment일 때

"line-right" 문자열입니다.

automatic alignment일 때

"auto" 문자열입니다.

설정할 수 있습니다.

cue . size [ = value ]

WebVTT 큐 크기를 반환합니다.

설정할 수 있습니다.

cue . align [ = value ]

WebVTT 큐 텍스트 정렬을 나타내는 문자열을 반환합니다. 아래와 같습니다:

start alignment일 때

"start" 문자열입니다.

center alignment일 때

"center" 문자열입니다.

end alignment일 때

"end" 문자열입니다.

left alignment일 때

"left" 문자열입니다.

right alignment일 때

"right" 문자열입니다.

설정할 수 있습니다.

cue . text [ = value ]

원시 형태(파싱 전)의 큐 텍스트를 반환합니다.

설정할 수 있습니다.

fragment = cue . getCueAsHTML()

큐 텍스트를 DocumentFragment 형태로 반환하며, 이는 HTML 요소와 기타 DOM 노드로 구성됩니다.

VTTCue(startTime, endTime, text) 생성자가 호출되면 다음 단계를 실행해야 한다.

  1. 새 WebVTT cue를 생성한다. cue를 해당 WebVTT cue로 둔다.

  2. cue의 text track cue start time을 startTime 인자의 값(초 단위 해석)으로 둔다.

  3. cue의 text track cue end time을 endTime 인자의 값(초 단위 해석)으로 둔다.

  4. cue의 cue text를 text 인자의 값으로 두고, chapter title 추출 규칙은 WebVTT rules for extracting the chapter title로 둔다.

  5. cue의 text track cue identifier를 빈 문자열로 둔다.

  6. cue의 text track cue pause-on-exit flag를 false로 둔다.

  7. cue의 WebVTT cue region을 null로 둔다.

  8. cue의 WebVTT cue writing direction을 horizontal로 둔다.

  9. cue의 WebVTT cue snap-to-lines flag를 true로 둔다.

  10. cue의 WebVTT cue line을 auto로 둔다.

  11. cue의 WebVTT cue line alignment를 start alignment로 둔다.

  12. cue의 WebVTT cue position을 auto로 둔다.

  13. cue의 WebVTT cue position alignment를 auto로 둔다.

  14. cue의 WebVTT cue size를 100으로 둔다.

  15. cue의 WebVTT cue text alignment를 center alignment로 둔다.

  16. cue를 나타내는 VTTCue 객체를 반환한다.

region 속성 getter는 이 VTTRegion 객체가 나타내는 WebVTT cue region을 반환하며, 없으면 null을 반환한다. setter는 WebVTT cue region을 새 값으로 설정해야 한다.

vertical 속성 getter는 아래 표에서 첫 번째 셀이 WebVTT cue writing direction인 행의 두 번째 셀의 문자열을 반환한다. WebVTT cue를 이 VTTCue 객체가 나타내는 경우:

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

setter는 위 표의 두 번째 셀 값이 새 값과 대소문자 구분 일치하는 첫 번째 행의 첫 번째 셀의 값으로 WebVTT cue writing direction을 설정해야 한다.

snapToLines 속성 getter는 WebVTT cue snap-to-lines flag가 true면 true, 그 외는 false를 반환한다. setter는 WebVTT cue snap-to-lines flag를 새 값으로 설정한다.

line 속성 getter는 WebVTT cue line을 반환한다. auto는 문자열 "auto"로 표시해야 한다. setter는 새 값이 "auto" 문자열이면 auto로 해석하고, 그 외는 해당 값으로 WebVTT cue line을 설정한다.

속성 snapToLines 와 line 을 어떤 순서로든 설정 가능해야 하므로, line 값이 0~100 범위를 벗어나도 snapToLines 를 false로 설정하는 것이 거부되지 않는다.

lineAlign 속성 getter는 아래 표에서 첫 번째 셀 값이 WebVTT cue line alignment와 같은 행의 두 번째 셀의 문자열을 반환한다. WebVTT cue가 이 VTTCue 객체를 나타낼 때:

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

setter는 위 표의 두 번째 셀이 새 값과 대소문자 구분 일치하는 첫 번째 행의 첫 번째 셀 값으로 WebVTT cue line alignment를 설정한다.

position 속성 getter는 WebVTT cue position을 반환한다. auto는 "auto"로 표시해야 한다. setter에서 새 값이 0 미만이거나 100 초과면 IndexSizeError 예외를 던져야 한다. 그 외에는 해당 값으로 WebVTT cue position을 설정하고, "auto"면 auto로 해석한다.

positionAlign 속성 getter는 아래 표의 첫 번째 셀 값이 WebVTT cue position alignment와 같은 행의 두 번째 셀의 문자열을 반환한다. WebVTT cue가 이 VTTCue 객체를 나타낼 때:

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

setter는 위 표의 두 번째 셀 값이 새 값과 대소문자 구분 일치하는 첫 번째 행의 첫 번째 셀의 값으로 WebVTT cue position alignment를 설정한다.

size 속성 getter는 WebVTT cue size을 반환한다. setter에서 새 값이 0 미만이거나 100 초과면 IndexSizeError 예외를 던진다. 그 외에는 해당 값으로 WebVTT cue size을 설정한다.

align 속성 getter는 아래 표에서 첫 번째 셀 값이 WebVTT cue text alignment와 같은 행의 두 번째 셀의 문자열을 반환한다. WebVTT cue가 이 VTTCue 객체를 나타낼 때:

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

setter는 위 표의 두 번째 셀 값이 새 값과 대소문자 구분 일치하는 첫 번째 행의 첫 번째 셀 값으로 WebVTT cue text alignment을 설정한다.

text 속성 getter는 cue text의 원시 값을 반환한다. setter에서 새 값이 오면 그 값으로 cue text를 설정해야 한다.

getCueAsHTML() 메서드는 cue text에 WebVTT cue text parsing rules를 적용한 결과에 WebVTT cue text DOM construction rules를 적용해 DocumentFragment로 변환한 결과를 entry settings object가 지정한 responsible document에 대해 반환해야 한다.

getCueAsHTML()에는 대체 언어가 제공되지 않는데, 이는 DocumentFragment가 언어 정보를 노출할 수 없기 때문이다.

9.2. VTTRegion 인터페이스

다음 인터페이스는 DOM API에서 WebVTT region을 노출할 때 사용됩니다:

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

새 VTTRegion 객체를 반환합니다.

region . id

텍스트 트랙 region 식별자를 반환합니다. 설정할 수 있습니다.

region . width

WebVTT region의 너비를 비디오 너비의 백분율로 반환합니다. 설정할 수 있습니다. 새 값이 0~100 범위가 아니면 IndexSizeError 예외를 발생시킵니다.

region . lines

텍스트 트랙 region의 높이를 줄 개수로 반환합니다. 설정할 수 있습니다. 새 값이 0 미만이면 IndexSizeError 예외를 발생시킵니다.

region . regionAnchorX

WebVTT region anchor X 오프셋을 region 너비의 백분율로 반환합니다. 설정할 수 있습니다. 새 값이 0~100 범위가 아니면 IndexSizeError 예외를 발생시킵니다.

region . regionAnchorY

WebVTT region anchor Y 오프셋을 region 높이의 백분율로 반환합니다. 설정할 수 있습니다. 새 값이 0~100 범위가 아니면 IndexSizeError 예외를 발생시킵니다.

region . viewportAnchorX

WebVTT region viewport anchor X 오프셋을 비디오 너비의 백분율로 반환합니다. 설정할 수 있습니다. 새 값이 0~100 범위가 아니면 IndexSizeError 예외를 발생시킵니다.

region . viewportAnchorY

WebVTT region viewport anchor Y 오프셋을 비디오 높이의 백분율로 반환합니다. 설정할 수 있습니다. 새 값이 0~100 범위가 아니면 IndexSizeError 예외를 발생시킵니다.

region . scroll

WebVTT region scroll을 나타내는 문자열을 반환합니다:

설정되지 않은 경우

빈 문자열.

up인 경우

"up" 문자열.

설정할 수 있습니다.

VTTRegion() 생성자가 호출되면 다음 단계를 실행해야 합니다:

  1. 새 WebVTT region을 생성합니다. region을 해당 WebVTT region로 둡니다.

  2. region의 WebVTT region 식별자를 빈 문자열로 둡니다.

  3. region의 WebVTT region width를 100으로 둡니다.

  4. region의 WebVTT region lines를 3으로 둡니다.

  5. region의 text track region regionAnchorX를 0으로 둡니다.

  6. region의 text track region regionAnchorY를 100으로 둡니다.

  7. region의 text track region viewportAnchorX를 0으로 둡니다.

  8. region의 text track region viewportAnchorY를 100으로 둡니다.

  9. region의 WebVTT region scroll을 빈 문자열로 둡니다.

  10. region을 나타내는 VTTRegion 객체를 반환합니다.

id 속성은 getter 사용시 WebVTT region 식별자를 반환합니다. setter로 새 값을 지정할 수 있습니다.

width 속성은 getter 사용시 WebVTT region width를 반환합니다. setter에서 새 값이 0 미만이거나 100 초과이면 IndexSizeError 예외를 던집니다. 그렇지 않으면 새 값으로 설정합니다.

lines 속성은 getter 사용시 WebVTT region lines를 반환합니다. setter는 새 값으로 WebVTT region lines를 설정합니다.

regionAnchorX 속성은 getter 사용시 WebVTT region anchor X 오프셋을 반환합니다. setter에서 새 값이 0 미만이거나 100 초과이면 IndexSizeError 예외를 던집니다. 그렇지 않으면 새 값으로 설정합니다.

regionAnchorY 속성은 getter 사용시 WebVTT region anchor Y 오프셋을 반환합니다. setter에서 새 값이 0 미만이거나 100 초과이면 IndexSizeError 예외를 던집니다. 그렇지 않으면 새 값으로 설정합니다.

viewportAnchorX 속성은 getter 사용시 WebVTT region viewport anchor X 오프셋을 반환합니다. setter에서 새 값이 0 미만이거나 100 초과이면 IndexSizeError 예외를 던집니다. 그렇지 않으면 새 값으로 설정합니다.

viewportAnchorY 속성은 getter 사용시 WebVTT region viewport anchor Y 오프셋을 반환합니다. setter에서 새 값이 0 미만이거나 100 초과이면 IndexSizeError 예외를 던집니다. 그렇지 않으면 새 값으로 설정합니다.

scroll 속성은 getter 사용시 아래 표에서 첫 번째 셀 값이 WebVTT region scroll 설정과 같은 행의 두 번째 셀의 문자열을 반환합니다.

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

setter에서 새 값이 표의 두 번째 셀과 대소문자까지 일치하면 해당 행의 첫 번째 셀 값을 WebVTT region scroll에 설정합니다.

10. IANA 관련 고려사항

10.1. text/vtt

이 등록은 커뮤니티 리뷰를 위해 제출되며, IESG의 검토와 승인을 거쳐 IANA에 등록될 예정입니다.

Type name:
text
Subtype name:
vtt
Required parameters:
매개변수 없음
Optional parameters:
매개변수 없음
Encoding considerations:
8bit (항상 UTF-8)
Security considerations:

텍스트 트랙 파일 자체는 데이터 내에 민감한 정보가 포함되지 않는 한 즉각적인 위험이 없습니다. 하지만 구현 시에는 텍스트 트랙 처리 시 특정 출처 기반 제한이 준수되도록 명확한 규칙을 따라야 합니다. 이런 규칙을 잘못 구현할 경우 정보 유출, 크로스 사이트 스크립팅 공격 등이 발생할 수 있습니다.

Interoperability considerations:

이 명세에서는 규격을 준수하는 콘텐츠와 비규격 콘텐츠 모두에 대한 처리 규칙을 정의합니다.

Published specification:
이 문서가 해당 명세입니다.
Applications that use this media type:
웹 브라우저 및 기타 비디오 플레이어
Additional information:
Magic number(s):

WebVTT 파일은 다음 바이트 시퀀스 중 하나로 시작합니다("EOF"는 파일 끝):

  • EF BB BF 57 45 42 56 54 54 0A
  • EF BB BF 57 45 42 56 54 54 0D
  • EF BB BF 57 45 42 56 54 54 20
  • EF BB BF 57 45 42 56 54 54 09
  • EF BB BF 57 45 42 56 54 54 EOF
  • 57 45 42 56 54 54 0A
  • 57 45 42 56 54 54 0D
  • 57 45 42 56 54 54 20
  • 57 45 42 56 54 54 09
  • 57 45 42 56 54 54 EOF

(UTF-8 BOM(Optional), ASCII 문자열 "WEBVTT", 그리고 이어서 공백, 탭, 개행 또는 파일 끝.)

File extension(s):
"vtt"
Macintosh file type code(s):
Macintosh 파일 타입 코드는 권장되는 값이 없습니다.
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

text/vtt 리소스에는 fragment identifier가 의미를 가지지 않습니다.

개인정보 보호 및 보안 고려사항

텍스트 기반 포맷 보안

모든 텍스트 기반 포맷과 마찬가지로, 버퍼 오버런, 값 오버플로우(예: 정수의 문자열 표현이 주어진 워드 길이를 넘음) 등 악의적인 콘텐츠가 만들어질 수 있습니다. 구현자는 너무 긴 줄, 필드 값, 인코딩 값 등이 보안 문제를 일으키지 않도록 주의해야 합니다.

스타일링 관련 프라이버시 및 보안

WebVTT는 CSS 스타일시트를 내장할 수 있고, CSS를 지원하는 사용자 에이전트에서 적용됩니다. 이 경우 CSS의 프라이버시·보안 고려사항이 적용되며, 아래 사항이 추가로 적용됩니다.

이런 스타일시트는 외부 리소스를 가져올 수 없습니다. 프라이버시 보호를 위해 사용자 에이전트가 이를 허용하지 않는 것이 중요합니다. 그렇지 않으면 WebVTT 파일을 통해 사용자가 특정 비디오를 시청하는지, 심지어 어느 시점에 시청 중인지 제3자가 알 수 있습니다.

사용자 에이전트가 사용자 스타일시트를 제공할 수 있지만, 그러한 스타일시트의 존재와 형태는 동일 사용자 에이전트 내의 스크립트에서는 알 수 없습니다(예: 브라우저). 이는 CSS 오브젝트 모델이 스크립트에 노출되지 않으며, ::before 및 ::after를 제외한 의사요소에 대해 getComputedStyle() API로 계산된 스타일을 얻는 방법이 없기 때문입니다. [CSSOM]

스크립팅 관련 보안

WebVTT에는 스크립트가 포함되거나 활성화되지 않습니다. 사용자 에이전트는 WebVTT 파일에 내장된 스크립트를 실행할 수 있는 방법을 지원해서는 안 됩니다.

그럼에도 캡션·자막 표시가 아니라 타임드 입력(‘트리거’)을 스크립트 시스템에 주기 위해 설계된 파일을 만들고 제공할 수 있습니다. 부적절하게 작성된 스크립트/시스템은 보안·프라이버시 등 문제가 있을 수 있으나, 이는 해당 스크립트 시스템의 문제입니다. WebVTT는 이 트리거를 타임스탬프에 맞춰 제공하므로, 악의적인 파일이 해당 트리거를 매우 빠르게 보내 과한 자원 소모를 유도할 수 있습니다.

선호 정보의 프라이버시

사용자 에이전트가 WebVTT 파일을 선택/다운로드/해석하면, 사용자가 캡션 또는 자막이 필요한지와 언어 선호도가 오리진 서버에 표시될 수 있습니다. 이는 사용자에 관한 (작은) 정보입니다. 그러나 캡션 파일의 제공 여부와 다운로드/소비 여부는 캡션 포맷 자체보다 파일/프로토콜(예: HTML 요소)의 특성입니다. [HTML51]

감사의 말

SubRip 커뮤니티, 특히 Zuggy와 ai4spam에게 감사드립니다. 이들이 작업한 SubRip 소프트웨어의 SRT 파일 포맷이 WebVTT 텍스트 트랙 파일 포맷의 기반이 되었습니다.

WebVTT를 최초로 규정한 HTML 표준 작업에 참여한 Ian Hickson 및 많은 분들께도 감사드립니다. [HTML51]

다음 분들의 유익한 의견에 감사의 뜻을 전합니다: Addison Phillips, Alastor Wu, Andreas Tai, Anna Cavender, Anne van Kesteren, Benjamin Schaaf, Brian Quass, Caitlin Potter, Courtney Kennedy, Cyril Concolato, Dae Kim, David Singer, Eric Carlson, fantasai, Frank Olivier, Fredrik Söderquist, Giuseppe Pascale, Glenn Adams, Glenn Maynard, John Foliot, Kyle Huey, Lawrence Forooghian, Loretta Guarino Reid, Ms2ger, Nigel Megitt, Ralph Giles, Richard Ishida, Rick Eyre, Ronny Mennerich, Theresa O’Connor, and Victor Cărbune .

색인

이 명세에서 정의된 용어

참조로 정의된 용어

참고문헌

규범 참고문헌

[BCP47]
A. Phillips; M. Davis. Tags for Identifying Languages. September 2009. IETF Best Current Practice. URL: https://tools.ietf.org/html/bcp47
[BIDI]
Mark Davis; Aharon Lanin; Andrew Glass. Unicode Bidirectional Algorithm. 14 May 2017. Unicode Standard Annex #9. URL: https://www.unicode.org/reports/tr9/tr9-37.html
[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. URL: https://www.w3.org/TR/css-align-3/
[CSS-BACKGROUNDS-3]
Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. URL: https://www.w3.org/TR/css-backgrounds-3/
[CSS-CASCADE-4]
Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 4. URL: https://www.w3.org/TR/css-cascade-4/
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley. CSS Color Module Level 4. URL: https://www.w3.org/TR/css-color-4/
[CSS-DISPLAY-3]
Elika Etemad. CSS Display Module Level 3. URL: https://www.w3.org/TR/css-display-3/
[CSS-FLEXBOX-1]
Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. CSS Flexible Box Layout Module Level 1. URL: https://www.w3.org/TR/css-flexbox-1/
[CSS-FONTS-3]
John Daggett. CSS Fonts Module Level 3. URL: https://www.w3.org/TR/css-fonts-3/
[CSS-FONTS-4]
John Daggett; Myles Maxfield. CSS Fonts Module Level 4. URL: https://www.w3.org/TR/css-fonts-4/
[CSS-OVERFLOW-3]
David Baron; Florian Rivoal. CSS Overflow Module Level 3. URL: https://www.w3.org/TR/css-overflow-3/
[CSS-POSITION-3]
Rossen Atanassov; Arron Eicholz. CSS Positioned Layout Module Level 3. URL: https://www.w3.org/TR/css-position-3/
[CSS-SIZING-3]
Elika Etemad. CSS Intrinsic & Extrinsic Sizing Module Level 3. URL: https://www.w3.org/TR/css-sizing-3/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3. URL: https://www.w3.org/TR/css-syntax-3/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii. CSS Text Module Level 3. URL: https://www.w3.org/TR/css-text-3/
[CSS-TEXT-4]
Elika Etemad; Koji Ishii; Alan Stearns. CSS Text Module Level 4. URL: https://www.w3.org/TR/css-text-4/
[CSS-TEXT-DECOR-3]
Elika Etemad; Koji Ishii. CSS Text Decoration Module Level 3. URL: https://www.w3.org/TR/css-text-decor-3/
[CSS-TRANSITIONS-1]
David Baron; Dean Jackson; Brian Birtles. CSS Transitions. URL: https://www.w3.org/TR/css-transitions-1/
[CSS-UI-4]
Florian Rivoal. CSS Basic User Interface Module Level 4. URL: https://www.w3.org/TR/css-ui-4/
[CSS-VALUES]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. URL: https://www.w3.org/TR/css-values-3/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. URL: https://www.w3.org/TR/css-writing-modes-3/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS22]
Bert Bos. Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification. URL: https://www.w3.org/TR/CSS22/
[CSS3-COLOR]
Tantek Çelik; Chris Lilley; David Baron. CSS Color Module Level 3. 5 December 2017. CR. URL: https://www.w3.org/TR/css-color-3/
[CSS3-RUBY]
Elika Etemad; Koji Ishii. CSS Ruby Layout Module Level 1. URL: https://www.w3.org/TR/css-ruby-1/
[CSSOM]
Simon Pieters; Glenn Adams. CSS Object Model (CSSOM). URL: https://www.w3.org/TR/cssom-1/
[DOM-20151119]
Anne van Kesteren; et al. W3C DOM4. 19 November 2015. REC. URL: https://www.w3.org/TR/2015/REC-dom-20151119/
[ENCODING-CR]
Anne van Kesteren; Joshua Bell; Addison Phillips. Encoding. 13 April 2017. CR. URL: https://www.w3.org/TR/2017/CR-encoding-20170413/
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[HTML51]
Steve Faulkner; et al. HTML 5.1 2nd Edition. URL: https://www.w3.org/TR/html51/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119
[RFC3629]
F. Yergeau. UTF-8, a transformation format of ISO 10646. November 2003. Internet Standard. URL: https://tools.ietf.org/html/rfc3629
[SELECTORS-3]
Tantek Çelik; et al. Selectors Level 3. URL: https://www.w3.org/TR/selectors-3/
[SELECTORS4]
Elika Etemad; Tab Atkins Jr.. Selectors Level 4. URL: https://www.w3.org/TR/selectors-4/
[WebIDL]
Cameron McCormack; Boris Zbarsky; Tobie Langel. Web IDL. URL: https://heycam.github.io/webidl/
[WEBIDL-1]
Cameron McCormack. WebIDL Level 1. URL: https://www.w3.org/TR/2016/REC-WebIDL-1-20161215/

정보 참고문헌

[MAUR]
Shane McCarron; Michael Cooper; Mark Sadecki. Media Accessibility User Requirements. WD. URL: http://www.w3.org/TR/media-accessibility-reqs/
[WCAG20]
Ben Caldwell; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 11 December 2008. REC. URL: https://www.w3.org/TR/WCAG20/

IDL 색인

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

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