vertical_rl-ref.html (751B)
1 <!DOCTYPE html> 2 <title>Reference for WebVTT rendering, bidi ruby</title> 3 <meta charset="UTF-8"> 4 <style> 5 html { overflow:hidden } 6 body { margin:0 } 7 .video { 8 display: inline-block; 9 width: 320px; 10 height: 180px; 11 position: relative; 12 font-size: 9px; 13 } 14 .cue { 15 position: absolute; 16 bottom: 0; 17 right: 0; 18 text-align: center; 19 unicode-bidi: -webkit-plaintext; 20 unicode-bidi: plaintext; 21 direction: ltr; 22 writing-mode: vertical-rl; 23 -webkit-writing-mode: vertical-rl; 24 } 25 .cue > span { 26 font-family: sans-serif; 27 background: rgba(0,0,0,0.8); 28 color: white; 29 } 30 </style> 31 <div class="video"><span class="cue"><span><ruby></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは...<br>二行目</span></span></div>