/,/<.pre>/d" index.temp.bs
67 | replace "//,/<.pre>/d" index.temp.bs
68 | replace "//,/<.pre>/{
69 | //{
70 | r anchors-w3c.txt
71 | }
72 | d
73 | }" index.temp.bs
74 | check "Replacing anchors with W3C anchors"
75 |
76 | bikeshed spec index.temp.bs archives/$NEW_DATE/Overview.html
77 | check "Generate with bikeshed"
78 |
79 | rm index.temp.bs
80 | check "Remove temporary source file"
81 |
82 | echo "*** Done ***"
83 |
84 | exit 0
85 |
--------------------------------------------------------------------------------
/format.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 |
3 | import re
4 | import sys
5 |
6 | # http://stackoverflow.com/q/1732348
7 | pattern = re.compile(r'<(\w+).*?>||', re.DOTALL)
8 |
9 | INDENT = ' '
10 | COLUMNS = 100
11 |
12 | def hasendtag(name):
13 | return name not in ['br', 'img', 'meta']
14 |
15 | def tokenize(source):
16 | offset = 0
17 |
18 | for match in pattern.finditer(source):
19 | if match.start() > offset:
20 | yield ('text', offset, match.start(), None)
21 | index = match.lastindex
22 | token = ('open', 'close', 'comment')[index - 1]
23 | name = index < 3 and match.group(index) or None
24 | yield (token, match.start(), match.end(), name)
25 | offset = match.end()
26 |
27 | if offset < len(source):
28 | yield('text', offset, len(source), None)
29 |
30 | def validate(path, source, tokens):
31 | stack = []
32 |
33 | def fail(reason, offset):
34 | lineno = source.count('\n', 0, offset) + 1
35 | print '%s:%s: error: %s' % (path, lineno, reason)
36 | print source.splitlines()[lineno - 1]
37 | sys.exit(1)
38 |
39 | for token, start, end, name in tokens:
40 | if token == 'open':
41 | if hasendtag(name):
42 | stack.append(name)
43 | elif token == 'close':
44 | if len(stack) == 0 or stack[-1] != name:
45 | fail("close tag '%s' with open tags '%s'" %
46 | (name, ' > '.join(stack)), start)
47 | stack.pop()
48 |
49 | if len(stack) > 0:
50 | fail("end of file with open tags '%s'" %
51 | (' > '.join(stack)), len(source) - 1)
52 |
53 | class LineWriter:
54 | def __init__(self, path):
55 | self._file = open(path, 'w')
56 | self._data = ''
57 | self._startdepth = 0
58 |
59 | def _writelines(self, depth):
60 | lines = [depth * INDENT]
61 | for word in self._data.strip().split():
62 | if lines[-1].isspace() or len(lines[-1]) + len(word) <= COLUMNS:
63 | lines[-1] += word + ' '
64 | else:
65 | lines.append(depth * INDENT + word + ' ')
66 | self._file.write('\n'.join((l.rstrip() for l in lines)))
67 | self._data = ''
68 |
69 | def append(self, data):
70 | self._data += data
71 |
72 | def verbatim(self, data, depth):
73 | if len(self._data) > 0:
74 | mindepth = min(self._startdepth, depth)
75 | self._writelines(mindepth)
76 | self._file.write(mindepth * INDENT)
77 | self._file.write(data)
78 |
79 | def newline(self, depth):
80 | self._writelines(min(self._startdepth, depth))
81 | self._file.write('\n')
82 | self._startdepth = depth
83 |
84 | def normalize(path, source, tokens):
85 | lw = LineWriter(path)
86 |
87 | stack = []
88 |
89 | def depth():
90 | d = 0
91 | for name, merge in stack:
92 | if merge:
93 | break
94 | d += 1
95 | return d
96 |
97 | def merging():
98 | for name, merge in stack:
99 | if merge:
100 | return True
101 | return False
102 |
103 | def preservespace():
104 | for name, merge in stack:
105 | if name in ('script', 'style', 'pre'):
106 | return True
107 | return False
108 |
109 | for token, start, end, name in tokens:
110 | didpreservespace = preservespace()
111 |
112 | if token == 'open' and hasendtag(name):
113 | # treat children as single line if followed by non-whitespace
114 | merge = not source[end].isspace()
115 | stack.append((name, merge))
116 | elif token == 'close':
117 | stack.pop()
118 |
119 | data = source[start:end]
120 |
121 | if preservespace() or didpreservespace:
122 | lw.verbatim(data, depth())
123 | elif token == 'text' and not merging():
124 | while len(data) > 0:
125 | line, ending, data = data.partition('\n')
126 | if line:
127 | lw.append(line)
128 | if ending:
129 | lw.newline(depth())
130 | else:
131 | lw.append(data)
132 |
133 | assert len(stack) == 0
134 |
135 | def format(path):
136 | with open(path, 'r') as f:
137 | source = f.read().rstrip() + '\n'
138 |
139 | tokens = list(tokenize(source))
140 | assert source == ''.join((source[t[1]:t[2]] for t in tokens))
141 |
142 | validate(path, source, tokens)
143 | normalize(path, source, tokens)
144 |
145 | if __name__ == '__main__':
146 | format(sys.argv[1])
147 |
--------------------------------------------------------------------------------
/archives/WebVTT1_WD_Changes.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 | TTML 2 - List of changes
5 |
18 | ↑ Jump to Table of Contents ← Collapse Sidebar
21 | WebVTT: The Web Video Text Tracks Format (WebVTT1)- Change Summary
22 |
23 |
24 | Table of Contents
25 |
51 |
52 |
53 |
54 |
55 |
Changes are ordered from least recent to most recent.
56 |
57 |
58 |
59 |
60 |
Technical Changes (normative)
61 |
62 | * added a ::cue-region(id) pseudo-element to select regions by ID in CSS
63 |
64 | * disallowed external resources in a data URL in the STYLE section
65 |
66 | * drop line: and position: settings with invalid linealign/colalign values
67 |
68 | * change parsing of 'line' setting to accept non-integers
69 |
70 | * change to region blocks instead of region headers
71 |
72 | * make align:start/end not affect position or position alignment
73 |
74 | * rename start/end for position alignment to left/right
75 |
76 | * clarify what align:left/right do for vertical text
77 |
78 | * move to using CSS text-wrap:balance instead of custom line wrapping algorithm
79 |
80 | * add ruby-position and text-combine-upright to the list of supported properties
81 |
82 | * add a non-CSS UA conformance class
83 |
84 | * allow external language information to apply
85 |
86 | * support all of HTML's character references
87 |
88 | * avoid waiting for a LF before checking the WEBVTT signature
89 |
90 | * rename "middle" to "center" throughout for consistency with CSS
91 |
92 | * make be bidi-isolated and use default background color on it
93 |
94 | * add support for STYLE blocks
95 |
96 | Editorial Changes
97 |
98 | Structural Document Changes:
99 |
100 | * Added new section explicitly documenting styling (1.3)
101 |
102 | * Formalized conformance classes (2.1)
103 |
104 | * Added unicode handling information (2.2)
105 |
106 | * Made WebVTT comment block part of the WebVTT File structure (3.1)
107 |
108 | * Added parsing rules for chapter titles (5.6)
109 |
110 | * Removed rendering of cues in isolation - everything is rendered with
111 | video (6.1)
112 |
113 | * Moved CSS extensions into their own chapter (7) and added an intro for authors
114 |
115 | * Added new Security and Privacy Considerations section
116 |
117 | * Added an index of defined Terms
118 |
119 | * Added an overview of the IDL
120 |
121 |
122 |
123 |
124 |
← '
10 | + 'Collapse Sidebar ';
11 | var expandSidebarText = '→ '
12 | + 'Pop Out Sidebar ';
13 | var tocJumpText = '↑ '
14 | + 'Jump to Table of Contents ';
15 |
16 | var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
17 | var autoToggle = function(e){ toggleSidebar(e.matches) };
18 | if(sidebarMedia.addListener) {
19 | sidebarMedia.addListener(autoToggle);
20 | }
21 |
22 | function toggleSidebar(on, skipScroll) {
23 | if (on == undefined) {
24 | on = !document.body.classList.contains('toc-sidebar');
25 | }
26 |
27 | if (!skipScroll) {
28 | /* Don't scroll to compensate for the ToC if we're above it already. */
29 | var headY = 0;
30 | var head = document.querySelector('.head');
31 | if (head) {
32 | // terrible approx of "top of ToC"
33 | headY += head.offsetTop + head.offsetHeight;
34 | }
35 | skipScroll = window.scrollY < headY;
36 | }
37 |
38 | var toggle = document.getElementById('toc-toggle');
39 | var tocNav = document.getElementById('toc');
40 | if (on) {
41 | var tocHeight = tocNav.offsetHeight;
42 | document.body.classList.add('toc-sidebar');
43 | document.body.classList.remove('toc-inline');
44 | toggle.innerHTML = collapseSidebarText;
45 | if (!skipScroll) {
46 | window.scrollBy(0, 0 - tocHeight);
47 | }
48 | tocNav.focus();
49 | sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
50 | }
51 | else {
52 | document.body.classList.add('toc-inline');
53 | document.body.classList.remove('toc-sidebar');
54 | toggle.innerHTML = expandSidebarText;
55 | if (!skipScroll) {
56 | window.scrollBy(0, tocNav.offsetHeight);
57 | }
58 | if (toggle.matches(':hover')) {
59 | /* Unfocus button when not using keyboard navigation,
60 | because I don't know where else to send the focus. */
61 | toggle.blur();
62 | }
63 | }
64 | }
65 |
66 | function createSidebarToggle() {
67 | /* Create the sidebar toggle in JS; it shouldn't exist when JS is off. */
68 | var toggle = document.createElement('a');
69 | /* This should probably be a button, but appearance isn't standards-track.*/
70 | toggle.id = 'toc-toggle';
71 | toggle.class = 'toc-toggle';
72 | toggle.href = '#toc';
73 | toggle.innerHTML = collapseSidebarText;
74 |
75 | sidebarMedia.addListener(autoToggle);
76 | var toggler = function(e) {
77 | e.preventDefault();
78 | sidebarMedia.removeListener(autoToggle); // persist explicit off states
79 | toggleSidebar();
80 | return false;
81 | }
82 | toggle.addEventListener('click', toggler, false);
83 |
84 |
85 | /* Get , or make it if we don't have one. */
86 | var tocNav = document.getElementById('toc-nav');
87 | if (!tocNav) {
88 | tocNav = document.createElement('p');
89 | tocNav.id = 'toc-nav';
90 | /* Prepend for better keyboard navigation */
91 | document.body.insertBefore(tocNav, document.body.firstChild);
92 | }
93 | /* While we're at it, make sure we have a Jump to Toc link. */
94 | var tocJump = document.getElementById('toc-jump');
95 | if (!tocJump) {
96 | tocJump = document.createElement('a');
97 | tocJump.id = 'toc-jump';
98 | tocJump.href = '#toc';
99 | tocJump.innerHTML = tocJumpText;
100 | tocNav.appendChild(tocJump);
101 | }
102 |
103 | tocNav.appendChild(toggle);
104 | }
105 |
106 | var toc = document.getElementById('toc');
107 | if (toc) {
108 | if (!document.getElementById('toc-toggle')) {
109 | createSidebarToggle();
110 | }
111 | toggleSidebar(sidebarMedia.matches, true);
112 |
113 | /* If the sidebar has been manually opened and is currently overlaying the text
114 | (window too small for the MQ to add the margin to body),
115 | then auto-close the sidebar once you click on something in there. */
116 | toc.addEventListener('click', function(e) {
117 | if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
118 | toggleSidebar(false);
119 | }
120 | }, false);
121 | }
122 | else {
123 | console.warn("Can't find Table of Contents. Please use around the ToC.");
124 | }
125 |
126 | /* Wrap tables in case they overflow */
127 | var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
128 | var numTables = tables.length;
129 | for (var i = 0; i < numTables; i++) {
130 | var table = tables[i];
131 | if (!table.matches('.example *, .note *, .advisement *, .def *, .issue *')) {
132 | /* Overflowing colored boxes looks terrible, and also
133 | the kinds of tables inside these boxes
134 | are less likely to need extra space. */
135 | var wrapper = document.createElement('div');
136 | wrapper.className = 'overlarge';
137 | table.parentNode.insertBefore(wrapper, table);
138 | wrapper.appendChild(table);
139 | }
140 | }
141 |
142 | })();
143 |
--------------------------------------------------------------------------------
/anchors-w3c.txt:
--------------------------------------------------------------------------------
1 |
2 | urlPrefix: https://www.w3.org/TR/html51/
3 | type: dfn
4 | urlPrefix: infrastructure.html
5 | text: ascii digits
6 | text: split a string on spaces
7 | text: skip whitespace
8 | text: alphanumeric ascii characters
9 | text: space character
10 | text: MIME type
11 | text: ASCII digits
12 | text: collect a sequence of code points; url: #collect-a-sequence-of-characters
13 | text: case-sensitive
14 | text: rules for parsing floating-point number values
15 | text: HTML namespace
16 | text: HTML element
17 | text: ascii whitespace; url: #space-characters
18 | urlPrefix: semantics-embedded-content.html
19 | text: text track kind; url: #kind-of-track
20 | text: text track cue; url: #cue
21 | text: text track list of cues; url: #list-of-cues
22 | text: text track; url: #text-tracks
23 | text: list of text tracks
24 | text: media element
25 | text: text track mode; url: #a-mode
26 | text: text track showing; url: #modedef-track-showing
27 | text: rules for updating the text track rendering
28 | text: text track cue active flag
29 | text: text track cue text
30 | text: text track cue display state
31 | text: current playback position; url: #current-position
32 | text: text track cue identifier
33 | text: text track cue pause-on-exit flag; url: #pause-on-exit-flag
34 | text: rules for extracting the chapter title; url: #text-track-rules-for-extracting-the-chapter-title
35 | text: text track cue start time
36 | text: text track cue end time
37 | text: expose a user interface to the user; url: #exposing-a-user-interface
38 | text: text track cue order
39 | text: honor user preferences for automatic text track selection
40 | urlPrefix: webappapis.html
41 | text: responsible document
42 | text: entry settings object
43 | urlPrefix: syntax.html
44 | text: character references
45 | text: additional allowed character
46 | text: consume a character reference
47 | type: element
48 | urlPrefix: textlevel-semantics.html
49 | text: span; url: #elementdef-span
50 | text: i; url: #elementdef-i
51 | text: b; url: #elementdef-b
52 | text: u; url: #elementdef-u
53 | text: ruby; url: #the-ruby-element
54 | text: rt; url: #the-rt-element
55 | urlPrefix: semantics-embedded-content.html
56 | text: video; url: #the-video-element
57 | text: audio; url: #the-audio-element
58 | text: track; url: #the-track-element
59 | urlPrefix: document-metadata.html
60 | text: style; url: #the-style-element
61 | type: element-attr
62 | urlPrefix: dom.html
63 | text: title; url: #the-title-attribute
64 | text: lang; url: #element-attrdef-global-lang
65 | text: class; url: #classes
66 | urlPrefix: semantics-embedded-content.html; for: track
67 | text: srclang; url: #dom-htmltrackelement-srclang
68 | type: interface
69 | urlPrefix: semantics-embedded-content.html
70 | text: TextTrackCue; url: #texttrackcue-texttrackcue
71 | type: method; for: TextTrack
72 | urlPrefix: semantics-embedded-content.html
73 | text: addCue(); url: #dom-texttrack-addcue
74 |
75 | urlPrefix: https://www.w3.org/TR/encoding/#; type: dfn; spec: ENCODING-CR;
76 | text: utf-8 decode
77 |
78 | urlPrefix: https://www.w3.org/TR/WebIDL-1/#; spec: WEBIDL-1
79 | type: interface
80 | text: IndexSizeError
81 | text: DOMString; url: idl-DOMString
82 | text: double; url: idl-double
83 | text: boolean; url: idl-boolean
84 | text: long; url: idl-long
85 |
86 | urlPrefix: https://www.w3.org/TR/dom/#; spec: dom4-20151119
87 | type: interface
88 | text: Document
89 | text: DocumentFragment
90 | text: Text
91 | text: ProcessingInstruction
92 | type: attribute; for: CharacterData
93 | text: data; url: concept-cd-data
94 | type: attribute; for: ProcessingInstruction
95 | text: target; url: dom-event-target
96 | type: attribute; for: Node
97 | text: namespaceURI; url: dom-element-namespaceuri
98 | text: ownerDocument; url: dom-node-ownerdocument
99 |
100 |
101 |
102 | spec:css-ruby-1; type:value; text:ruby-base
103 | spec:css-color-4; type:property; text:color
104 | spec:css-fonts-3; type:property; text:font-style
105 | spec:css-fonts-3; type:property; text:font-weight
106 | spec:css-ruby-1; type:value; text:ruby
107 | spec:css-ruby-1; type:value; text:ruby-text
108 | spec:css22; type:property; text:min-height
109 | spec:css22; type:property; text:max-height
110 | spec:css-flexbox-1; type:value; text:inline-flex
111 | spec:selectors-3; type:selector; text:::before
112 | spec:selectors-3; type:selector; text:::after
113 | spec:css-display-3; type:property; text:display
114 |
115 |
116 |
117 | {
118 | "MAUR": {
119 | "authors": [ "Shane McCarron", "Michael Cooper", "Mark Sadecki"],
120 | "href": "http://www.w3.org/TR/media-accessibility-reqs/",
121 | "title": "Media Accessibility User Requirements",
122 | "status": "WD",
123 | "publisher": "W3C"
124 | },
125 | "ENCODING-CR": {
126 | "authors": ["Anne van Kesteren", "Joshua Bell", "Addison Phillips"],
127 | "href": "https://www.w3.org/TR/2017/CR-encoding-20170413/",
128 | "title": "Encoding",
129 | "status": "CR",
130 | "publisher": "W3C",
131 | "date": "13 April 2017"
132 | }
133 | }
134 |
135 |
--------------------------------------------------------------------------------
/archives/2018-04-15/changes.html:
--------------------------------------------------------------------------------
1 |
2 | WebVTT: The Web Video Text Tracks Format - List of changes
4 |
17 | ↑ Jump to Table of Contents ← Collapse Sidebar
20 | WebVTT: The Web Video Text Tracks Format Change Summary
21 |
22 |
23 | Table of Contents
24 |
50 |
51 |
52 |
53 |
54 |
Changes are ordered by GitHub issue number.
55 |
56 |
57 |
58 |
Technical Changes
59 |
60 |
61 |
62 | GitHub Issue
63 | Title
64 |
65 |
66 | 388 Clarify the "WebVTT cue settings list" definition.
68 |
69 |
70 | 389 Add a "User agents that do not support CSS" conformance class.
72 |
73 |
74 | 395 Add default color and background color names for applicable classes.
76 |
77 |
78 | 400 Region clarification issue 376
80 |
81 |
82 | 408 Turn long alt text into longdesc.
84 |
85 |
86 | 410 Add a paragraph about the reasons why limiting styles.
88 |
89 |
90 | 411 Update line height for lines in regions.
92 |
93 |
94 | 417 Unsigned long issue 414
96 |
97 |
98 | 418 Class override
100 |
101 |
102 | 419 Timeranges clarification
104 |
105 |
106 | 420 Cue setting clarifications
108 |
109 |
110 | 421 Computed position alignment
112 |
113 |
114 | 422 Don't make edge margins depend on aesthetics.
116 |
117 |
118 | 423 Region lines cannot be negative now that they are unsigned long.
120 |
121 |
122 |
123 |
Editorial Changes
124 |
125 |
126 |
127 |
128 |
129 | GitHub Issue
130 | Title
131 |
132 |
133 | 390 Move definition of chapter title text
135 |
136 |
137 | 394 Add some explanatory text about the different types of VTT files.
139 |
140 |
141 | 396 Fix up algorithm markup and improve a bikeshed style.
143 |
144 |
145 | 398 Break up section 6 a bit more to make it more readable.
147 |
148 |
149 | 399 Clarify line cue setting specification.
151 |
152 |
153 | 407 Add code of conduct as proposed by plh
155 |
156 |
157 | 409 Add some introductory paragraphs to the Data model section.
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
WebVTT: The Web Video Text Tracks Format - List of changes
4 |
17 | ↑ Jump to Table of Contents ← Collapse Sidebar
20 | WebVTT: The Web Video Text Tracks Format Change Summary
21 |
22 |
23 | Table of Contents
24 |
50 |
51 |
52 |
53 |
54 |
Changes are ordered by GitHub issue number.
55 |
56 |
57 |
58 |
Technical Changes
59 |
60 |
61 |
62 | GitHub Issue
63 | Title
64 |
65 |
66 | 388 Clarify the "WebVTT cue settings list" definition.
68 |
69 |
70 | 389 Add a "User agents that do not support CSS" conformance class.
72 |
73 |
74 | 395 Add default color and background color names for applicable classes.
76 |
77 |
78 | 400 Region clarification issue 376
80 |
81 |
82 | 408 Turn long alt text into longdesc.
84 |
85 |
86 | 410 Add a paragraph about the reasons why limiting styles.
88 |
89 |
90 | 411 Update line height for lines in regions.
92 |
93 |
94 | 417 Unsigned long issue 414
96 |
97 |
98 | 418 Class override
100 |
101 |
102 | 419 Timeranges clarification
104 |
105 |
106 | 420 Cue setting clarifications
108 |
109 |
110 | 421 Computed position alignment
112 |
113 |
114 | 422 Don't make edge margins depend on aesthetics.
116 |
117 |
118 | 423 Region lines cannot be negative now that they are unsigned long.
120 |
121 |
122 |
123 |
Editorial Changes
124 |
125 |
126 |
127 |
128 |
129 | GitHub Issue
130 | Title
131 |
132 |
133 | 390 Move definition of chapter title text
135 |
136 |
137 | 394 Add some explanatory text about the different types of VTT files.
139 |
140 |
141 | 396 Fix up algorithm markup and improve a bikeshed style.
143 |
144 |
145 | 398 Break up section 6 a bit more to make it more readable.
147 |
148 |
149 | 399 Clarify line cue setting specification.
151 |
152 |
153 | 407 Add code of conduct as proposed by plh
155 |
156 |
157 | 409 Add some introductory paragraphs to the Data model section.
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
)
8 | * + for the section numbers
9 | * - #toc for the Table of Contents ()
10 | * - ul.index for Indices (term , in §N.M )
11 | * - table.index for Index Tables (e.g. for properties or elements)
12 | *
13 | * Structural Markup
14 | * - table.data for general data tables
15 | * -> use 'scope' attribute, , , and for best results !
16 | * -> use for extra-complex tables
17 | * -> use for paragraph-length cell content
18 | * -> use when manual line breaks/indentation would help readability
19 | * - dl.switch for switch statements
20 | * - ol.algorithm for algorithms (helps to visualize nesting)
21 | * - .figure and .caption (HTML4) and figure and figcaption (HTML5)
22 | * -> .sidefigure for right-floated figures
23 | * - ins/del
24 | *
25 | * Code
26 | * - pre and code
27 | *
28 | * Special Sections
29 | * - .note for informative notes (div, p, span, aside, details)
30 | * - .example for informative examples (div, p, pre, span)
31 | * - .issue for issues (div, p, span)
32 | * - .advisement for loud normative statements (div, p, strong)
33 | * - .annoying-warning for spec obsoletion notices (div, aside, details)
34 | *
35 | * Definition Boxes
36 | * - pre.def for WebIDL definitions
37 | * - table.def for tables that define other entities (e.g. CSS properties)
38 | * - dl.def for definition lists that define other entitles (e.g. HTML elements)
39 | *
40 | * Numbering
41 | * - .secno for section numbers in .toc and headings (3.2 )
42 | * - .marker for source-inserted example/figure/issue numbers (Issue 4 )
43 | * - ::before styled for CSS-generated issue/example/figure numbers:
44 | * -> Documents wishing to use this only need to add
45 | * figcaption::before,
46 | * .caption::before { content: "Figure " counter(figure) " "; }
47 | * .example::before { content: "Example " counter(example) " "; }
48 | * .issue::before { content: "Issue " counter(issue) " "; }
49 | *
50 | * Header Stuff (ignore, just don't conflict with these classes)
51 | * - .head for the header
52 | * - .copyright for the copyright
53 | *
54 | * Miscellaneous
55 | * - .overlarge for things that should be as wide as possible, even if
56 | * that overflows the body text area. This can be used on an item or
57 | * on its container, depending on the effect desired.
58 | * Note that this styling basically doesn't help at all when printing,
59 | * since A4 paper isn't much wider than the max-width here.
60 | * It's better to design things to fit into a narrower measure if possible.
61 | * - js-added ToC jump links (see fixup.js)
62 | *
63 | ******************************************************************************/
64 |
65 | /******************************************************************************/
66 | /* Body */
67 | /******************************************************************************/
68 |
69 | body {
70 | counter-reset: example figure issue;
71 |
72 | /* Layout */
73 | max-width: 50em; /* limit line length to 50em for readability */
74 | margin: 0 auto; /* center text within page */
75 | padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
76 | padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag */
77 |
78 | /* Typography */
79 | line-height: 1.5;
80 | font-family: sans-serif;
81 | widows: 2;
82 | orphans: 2;
83 | word-wrap: break-word;
84 | overflow-wrap: break-word;
85 | hyphens: auto;
86 |
87 | /* Colors */
88 | color: black;
89 | background: white top left fixed no-repeat;
90 | background-size: 25px auto;
91 | }
92 |
93 |
94 | /******************************************************************************/
95 | /* Front Matter & Navigation */
96 | /******************************************************************************/
97 |
98 | /** Header ********************************************************************/
99 |
100 | div.head { margin-bottom: 1em; }
101 | div.head hr { border-style: solid; }
102 |
103 | div.head h1 {
104 | font-weight: bold;
105 | margin: 0 0 .1em;
106 | font-size: 220%;
107 | }
108 |
109 | div.head h2 { margin-bottom: 1.5em;}
110 |
111 | /** W3C Logo ******************************************************************/
112 |
113 | .head p:not(.copyright):first-child {
114 | margin: 0;
115 | }
116 |
117 | .head p:not(.copyright):first-child > a,
118 | .head > a:first-child {
119 | float: right;
120 | margin: 0.4rem 0 0.2rem .4rem;
121 | }
122 |
123 | .head img[src*="logos/W3C"] {
124 | display: block;
125 | border: solid #1a5e9a;
126 | border-width: .65rem .7rem .6rem;
127 | border-radius: .4rem;
128 | background: #1a5e9a;
129 | color: white;
130 | font-weight: bold;
131 | }
132 |
133 | .head a:hover > img[src*="logos/W3C"],
134 | .head a:focus > img[src*="logos/W3C"] {
135 | opacity: .8;
136 | }
137 |
138 | .head a:active > img[src*="logos/W3C"] {
139 | background: #c00;
140 | border-color: #c00;
141 | }
142 |
143 | /* see also additional rules in Link Styling section */
144 |
145 | /** Copyright *****************************************************************/
146 |
147 | p.copyright,
148 | p.copyright small { font-size: small; }
149 |
150 | /** Back to Top / ToC Toggle **************************************************/
151 |
152 | @media print {
153 | #toc-nav {
154 | display: none;
155 | }
156 | }
157 | @media not print {
158 | #toc-nav {
159 | position: fixed;
160 | z-index: 2;
161 | bottom: 0; left: 0;
162 | margin: 0;
163 | min-width: 1.33em;
164 | border-top-right-radius: 2rem;
165 | box-shadow: 0 0 2px;
166 | font-size: 1.5em;
167 | color: black;
168 | }
169 | #toc-nav > a {
170 | display: block;
171 | white-space: nowrap;
172 |
173 | height: 1.33em;
174 | padding: .1em 0.3em;
175 | margin: 0;
176 |
177 | box-shadow: 0 0 2px;
178 | border: none;
179 | border-top-right-radius: 1.33em;
180 | background: white;
181 | }
182 | #toc-nav > #toc-jump {
183 | padding-bottom: 2em;
184 | margin-bottom: -1.9em;
185 | }
186 |
187 | #toc-nav > a:hover,
188 | #toc-nav > a:focus {
189 | background: #f8f8f8;
190 | }
191 | #toc-nav > a:not(:hover):not(:focus) {
192 | color: #707070;
193 | }
194 |
195 | /* statusbar gets in the way on keyboard focus; remove once browsers fix */
196 | #toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
197 | padding-bottom: 1.5rem;
198 | }
199 |
200 | #toc-nav:not(:hover) > a:not(:focus) > span + span {
201 | /* Ideally this uses :focus-within on #toc-nav */
202 | display: none;
203 | }
204 | #toc-nav > a > span + span {
205 | padding-right: 0.2em;
206 | }
207 |
208 | #toc-toggle-inline {
209 | vertical-align: 0.05em;
210 | font-size: 80%;
211 | color: gray;
212 | color: hsla(203,20%,40%,.7);
213 | border-style: none;
214 | background: transparent;
215 | position: relative;
216 | }
217 | #toc-toggle-inline:hover:not(:active),
218 | #toc-toggle-inline:focus:not(:active) {
219 | text-shadow: 1px 1px silver;
220 | top: -1px;
221 | left: -1px;
222 | }
223 |
224 | #toc-nav :active {
225 | color: #C00;
226 | }
227 | }
228 |
229 | /** ToC Sidebar ***************************************************************/
230 |
231 | /* Floating sidebar */
232 | @media screen {
233 | body.toc-sidebar #toc {
234 | position: fixed;
235 | top: 0; bottom: 0;
236 | left: 0;
237 | width: 23.5em;
238 | max-width: 80%;
239 | max-width: calc(100% - 2em - 26px);
240 | overflow: auto;
241 | padding: 0 1em;
242 | padding-left: 42px;
243 | padding-left: calc(1em + 26px);
244 | background: inherit;
245 | background-color: #f7f8f9;
246 | z-index: 1;
247 | box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
248 | }
249 | body.toc-sidebar #toc h2 {
250 | margin-top: .8rem;
251 | font-variant: small-caps;
252 | font-variant: all-small-caps;
253 | text-transform: lowercase;
254 | font-weight: bold;
255 | color: gray;
256 | color: hsla(203,20%,40%,.7);
257 | }
258 | body.toc-sidebar #toc-jump:not(:focus) {
259 | width: 0;
260 | height: 0;
261 | padding: 0;
262 | position: absolute;
263 | overflow: hidden;
264 | }
265 | }
266 | /* Hide main scroller when only the ToC is visible anyway */
267 | @media screen and (max-width: 28em) {
268 | body.toc-sidebar {
269 | overflow: hidden;
270 | }
271 | }
272 |
273 | /* Sidebar with its own space */
274 | @media screen and (min-width: 78em) {
275 | body:not(.toc-inline) #toc {
276 | position: fixed;
277 | top: 0; bottom: 0;
278 | left: 0;
279 | width: 23.5em;
280 | overflow: auto;
281 | padding: 0 1em;
282 | padding-left: 42px;
283 | padding-left: calc(1em + 26px);
284 | background: inherit;
285 | background-color: #f7f8f9;
286 | z-index: 1;
287 | box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
288 | }
289 | body:not(.toc-inline) #toc h2 {
290 | margin-top: .8rem;
291 | font-variant: small-caps;
292 | font-variant: all-small-caps;
293 | text-transform: lowercase;
294 | font-weight: bold;
295 | color: gray;
296 | color: hsla(203,20%,40%,.7);
297 | }
298 |
299 | body:not(.toc-inline) {
300 | padding-left: 29em;
301 | }
302 | /* See also Overflow section at the bottom */
303 |
304 | body:not(.toc-inline) #toc-jump:not(:focus) {
305 | width: 0;
306 | height: 0;
307 | padding: 0;
308 | position: absolute;
309 | overflow: hidden;
310 | }
311 | }
312 | @media screen and (min-width: 90em) {
313 | body:not(.toc-inline) {
314 | margin: 0 4em;
315 | }
316 | }
317 |
318 | /******************************************************************************/
319 | /* Sectioning */
320 | /******************************************************************************/
321 |
322 | /** Headings ******************************************************************/
323 |
324 | h1, h2, h3, h4, h5, h6, dt {
325 | page-break-after: avoid;
326 | page-break-inside: avoid;
327 | font: 100% sans-serif; /* Reset all font styling to clear out UA styles */
328 | font-family: inherit; /* Inherit the font family. */
329 | line-height: 1.2; /* Keep wrapped headings compact */
330 | hyphens: manual; /* Hyphenated headings look weird */
331 | }
332 |
333 | h2, h3, h4, h5, h6 {
334 | margin-top: 3rem;
335 | }
336 |
337 | h1, h2, h3 {
338 | color: #005A9C;
339 | background: transparent;
340 | }
341 |
342 | h1 { font-size: 170%; }
343 | h2 { font-size: 140%; }
344 | h3 { font-size: 120%; }
345 | h4 { font-weight: bold; }
346 | h5 { font-style: italic; }
347 | h6 { font-variant: small-caps; }
348 | dt { font-weight: bold; }
349 |
350 | /** Subheadings ***************************************************************/
351 |
352 | h1 + h2,
353 | #subtitle {
354 | /* #subtitle is a subtitle in an H2 under the H1 */
355 | margin-top: 0;
356 | }
357 | h2 + h3,
358 | h3 + h4,
359 | h4 + h5,
360 | h5 + h6 {
361 | margin-top: 1.2em; /* = 1 x line-height */
362 | }
363 |
364 | /** Section divider ***********************************************************/
365 |
366 | :not(.head) > :not(.head) + hr {
367 | font-size: 1.5em;
368 | text-align: center;
369 | margin: 1em auto;
370 | height: auto;
371 | border: transparent solid 0;
372 | background: transparent;
373 | }
374 | :not(.head) > hr::before {
375 | content: "\2727\2003\2003\2727\2003\2003\2727";
376 | }
377 |
378 | /******************************************************************************/
379 | /* Paragraphs and Lists */
380 | /******************************************************************************/
381 |
382 | p {
383 | margin: 1em 0;
384 | }
385 |
386 | dd > p:first-child,
387 | li > p:first-child {
388 | margin-top: 0;
389 | }
390 |
391 | ul, ol {
392 | margin-left: 0;
393 | padding-left: 2em;
394 | }
395 |
396 | li {
397 | margin: 0.25em 0 0.5em;
398 | padding: 0;
399 | }
400 |
401 | dl dd {
402 | margin: 0 0 .5em 2em;
403 | }
404 |
405 | .head dd + dd { /* compact for header */
406 | margin-top: -.5em;
407 | }
408 |
409 | /* Style for algorithms */
410 | ol.algorithm ol:not(.algorithm),
411 | .algorithm > ol ol:not(.algorithm) {
412 | border-left: 0.5em solid #DEF;
413 | }
414 |
415 | /* Style for switch/case s */
416 | dl.switch > dd > ol.only {
417 | margin-left: 0;
418 | }
419 | dl.switch > dd > ol.algorithm {
420 | margin-left: -2em;
421 | }
422 | dl.switch {
423 | padding-left: 2em;
424 | }
425 | dl.switch > dt {
426 | text-indent: -1.5em;
427 | margin-top: 1em;
428 | }
429 | dl.switch > dt + dt {
430 | margin-top: 0;
431 | }
432 | dl.switch > dt::before {
433 | content: '\21AA';
434 | padding: 0 0.5em 0 0;
435 | display: inline-block;
436 | width: 1em;
437 | text-align: right;
438 | line-height: 0.5em;
439 | }
440 |
441 | /** Terminology Markup ********************************************************/
442 |
443 |
444 | /******************************************************************************/
445 | /* Inline Markup */
446 | /******************************************************************************/
447 |
448 | /** Terminology Markup ********************************************************/
449 | dfn { /* Defining instance */
450 | font-weight: bolder;
451 | }
452 | a > i { /* Instance of term */
453 | font-style: normal;
454 | }
455 | dt dfn code, code.idl {
456 | font-size: inherit;
457 | }
458 | dfn var {
459 | font-style: normal;
460 | }
461 |
462 | /** Change Marking ************************************************************/
463 |
464 | del { color: red; text-decoration: line-through; }
465 | ins { color: #080; text-decoration: underline; }
466 |
467 | /** Miscellaneous improvements to inline formatting ***************************/
468 |
469 | sup {
470 | vertical-align: super;
471 | font-size: 80%;
472 | }
473 |
474 | /******************************************************************************/
475 | /* Code */
476 | /******************************************************************************/
477 |
478 | /** General monospace/pre rules ***********************************************/
479 |
480 | pre, code, samp {
481 | font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
482 | font-size: .9em;
483 | page-break-inside: avoid;
484 | hyphens: none;
485 | text-transform: none;
486 | }
487 | pre code,
488 | code code {
489 | font-size: 100%;
490 | }
491 |
492 | pre {
493 | margin-top: 1em;
494 | margin-bottom: 1em;
495 | overflow: auto;
496 | }
497 |
498 | /** Inline Code fragments *****************************************************/
499 |
500 | /* Do something nice. */
501 |
502 | /******************************************************************************/
503 | /* Links */
504 | /******************************************************************************/
505 |
506 | /** General Hyperlinks ********************************************************/
507 |
508 | /* We hyperlink a lot, so make it less intrusive */
509 | a[href] {
510 | color: #034575;
511 | text-decoration: none;
512 | border-bottom: 1px solid #707070;
513 | /* Need a bit of extending for it to look okay */
514 | padding: 0 1px 0;
515 | margin: 0 -1px 0;
516 | }
517 | a:visited {
518 | border-bottom-color: #BBB;
519 | }
520 |
521 | /* Use distinguishing colors when user is interacting with the link */
522 | a[href]:focus,
523 | a[href]:hover {
524 | background: #f8f8f8;
525 | background: rgba(75%, 75%, 75%, .25);
526 | border-bottom-width: 3px;
527 | margin-bottom: -2px;
528 | }
529 | a[href]:active {
530 | color: #C00;
531 | border-color: #C00;
532 | }
533 |
534 | /* Backout above styling for W3C logo */
535 | .head p:not(.copyright) > a,
536 | .head > a:first-child {
537 | border: none;
538 | text-decoration: none;
539 | background: transparent;
540 | }
541 |
542 | /******************************************************************************/
543 | /* Images */
544 | /******************************************************************************/
545 |
546 | img {
547 | border-style: none;
548 | }
549 |
550 | /* For autogen numbers, add
551 | .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
552 | */
553 |
554 | figure, .figure, .sidefigure {
555 | page-break-inside: avoid;
556 | text-align: center;
557 | margin: 2.5em 0;
558 | }
559 | .figure img, .sidefigure img, figure img,
560 | .figure object, .sidefigure object, figure object {
561 | max-width: 100%;
562 | margin: auto;
563 | }
564 | .figure pre, .sidefigure pre, figure pre {
565 | text-align: left;
566 | display: table;
567 | margin: 1em auto;
568 | }
569 | .figure table, figure table {
570 | margin: auto;
571 | }
572 | @media screen and (min-width: 20em) {
573 | .sidefigure {
574 | float: right;
575 | width: 50%;
576 | margin: 0 0 0.5em 0.5em;
577 | }
578 | }
579 | .caption, figcaption, caption {
580 | font-style: italic;
581 | font-size: 90%;
582 | }
583 | .caption::before, figcaption::before, figcaption > .marker {
584 | font-weight: bold;
585 | }
586 | .caption, figcaption {
587 | counter-increment: figure;
588 | }
589 |
590 | /* DL list is indented 2em, but figure inside it is not */
591 | dd > .figure, dd > figure { margin-left: -2em; }
592 |
593 | /******************************************************************************/
594 | /* Colored Boxes */
595 | /******************************************************************************/
596 |
597 | .issue, .note, .example, .advisement, blockquote {
598 | padding: .5em;
599 | border: .5em;
600 | border-left-style: solid;
601 | page-break-inside: avoid;
602 | }
603 | span.issue, span.note {
604 | padding: .1em .5em .15em;
605 | border-right-style: solid;
606 | }
607 |
608 | .issue,
609 | .note,
610 | .example,
611 | .advisement,
612 | blockquote {
613 | margin: 1em auto;
614 | }
615 | .note > p:first-child,
616 | .issue > p:first-child,
617 | blockquote > :first-child {
618 | margin-top: 0;
619 | }
620 | blockquote > :last-child {
621 | margin-bottom: 0;
622 | }
623 |
624 | /** Blockquotes ***************************************************************/
625 |
626 | blockquote {
627 | border-color: silver;
628 | }
629 |
630 | /** Open issue ****************************************************************/
631 |
632 | .issue {
633 | border-color: #E05252;
634 | background: #FBE9E9;
635 | counter-increment: issue;
636 | overflow: auto;
637 | }
638 | .issue::before, .issue > .marker {
639 | color: #AE1E1E;
640 | padding-right: 1em;
641 | text-transform: uppercase;
642 | }
643 | /* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
644 | or use class="marker" to mark up the issue number in source. */
645 |
646 | /** Example *******************************************************************/
647 |
648 | .example {
649 | border-color: #E0CB52;
650 | background: #FCFAEE;
651 | counter-increment: example;
652 | overflow: auto;
653 | clear: both;
654 | }
655 | .example::before, .example > .marker {
656 | text-transform: uppercase;
657 | color: #827017;
658 | min-width: 7.5em;
659 | display: block;
660 | }
661 | /* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
662 | or use class="marker" to mark up the example number in source. */
663 |
664 | /** Non-normative Note ********************************************************/
665 |
666 | .note {
667 | border-color: #52E052;
668 | background: #E9FBE9;
669 | overflow: auto;
670 | }
671 |
672 | .note::before, .note > .marker,
673 | details.note > summary::before,
674 | details.note > summary > .marker {
675 | text-transform: uppercase;
676 | display: block;
677 | color: hsl(120, 70%, 30%);
678 | }
679 | /* Add .note::before { content: "Note "; } for autogen label,
680 | or use class="marker" to mark up the label in source. */
681 |
682 | details.note > summary {
683 | display: block;
684 | color: hsl(120, 70%, 30%);
685 | }
686 | details.note[open] > summary {
687 | border-bottom: 1px silver solid;
688 | }
689 |
690 | /** Advisement Box ************************************************************/
691 | /* for attention-grabbing normative statements */
692 |
693 | .advisement {
694 | border-color: orange;
695 | border-style: none solid;
696 | background: #FFEECC;
697 | }
698 | strong.advisement {
699 | display: block;
700 | text-align: center;
701 | }
702 | .advisement > .marker {
703 | color: #B35F00;
704 | }
705 |
706 | /** Spec Obsoletion Notice ****************************************************/
707 | /* obnoxious obsoletion notice for older/abandoned specs. */
708 |
709 | details {
710 | display: block;
711 | }
712 | summary {
713 | font-weight: bolder;
714 | }
715 |
716 | .annoying-warning:not(details),
717 | details.annoying-warning:not([open]) > summary,
718 | details.annoying-warning[open] {
719 | background: #fdd;
720 | color: red;
721 | font-weight: bold;
722 | padding: .75em 1em;
723 | border: thick red;
724 | border-style: solid;
725 | border-radius: 1em;
726 | }
727 | .annoying-warning :last-child {
728 | margin-bottom: 0;
729 | }
730 |
731 | @media not print {
732 | details.annoying-warning[open] {
733 | position: fixed;
734 | left: 1em;
735 | right: 1em;
736 | bottom: 1em;
737 | z-index: 1000;
738 | }
739 | }
740 |
741 | details.annoying-warning:not([open]) > summary {
742 | text-align: center;
743 | }
744 |
745 | /** Entity Definition Boxes ***************************************************/
746 |
747 | .def {
748 | padding: .5em 1em;
749 | background: #DEF;
750 | margin: 1.2em 0;
751 | border-left: 0.5em solid #8CCBF2;
752 | }
753 |
754 | /******************************************************************************/
755 | /* Tables */
756 | /******************************************************************************/
757 |
758 | th, td {
759 | text-align: left;
760 | text-align: start;
761 | }
762 |
763 | /** Property/Descriptor Definition Tables *************************************/
764 |
765 | table.def {
766 | /* inherits .def box styling, see above */
767 | width: 100%;
768 | border-spacing: 0;
769 | }
770 |
771 | table.def td,
772 | table.def th {
773 | padding: 0.5em;
774 | vertical-align: baseline;
775 | border-bottom: 1px solid #bbd7e9;
776 | }
777 |
778 | table.def > tbody > tr:last-child th,
779 | table.def > tbody > tr:last-child td {
780 | border-bottom: 0;
781 | }
782 |
783 | table.def th {
784 | font-style: italic;
785 | font-weight: normal;
786 | padding-left: 1em;
787 | width: 3em;
788 | }
789 |
790 | /* For when values are extra-complex and need formatting for readability */
791 | table td.pre {
792 | white-space: pre-wrap;
793 | }
794 |
795 | /* A footnote at the bottom of a def table */
796 | table.def td.footnote {
797 | padding-top: 0.6em;
798 | }
799 | table.def td.footnote::before {
800 | content: " ";
801 | display: block;
802 | height: 0.6em;
803 | width: 4em;
804 | border-top: thin solid;
805 | }
806 |
807 | /** Data tables (and properly marked-up index tables) *************************/
808 | /*
809 | highlights structural relationships in a table
810 | when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)
811 |
812 | Use class="complex data" for particularly complicated tables --
813 | (This will draw more lines: busier, but clearer.)
814 |
815 | Use class="long" on table cells with paragraph-like contents
816 | (This will adjust text alignment accordingly.)
817 | Alternately use class="longlastcol" on tables, to have the last column assume "long".
818 | */
819 |
820 | table {
821 | word-wrap: normal;
822 | overflow-wrap: normal;
823 | hyphens: manual;
824 | }
825 |
826 | table.data,
827 | table.index {
828 | margin: 1em auto;
829 | border-collapse: collapse;
830 | border: hidden;
831 | width: 100%;
832 | }
833 | table.data caption,
834 | table.index caption {
835 | max-width: 50em;
836 | margin: 0 auto 1em;
837 | }
838 |
839 | table.data td, table.data th,
840 | table.index td, table.index th {
841 | padding: 0.5em 1em;
842 | border-width: 1px;
843 | border-color: silver;
844 | border-top-style: solid;
845 | }
846 |
847 | table.data thead td:empty {
848 | padding: 0;
849 | border: 0;
850 | }
851 |
852 | table.data thead,
853 | table.index thead,
854 | table.data tbody,
855 | table.index tbody {
856 | border-bottom: 2px solid;
857 | }
858 |
859 | table.data colgroup,
860 | table.index colgroup {
861 | border-left: 2px solid;
862 | }
863 |
864 | table.data tbody th:first-child,
865 | table.index tbody th:first-child {
866 | border-right: 2px solid;
867 | border-top: 1px solid silver;
868 | padding-right: 1em;
869 | }
870 |
871 | table.data th[colspan],
872 | table.data td[colspan] {
873 | text-align: center;
874 | }
875 |
876 | table.complex.data th,
877 | table.complex.data td {
878 | border: 1px solid silver;
879 | text-align: center;
880 | }
881 |
882 | table.data.longlastcol td:last-child,
883 | table.data td.long {
884 | vertical-align: baseline;
885 | text-align: left;
886 | }
887 |
888 | table.data img {
889 | vertical-align: middle;
890 | }
891 |
892 |
893 | /*
894 | Alternate table alignment rules
895 |
896 | table.data,
897 | table.index {
898 | text-align: center;
899 | }
900 |
901 | table.data thead th[scope="row"],
902 | table.index thead th[scope="row"] {
903 | text-align: right;
904 | }
905 |
906 | table.data tbody th:first-child,
907 | table.index tbody th:first-child {
908 | text-align: right;
909 | }
910 |
911 | Possible extra rowspan handling
912 |
913 | table.data tbody th[rowspan]:not([rowspan='1']),
914 | table.index tbody th[rowspan]:not([rowspan='1']),
915 | table.data tbody td[rowspan]:not([rowspan='1']),
916 | table.index tbody td[rowspan]:not([rowspan='1']) {
917 | border-left: 1px solid silver;
918 | }
919 |
920 | table.data tbody th[rowspan]:first-child,
921 | table.index tbody th[rowspan]:first-child,
922 | table.data tbody td[rowspan]:first-child,
923 | table.index tbody td[rowspan]:first-child{
924 | border-left: 0;
925 | border-right: 1px solid silver;
926 | }
927 | */
928 |
929 | /******************************************************************************/
930 | /* Indices */
931 | /******************************************************************************/
932 |
933 |
934 | /** Table of Contents *********************************************************/
935 |
936 | .toc a {
937 | /* More spacing; use padding to make it part of the click target. */
938 | padding-top: 0.1rem;
939 | /* Larger, more consistently-sized click target */
940 | display: block;
941 | /* Reverse color scheme */
942 | color: black;
943 | border-color: #3980B5;
944 | }
945 | .toc a:visited {
946 | border-color: #054572;
947 | }
948 | .toc a:not(:focus):not(:hover) {
949 | /* Allow colors to cascade through from link styling */
950 | border-bottom-color: transparent;
951 | }
952 |
953 | .toc, .toc ol, .toc ul, .toc li {
954 | list-style: none; /* Numbers must be inlined into source */
955 | /* because generated content isn't search/selectable and markers can't do multilevel yet */
956 | margin: 0;
957 | padding: 0;
958 | line-height: 1.1rem; /* consistent spacing */
959 | }
960 |
961 | /* ToC not indented until third level, but font style & margins show hierarchy */
962 | .toc > li { font-weight: bold; }
963 | .toc > li li { font-weight: normal; }
964 | .toc > li li li { font-size: 95%; }
965 | .toc > li li li li { font-size: 90%; }
966 | .toc > li li li li li { font-size: 85%; }
967 |
968 | .toc > li { margin: 1.5rem 0; }
969 | .toc > li li { margin: 0.3rem 0; }
970 | .toc > li li li { margin-left: 2rem; }
971 |
972 | /* Section numbers in a column of their own */
973 | .toc .secno {
974 | float: left;
975 | width: 4rem;
976 | white-space: nowrap;
977 | }
978 | .toc > li li li li .secno {
979 | font-size: 85%;
980 | }
981 | .toc > li li li li li .secno {
982 | font-size: 100%;
983 | }
984 |
985 | :not(li) > .toc { margin-left: 5rem; }
986 | .toc .secno { margin-left: -5rem; }
987 | .toc > li li li .secno { margin-left: -7rem; }
988 | .toc > li li li li .secno { margin-left: -9rem; }
989 | .toc > li li li li li .secno { margin-left: -11rem; }
990 |
991 | /* Tighten up indentation in narrow ToCs */
992 | @media (max-width: 30em) {
993 | :not(li) > .toc { margin-left: 4rem; }
994 | .toc .secno { margin-left: -4rem; }
995 | .toc > li li li { margin-left: 1rem; }
996 | .toc > li li li .secno { margin-left: -5rem; }
997 | .toc > li li li li .secno { margin-left: -6rem; }
998 | .toc > li li li li li .secno { margin-left: -7rem; }
999 | }
1000 | @media screen and (min-width: 78em) {
1001 | body:not(.toc-inline) :not(li) > .toc { margin-left: 4rem; }
1002 | body:not(.toc-inline) .toc .secno { margin-left: -4rem; }
1003 | body:not(.toc-inline) .toc > li li li { margin-left: 1rem; }
1004 | body:not(.toc-inline) .toc > li li li .secno { margin-left: -5rem; }
1005 | body:not(.toc-inline) .toc > li li li li .secno { margin-left: -6rem; }
1006 | body:not(.toc-inline) .toc > li li li li li .secno { margin-left: -7rem; }
1007 | }
1008 | body.toc-sidebar #toc :not(li) > .toc { margin-left: 4rem; }
1009 | body.toc-sidebar #toc .toc .secno { margin-left: -4rem; }
1010 | body.toc-sidebar #toc .toc > li li li { margin-left: 1rem; }
1011 | body.toc-sidebar #toc .toc > li li li .secno { margin-left: -5rem; }
1012 | body.toc-sidebar #toc .toc > li li li li .secno { margin-left: -6rem; }
1013 | body.toc-sidebar #toc .toc > li li li li li .secno { margin-left: -7rem; }
1014 |
1015 | .toc li {
1016 | clear: both;
1017 | }
1018 |
1019 |
1020 | /** Index *********************************************************************/
1021 |
1022 | /* Index Lists: Layout */
1023 | ul.index { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
1024 | ul.index li { margin-left: 0; list-style: none; break-inside: avoid; }
1025 | ul.index li li { margin-left: 1em; }
1026 | ul.index dl { margin-top: 0; }
1027 | ul.index dt { margin: .2em 0 .2em 20px;}
1028 | ul.index dd { margin: .2em 0 .2em 40px;}
1029 | /* Index Lists: Typography */
1030 | ul.index ul,
1031 | ul.index dl { font-size: smaller; }
1032 | @media not print {
1033 | ul.index li span {
1034 | white-space: nowrap;
1035 | color: transparent;
1036 | }
1037 | ul.index li a:hover + span,
1038 | ul.index li a:focus + span {
1039 | color: #707070;
1040 | }
1041 | }
1042 |
1043 | /** Index Tables *****************************************************/
1044 | /* See also the data table styling section, which this effectively subclasses */
1045 |
1046 | table.index {
1047 | font-size: small;
1048 | border-collapse: collapse;
1049 | border-spacing: 0;
1050 | text-align: left;
1051 | margin: 1em 0;
1052 | }
1053 |
1054 | table.index td,
1055 | table.index th {
1056 | padding: 0.4em;
1057 | }
1058 |
1059 | table.index tr:hover td:not([rowspan]),
1060 | table.index tr:hover th:not([rowspan]) {
1061 | background: #f7f8f9;
1062 | }
1063 |
1064 | /* The link in the first column in the property table (formerly a TD) */
1065 | table.index th:first-child a {
1066 | font-weight: bold;
1067 | }
1068 |
1069 | /******************************************************************************/
1070 | /* Print */
1071 | /******************************************************************************/
1072 |
1073 | @media print {
1074 | /* Pages have their own margins. */
1075 | html {
1076 | margin: 0;
1077 | }
1078 | /* Serif for print. */
1079 | body {
1080 | font-family: serif;
1081 | }
1082 | }
1083 | @page {
1084 | margin: 1.5cm 1.1cm;
1085 | }
1086 |
1087 | /******************************************************************************/
1088 | /* Legacy */
1089 | /******************************************************************************/
1090 |
1091 | /* This rule is inherited from past style sheets. No idea what it's for. */
1092 | .hide { display: none; }
1093 |
1094 |
1095 |
1096 | /******************************************************************************/
1097 | /* Overflow Control */
1098 | /******************************************************************************/
1099 |
1100 | .figure .caption, .sidefigure .caption, figcaption {
1101 | /* in case figure is overlarge, limit caption to 50em */
1102 | max-width: 50rem;
1103 | margin-left: auto;
1104 | margin-right: auto;
1105 | }
1106 | .overlarge > table {
1107 | /* limit preferred width of table */
1108 | max-width: 50em;
1109 | margin-left: auto;
1110 | margin-right: auto;
1111 | }
1112 |
1113 | @media (min-width: 55em) {
1114 | .overlarge {
1115 | margin-left: calc(13px + 26.5rem - 50vw);
1116 | margin-right: calc(13px + 26.5rem - 50vw);
1117 | max-width: none;
1118 | }
1119 | }
1120 | @media screen and (min-width: 78em) {
1121 | body:not(.toc-inline) .overlarge {
1122 | /* 30.5em body padding 50em content area */
1123 | margin-left: calc(40em - 50vw) !important;
1124 | margin-right: calc(40em - 50vw) !important;
1125 | }
1126 | }
1127 | @media screen and (min-width: 90em) {
1128 | body:not(.toc-inline) .overlarge {
1129 | /* 4em html margin 30.5em body padding 50em content area */
1130 | margin-left: 0 !important;
1131 | margin-right: calc(84.5em - 100vw) !important;
1132 | }
1133 | }
1134 |
1135 | @media not print {
1136 | .overlarge {
1137 | overflow-x: auto;
1138 | /* See Lea Verou's explanation background-attachment:
1139 | * http://lea.verou.me/2012/04/background-attachment-local/
1140 | *
1141 | background: top left / 4em 100% linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0)) local,
1142 | top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
1143 | top left / 1em 100% linear-gradient(to right, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
1144 | top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
1145 | white;
1146 | background-repeat: no-repeat;
1147 | */
1148 | }
1149 | }
1150 |
--------------------------------------------------------------------------------
4 |
5 | This is the source of the [WebVTT specification](https://w3c.github.io/webvtt/).
6 |
7 | Contributions can be made via the [W3C Text Tracks Community Group](http://www.w3.org/community/texttracks/).
8 |
9 | You can file new [issues](https://github.com/w3c/webvtt/issues) from the specification itself. There are also old bugs reported in [W3C BugZilla](https://www.w3.org/Bugs/Public/buglist.cgi?product=TextTracks%20CG&component=WebVTT&resolution=---).
10 |
11 | Generating the spec
12 | -------------------
13 |
14 | This spec is generated using [bikeshed](https://github.com/tabatkins/bikeshed/).
15 |
16 | To generate a CG draft, run:
17 |
18 | $ bikeshed spec
19 |
20 | To generate a WD snapshot, run e.g.:
21 |
22 | $ ./snapshot.sh WD 2016-01-01 2015-12-08
23 |
24 | Also see https://github.com/w3c/webvtt/commit/754f13e3cf03d6036c3e4628c6920d17b412f778 for manual fixup of the generated output.
25 |
26 | To format the index.bs file, run:
27 |
28 | $ ./format.py index.bs
29 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Web Media Text Tracks Community Group
2 |
3 | This repository is being used for work in the Web Media Text Tracks Community Group, governed by the [W3C Community License
4 | Agreement (CLA)](http://www.w3.org/community/about/agreements/cla/). To contribute, you must join
5 | the CG.
6 |
7 | If you are not the sole contributor to a contribution (pull request), please identify all
8 | contributors in the pull request's body or in subsequent comments.
9 |
10 | To add a contributor (other than yourself, that's automatic), mark them one per line as follows:
11 |
12 | ```
13 | +@github_username
14 | ```
15 |
16 | If you added a contributor by mistake, you can remove them in a comment with:
17 |
18 | ```
19 | -@github_username
20 | ```
21 |
22 | If you are making a pull request on behalf of someone else but you had no part in designing the
23 | feature, you can remove yourself with the above syntax.
24 |
25 | # Tests
26 |
27 | For normative changes, a corresponding
28 | [web-platform-tests](https://github.com/web-platform-tests/wpt) PR is highly appreciated. Typically,
29 | both PRs will be merged at the same time. Note that a test change that contradicts the spec should
30 | not be merged before the corresponding spec change. If testing is not practical, please explain why
31 | and if appropriate [file an issue](https://github.com/web-platform-tests/wpt/issues/new) to follow
32 | up later. Add the `type:untestable` or `type:missing-coverage` label as appropriate.
33 |
--------------------------------------------------------------------------------
/snapshot.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | # Generates a snapshot in archives/
3 |
4 | STATUS=$1
5 | NEW_DATE=$2
6 | PREV_URL=$(echo $3 | sed -e 's#/#\\/#g')
7 |
8 | USAGE="\n\nUsage: $0