| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <title>Reference for WebVTT rendering, repositioning of 9 cues that overlap comp
letely</title> | 2 <title>Reference for WebVTT rendering, repositioning of 9 cues that overlap comp
letely</title> |
| 3 <style> | 3 <style> |
| 4 .video { | 4 .video { |
| 5 display: inline-block; | 5 display: inline-block; |
| 6 width: 720px; | 6 width: 180px; |
| 7 height: 720px; | 7 height: 180px; |
| 8 outline: solid; | 8 outline: solid; |
| 9 position: relative | 9 position: relative; |
| 10 font-size: 9px |
| 10 } | 11 } |
| 11 #cue1 { | 12 #cue1 { |
| 12 position: absolute; | 13 position: absolute; |
| 13 top: 50%; | 14 top: 50%; |
| 14 left: 50%; | 15 left: 50%; |
| 15 right: 0; | 16 right: 0; |
| 16 margin-top: -18px; | 17 margin-top: -4.5px; |
| 17 margin-left: -18px; | 18 margin-left: -4.5px; |
| 18 color: #000 | 19 color: #000 |
| 19 } | 20 } |
| 20 #cue2 { | 21 #cue2 { |
| 21 position: absolute; | 22 position: absolute; |
| 22 top: 50%; | 23 top: 50%; |
| 23 left: 50%; | 24 left: 50%; |
| 24 right: 0; | 25 right: 0; |
| 25 margin-top: -54px; | 26 margin-top: -13.5px; |
| 26 margin-left: -18px; | 27 margin-left: -4.5px; |
| 27 color: #222 | 28 color: #222 |
| 28 } | 29 } |
| 29 #cue3 { | 30 #cue3 { |
| 30 position: absolute; | 31 position: absolute; |
| 31 top: 50%; | 32 top: 50%; |
| 32 left: 50%; | 33 left: 50%; |
| 33 right: 0; | 34 right: 0; |
| 34 margin-top: -18px; | 35 margin-top: -4.5px; |
| 35 margin-left: -54px; | 36 margin-left: -13.5px; |
| 36 color: #444 | 37 color: #444 |
| 37 } | 38 } |
| 38 #cue4 { | 39 #cue4 { |
| 39 position: absolute; | 40 position: absolute; |
| 40 top: 50%; | 41 top: 50%; |
| 41 left: 50%; | 42 left: 50%; |
| 42 right: 0; | 43 right: 0; |
| 43 margin-top: -18px; | 44 margin-top: -4.5px; |
| 44 margin-left: 18px; | 45 margin-left: 4.5px; |
| 45 color: #666 | 46 color: #666 |
| 46 } | 47 } |
| 47 #cue5 { | 48 #cue5 { |
| 48 position: absolute; | 49 position: absolute; |
| 49 top: 50%; | 50 top: 50%; |
| 50 left: 50%; | 51 left: 50%; |
| 51 right: 0; | 52 right: 0; |
| 52 margin-top: 18px; | 53 margin-top: 4.5px; |
| 53 margin-left: -18px; | 54 margin-left: -4.5px; |
| 54 color: #888 | 55 color: #888 |
| 55 } | 56 } |
| 56 #cue6 { | 57 #cue6 { |
| 57 position: absolute; | 58 position: absolute; |
| 58 top: 50%; | 59 top: 50%; |
| 59 left: 50%; | 60 left: 50%; |
| 60 right: 0; | 61 right: 0; |
| 61 margin-top: -54px; | 62 margin-top: -13.5px; |
| 62 margin-left: -54px; | 63 margin-left: -13.5px; |
| 63 color: #aaa | 64 color: #aaa |
| 64 } | 65 } |
| 65 #cue7 { | 66 #cue7 { |
| 66 position: absolute; | 67 position: absolute; |
| 67 top: 50%; | 68 top: 50%; |
| 68 left: 50%; | 69 left: 50%; |
| 69 right: 0; | 70 right: 0; |
| 70 margin-top: -54px; | 71 margin-top: -13.5px; |
| 71 margin-left: 18px; | 72 margin-left: 4.5px; |
| 72 color: #ccc | 73 color: #ccc |
| 73 } | 74 } |
| 74 #cue8 { | 75 #cue8 { |
| 75 position: absolute; | 76 position: absolute; |
| 76 top: 50%; | 77 top: 50%; |
| 77 left: 50%; | 78 left: 50%; |
| 78 right: 0; | 79 right: 0; |
| 79 margin-top: 18px; | 80 margin-top: 4.5px; |
| 80 margin-left: -54px; | 81 margin-left: -13.5px; |
| 81 color: #eee | 82 color: #eee |
| 82 } | 83 } |
| 83 #cue9 { | 84 #cue9 { |
| 84 position: absolute; | 85 position: absolute; |
| 85 top: 50%; | 86 top: 50%; |
| 86 left: 50%; | 87 left: 50%; |
| 87 right: 0; | 88 right: 0; |
| 88 margin-top: 18px; | 89 margin-top: 4.5px; |
| 89 margin-left: 18px; | 90 margin-left: 4.5px; |
| 90 color: green | 91 color: green |
| 91 } | 92 } |
| 92 .cue { | 93 .cue { |
| 93 width: 36px; | 94 width: 9px; |
| 94 text-align: center | 95 text-align: center |
| 95 } | 96 } |
| 96 .cue > span { | 97 .cue > span { |
| 97 font-family: Ahem, sans-serif; | 98 font-family: Ahem, sans-serif; |
| 98 background: rgba(0,0,0,0.8); | 99 background: rgba(0,0,0,0.8); |
| 99 font-size: 36px; | |
| 100 } | 100 } |
| 101 </style> | 101 </style> |
| 102 <div class="video"> | 102 <div class="video"> |
| 103 <span class="cue" id="cue1"><span>1</span></span> | 103 <span class="cue" id="cue1"><span>1</span></span> |
| 104 <span class="cue" id="cue2"><span>2</span></span> | 104 <span class="cue" id="cue2"><span>2</span></span> |
| 105 <span class="cue" id="cue3"><span>3</span></span> | 105 <span class="cue" id="cue3"><span>3</span></span> |
| 106 <span class="cue" id="cue4"><span>4</span></span> | 106 <span class="cue" id="cue4"><span>4</span></span> |
| 107 <span class="cue" id="cue5"><span>5</span></span> | 107 <span class="cue" id="cue5"><span>5</span></span> |
| 108 <span class="cue" id="cue6"><span>6</span></span> | 108 <span class="cue" id="cue6"><span>6</span></span> |
| 109 <span class="cue" id="cue7"><span>7</span></span> | 109 <span class="cue" id="cue7"><span>7</span></span> |
| 110 <span class="cue" id="cue8"><span>8</span></span> | 110 <span class="cue" id="cue8"><span>8</span></span> |
| 111 <span class="cue" id="cue9"><span>9</span></span> | 111 <span class="cue" id="cue9"><span>9</span></span> |
| 112 </div> | 112 </div> |
| OLD | NEW |