text-spacing-trim-span-001.html (1521B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property"> 4 <link rel="match" href="text-spacing-trim-span-001-ref.html"> 5 <meta name="variant" content="?class=halt,htb"> 6 <meta name="variant" content="?class=chws,htb"> 7 <meta name="variant" content="?class=halt,vrl"> 8 <meta name="variant" content="?class=chws,vrl"> 9 <meta name="variant" content="?class=space-first,halt,htb"> 10 <meta name="variant" content="?class=space-first,chws,htb"> 11 <meta name="variant" content="?class=space-first,halt,vrl"> 12 <meta name="variant" content="?class=space-first,chws,vrl"> 13 <meta name="variant" content="?class=trim-start,halt,htb"> 14 <meta name="variant" content="?class=trim-start,chws,htb"> 15 <meta name="variant" content="?class=trim-start,halt,vrl"> 16 <meta name="variant" content="?class=trim-start,chws,vrl"> 17 <script src="support/variant-class.js"></script> 18 <style> 19 @font-face { 20 font-family: halt-font; 21 src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf'); 22 } 23 @font-face { 24 font-family: chws-font; 25 src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf'); 26 } 27 #container { 28 font-family: halt-font; 29 font-size: 20px; 30 inline-size: 4em; 31 } 32 .chws #container { 33 font-family: chws-font; 34 } 35 .vrl { 36 writing-mode: vertical-rl; 37 } 38 .trim-start { 39 text-spacing-trim: trim-start; 40 } 41 .space-first { 42 text-spacing-trim: space-first; 43 } 44 </style> 45 <div id="container"> 46 <div>国）<span>（国</span></div> 47 <div>国国国）<span>（国</span></div> 48 </div>