text-box-trim-initial-letter-start-001-ref.html (974B)
1 <!DOCTYPE html> 2 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 3 <style> 4 .spacer { 5 height: 50px; 6 background: lightgray; 7 } 8 .target { 9 font: 40px/1 Ahem; 10 position: relative; 11 } 12 .target::first-letter { 13 initial-letter: 2 1; 14 } 15 </style> 16 <div class="spacer"></div> 17 <div class="target">ApÉx</div> 18 <script> 19 // The font size of raised initial letters is undefined[1]. 20 // Implementations, especially when using Ahem as a web font, don't match. 21 // To test the `text-box-trim` behavior by ignoring such differences, compute 22 // the expected position of the `target` dynamically. 23 // [1] https://drafts.csswg.org/css-inline-3/#sizing-initial-letter 24 const spacer = document.getElementsByClassName('spacer')[0]; 25 const target = document.getElementsByClassName('target')[0]; 26 const spacer_bottom = spacer.getBoundingClientRect().bottom; 27 const target_bottom = target.getBoundingClientRect().bottom; 28 target.style.top = `${spacer_bottom - target_bottom + 40}px`; 29 </script>