text-box-trim-start-001-ref.html (819B)
1 <!DOCTYPE html> 2 <script src="support/variant-class.js"></script> 3 <style> 4 @import "support/MetricsTestFont.css"; 5 6 .spacer { 7 background: lightgray; 8 block-size: 100px; 9 } 10 .target { 11 font: 100px/2 MetricsTestFont; 12 } 13 .offset { 14 position: relative; 15 } 16 .vrl { writing-mode: vertical-rl; } 17 .vlr { writing-mode: vertical-lr; } 18 .auto .target, .text .target { line-height: 150px; } 19 .auto .offset, .text .offset { inset-block-start: -25px; } 20 .cap .target { line-height: 130px; } 21 .cap .offset { inset-block-start: -35px; } 22 .ex .target { line-height: 90px; } 23 .ex .offset { inset-block-start: -55px; } 24 .vlr.alphabetic .target { line-height: 130px; } 25 .vlr.alphabetic .offset { inset-block-start: -35px;} 26 </style> 27 <div class="spacer"></div> 28 <div class="target"> 29 <span class="offset">ApÉx</span> 30 </div> 31 <div class="spacer"></div>