portrait-ref.tentative.html (763B)
1 <!DOCTYPE html> 2 <title>Reference for WebVTT rendering, portrait video</title> 3 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 4 <style> 5 html { overflow:hidden } 6 body { margin:0 } 7 .video { 8 display: inline-block; 9 width: 180px; 10 height: 320px; 11 position: relative; 12 /* Tentative: https://github.com/w3c/webvtt/issues/529 proposes to make 13 this 9px as based on 5vmin insteaed of 16px if it was based on 5vh. */ 14 font-size: 9px; 15 } 16 .cue { 17 position: absolute; 18 bottom: 0; 19 left: 0; 20 right: 0; 21 text-align: center 22 } 23 .cue > span { 24 font-family: Ahem, sans-serif; 25 background: rgba(0,0,0,0.8); 26 color: green; 27 } 28 </style> 29 <div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>