| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <title>Reference for WebVTT rendering, ::cue(v), outline shorthand</title> | 2 <title>Reference for WebVTT rendering, ::cue(v), outline shorthand</title> |
| 3 <style> | 3 <style> |
| 4 html { overflow:hidden } | 4 html { overflow:hidden } |
| 5 body { margin:0 } | 5 body { margin:0 } |
| 6 .video { | 6 .video { |
| 7 display: inline-block; | 7 display: inline-block; |
| 8 width: 1280px; | 8 width: 320px; |
| 9 height: 720px; | 9 height: 180px; |
| 10 position: relative | 10 position: relative; |
| 11 font-size: 9px; |
| 11 } | 12 } |
| 12 .cue { | 13 .cue { |
| 13 position: absolute; | 14 position: absolute; |
| 14 bottom: 0; | 15 bottom: 0; |
| 15 left: 0; | 16 left: 0; |
| 16 right: 0; | 17 right: 0; |
| 17 text-align: center | 18 text-align: center |
| 18 } | 19 } |
| 19 .cue > span { | 20 .cue > span { |
| 20 font-family: sans-serif; | 21 font-family: sans-serif; |
| 21 background: rgba(0,0,0,0.8); | 22 background: rgba(0,0,0,0.8); |
| 22 font-size: 36px; | |
| 23 color: white; | 23 color: white; |
| 24 } | 24 } |
| 25 .cue > span > span { | 25 .cue > span > span { |
| 26 display: inline-block; | 26 display: inline-block; |
| 27 margin-left: -2px; | 27 margin-left: -2px; |
| 28 margin-right: -2px; | 28 margin-right: -2px; |
| 29 border: solid #00f 2px; | 29 border: solid #00f 2px; |
| 30 border-bottom: none; | 30 border-bottom: none; |
| 31 } | 31 } |
| 32 </style> | 32 </style> |
| 33 <div class="video"><span class="cue"><span>This is a <span>test subtitle</span><
/span></span></div> | 33 <div class="video"><span class="cue"><span>This is a <span>test subtitle</span><
/span></span></div> |
| OLD | NEW |