OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>Reference for WebVTT rendering, size:50%, cue too long - should be cut</t
itle> | 2 <title>Reference for WebVTT rendering, size:50%, cue too long - should be cut</t
itle> |
| 3 <script src="../../../../../../../resources/ahem.js"></script> |
3 <style> | 4 <style> |
4 html { overflow:hidden } | 5 html { overflow:hidden } |
5 body { margin:0 } | 6 body { margin:0 } |
6 .video { | 7 .video { |
7 display: inline-block; | 8 display: inline-block; |
8 width: 1280px; | 9 width: 1280px; |
9 height: 720px; | 10 height: 720px; |
10 position: relative | 11 position: relative |
11 } | 12 } |
12 .cue { | 13 .cue { |
13 position: absolute; | 14 position: absolute; |
14 bottom: 0; | 15 bottom: 0; |
15 left: 25%; | 16 left: 25%; |
16 right: 0; | 17 right: 0; |
17 width: 50%; | 18 width: 50%; |
18 text-align: center | 19 text-align: center |
19 } | 20 } |
20 .cue > span { | 21 .cue > span { |
21 font-family: Ahem, sans-serif; | 22 font-family: Ahem, sans-serif; |
22 background: rgba(0,0,0,0.8); | 23 background: rgba(0,0,0,0.8); |
23 color: green; | 24 color: green; |
24 font-size: 36px; | 25 font-size: 36px; |
25 } | 26 } |
26 </style> | 27 </style> |
27 <div class="video"><span class="cue"><span>This is a test subtitle that should w
rap several times and become so long that the cue must be cut when displayed, be
cause it does not fit on the screen. This is a test subtitle that should wrap se
veral times and become so long that the cue must be cut when displayed, because
it does not fit on the</span></span></div> | 28 <div class="video"><span class="cue"><span>This is a test subtitle that should w
rap several times and become so long that the cue must be cut when displayed, be
cause it does not fit on the screen. This is a test subtitle that should wrap se
veral times and become so long that the cue must be cut when displayed, because
it does not fit on the</span></span></div> |
OLD | NEW |