ruby-intrinsic-isize-003-ref.html (1471B)
1 <!DOCTYPE html> 2 <html lang="ja"> 3 <meta charset="utf-8"> 4 <title>Intrinsic ISize calculation of ruby</title> 5 <link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> 6 <style> 7 .ruby { 8 border-left: 5px solid blue; 9 border-right: 10px solid blue; 10 padding: 0 20px 0 10px; 11 margin: 0 10px 0 20px; 12 } 13 div { 14 display: inline-block; 15 border: 1px solid black; 16 font-kerning: none; /* disable kerning, because in the reference file 17 it might occur across <span> boundaries */ 18 } 19 .ruby > span { 20 white-space: nowrap; 21 } 22 </style> 23 24 <div style="width: min-content"> 25 <span class="ruby"><span>ABC</span><span>DEF</span></span> 26 </div> 27 <div style="width: max-content"> 28 <span class="ruby"><span>ABC</span><span>DEF</span></span> 29 </div> 30 <br> 31 32 <div style="width: min-content"> 33 XYZ<span class="ruby"><span>ABC</span><span>DEF</span></span>XYZ 34 </div> 35 <div style="width: max-content"> 36 XYZ<span class="ruby"><span>ABC</span><span>DEF</span></span>XYZ 37 </div> 38 <br> 39 40 <div style="width: min-content"> 41 <span class="ruby"><span>あい</span><span>うえ</span></span> 42 </div> 43 <div style="width: max-content"> 44 <span class="ruby"><span>あい</span><span>うえ</span></span> 45 </div> 46 <br> 47 48 <div style="width: min-content"> 49 お<span class="ruby"><span>あい</span><span>うえ</span></span>お 50 </div> 51 <div style="width: max-content"> 52 お<span class="ruby"><span>あい</span><span>うえ</span></span>お 53 </div> 54 <br>