vertical_lr-ref.html (755B)
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 text-align: center; 18 unicode-bidi: -webkit-plaintext; 19 unicode-bidi: plaintext; 20 direction: ltr; 21 writing-mode: vertical-lr; 22 -webkit-writing-mode: vertical-lr; 23 } 24 .cue > span { 25 font-family: sans-serif; 26 background: rgba(0,0,0,0.8); 27 color: white; 28 } 29 </style> 30 <div class="video"><span class="cue"><span><ruby>右<rt>みぎ</rt></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは...<br>二行目</span></span></div>