initial-letter-raise-initial-ref.html (1300B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Tests initial letter raise initial</title> 4 <link rel="author" title="Google LLC" href="https://www.google.com/"> 5 <link rel="help" href="https://drafts.csswg.org/css-inline/#raise-initial"> 6 <meta name="flags" content="ahem"> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > 8 <script src="resources/initial-letter-variants.js"></script> 9 <style> 10 .sample { 11 border: solid 1px green; 12 font-family: Ahem; 13 font-size: 20px; 14 line-height: 24px; 15 width: 230px; 16 } 17 18 .fake-initial-letter { 19 background: lime; 20 float: left; 21 --cap: 0.8; 22 --size: calc((24px * 2 + 20px * var(--cap)) / var(--cap)); 23 height: var(--size); 24 width: var(--size); 25 margin-top: 2px; 26 } 27 28 .no-ascent .fake-initial-letter { 29 height: calc(var(--size) * (1 - var(--cap))); 30 margin-top: calc(var(--size) * var(--cap) + 2px); 31 } 32 .no-descent .fake-initial-letter { 33 height: calc(var(--size) * var(--cap)); 34 } 35 .rtl { 36 direction: rtl; 37 .fake-initial-letter { 38 float: right; 39 } 40 } 41 </style> 42 </head> 43 <body> 44 <div class="sample"> 45 <div class="fake-initial-letter"></div><br><br> 46 bc<br>def<br>ghi<br>jkl<br>mno<br> 47 </div>