ruby-annotation-with-margin.html (1196B)
1 <!DOCTYPE html> 2 <title>Interlinear ruby annotation box with margin</title> 3 <link rel="match" href="ruby-annotation-with-margin-ref.html"> 4 <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#interlinear-layout"> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 6 <style> 7 body { 8 font-family: Ahem; 9 font-size: 10px; 10 } 11 12 ruby { 13 color: transparent; 14 } 15 16 rt { 17 color: green; 18 } 19 20 .under ruby { 21 ruby-position: under; 22 } 23 </style> 24 <div><ruby>base<rt style="margin: 10px;">annotation</rt></ruby></div> 25 <div><ruby>base<rt style="margin-top: 10px;">annotation</rt></ruby></div> 26 <div><ruby>base<rt style="margin-bottom: 10px;">annotation</rt></ruby></div> 27 28 <div class=under> 29 <div><ruby>base<rt style="margin: 10px;">annotation</rt></ruby></div> 30 <div><ruby>base<rt style="margin-top: 10px;">annotation</rt></ruby></div> 31 <div><ruby>base<rt style="margin-bottom: 10px;">annotation</rt></ruby></div> 32 </div> 33 34 <div style="writing-mode: vertical-lr"> 35 <div><ruby>base<rt style="margin: 10px;">annotation</rt></ruby></div> 36 <div><ruby>base<rt style="margin-top: 10px;">annotation</rt></ruby></div> 37 <div><ruby>base<rt style="margin-bottom: 10px;">annotation</rt></ruby></div> 38 </div>