ruby-intrinsic-isize-003.html (1310B)
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 <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#line-breaks"> 7 <link rel="match" href="ruby-intrinsic-isize-003-ref.html"> 8 <style> 9 ruby { 10 border-left: 5px solid blue; 11 border-right: 10px solid blue; 12 padding: 0 20px 0 10px; 13 margin: 0 10px 0 20px; 14 } 15 div { 16 display: inline-block; 17 border: 1px solid black; 18 font-kerning: none; /* disable kerning, because in the reference file 19 it might occur across <span> boundaries */ 20 } 21 </style> 22 23 <div style="width: min-content"> 24 <ruby><rb>ABC<rb>DEF</ruby> 25 </div> 26 <div style="width: max-content"> 27 <ruby><rb>ABC<rb>DEF</ruby> 28 </div> 29 <br> 30 31 <div style="width: min-content"> 32 XYZ<ruby><rb>ABC<rb>DEF</ruby>XYZ 33 </div> 34 <div style="width: max-content"> 35 XYZ<ruby><rb>ABC<rb>DEF</ruby>XYZ 36 </div> 37 <br> 38 39 <div style="width: min-content"> 40 <ruby><rb>あい<rb>うえ</ruby> 41 </div> 42 <div style="width: max-content"> 43 <ruby><rb>あい<rb>うえ</ruby> 44 </div> 45 <br> 46 47 <div style="width: min-content"> 48 お<ruby><rb>あい<rb>うえ</ruby>お 49 </div> 50 <div style="width: max-content"> 51 お<ruby><rb>あい<rb>うえ</ruby>お 52 </div> 53 <br>