basic.html (792B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-ruby/#break-within"> 3 <link rel="match" href="basic-ref.html"> 4 <link rel="stylesheet" href="/fonts/ahem.css"> 5 <style> 6 body { 7 font: 50px/1 Ahem; 8 } 9 span { 10 text-wrap: nowrap; 11 } 12 p { 13 word-break: break-all; 14 inline-size: calc(6em + 5px); 15 } 16 .mc { 17 columns: 2 calc(6em + 5px); 18 column-gap: 10px; 19 inline-size: calc(12em + 10px + 10px); 20 block-size: 80px; 21 } 22 .indent { 23 text-indent: -1em; 24 } 25 </style> 26 <p>zzz<ruby><span>mmm</span><span>mm</span><rt><span>mmmmmm</span><span>mmmm</span></ruby>zzz 27 </p> 28 29 <p class="mc">zzz<ruby><span>mmm</span><span>mm</span><rt><span>mmmmmm</span><span>mmmm</span></ruby>zzz 30 </p> 31 32 <!-- The first line should contain 7 letters. --> 33 <p class="indent">zzz<ruby>mmmmm<rt>mmmmmmmmmm</ruby>zzz 34 </p>