text-spacing-trim-dot-001.html (2158B)
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-dot-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 <script src="support/variant-class.js"></script> 10 <style> 11 @font-face { 12 font-family: halt-font; 13 src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf'); 14 } 15 @font-face { 16 font-family: chws-font; 17 src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf'); 18 } 19 #container { 20 font-family: halt-font; 21 font-size: 20px; 22 position: relative; 23 } 24 .chws #container { 25 font-family: chws-font; 26 } 27 #container > div { 28 position: absolute; 29 } 30 :root:not(.vrl) .col1 { 31 left: 6em; 32 } 33 :root:not(.vrl) .col2 { 34 left: 12em; 35 } 36 :root.vrl { 37 writing-mode: vertical-rl; 38 } 39 :root.vrl .col1 { 40 top: 6em; 41 } 42 :root.vrl div.col2 { 43 top: 12em; 44 } 45 </style> 46 <div id="container"> 47 <div lang="ja"> 48 <!-- Dot + Open/Close/Middle --> 49 <div>国。（国</div> 50 <div>国。）国</div> 51 <div>国。・国</div> 52 <div>国。 国</div> 53 <!-- Open/Close/Middle + Dot --> 54 <div>国（。国</div> 55 <div>国）。国</div> 56 <div>国・。国</div> 57 <div>国 。国</div> 58 </div> 59 60 <!-- The same content with "zh-hans". --> 61 <div lang="zh-hans" class="col1"> 62 <!-- Dot + Open/Close/Middle --> 63 <div>国。（国</div> 64 <div>国。）国</div> 65 <div>国。・国</div> 66 <div>国。 国</div> 67 <!-- Open/Close/Middle + Dot --> 68 <div>国（。国</div> 69 <div>国）。国</div> 70 <div>国・。国</div> 71 <div>国 。国</div> 72 </div> 73 74 <!-- The same content with "zh-hant". --> 75 <div lang="zh-hant" class="col2"> 76 <!-- Dot + Open/Close/Middle --> 77 <div>国。（国</div> 78 <div>国。）国</div> 79 <div>国。・国</div> 80 <div>国。 国</div> 81 <!-- Open/Close/Middle + Dot --> 82 <div>国（。国</div> 83 <div>国）。国</div> 84 <div>国・。国</div> 85 <div>国 。国</div> 86 </div> 87 </div>