text-spacing-trim-colon-001.html (3102B)
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-colon-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 <!-- Colon + Open/Close/Middle --> 49 <div>国：（国</div> 50 <div>国：）国</div> 51 <div>国：・国</div> 52 <div>国： 国</div> 53 <!-- Open/Close/Middle + Colon --> 54 <div>国（：国</div> 55 <div>国）：国</div> 56 <div>国・：国</div> 57 <div>国 ：国</div> 58 <!-- Semicolon + Open/Close/Middle --> 59 <div>国；（国</div> 60 <div>国；）国</div> 61 <div>国；・国</div> 62 <div>国； 国</div> 63 <!-- Open/Close/Middle + Semicolon --> 64 <div>国（；国</div> 65 <div>国）；国</div> 66 <div>国・；国</div> 67 <div>国 ；国</div> 68 </div> 69 70 <!-- The same content with "zh-hans". --> 71 <div lang="zh-hans" class="col1"> 72 <!-- Colon + Open/Close/Middle --> 73 <div>国：（国</div> 74 <div>国：）国</div> 75 <div>国：・国</div> 76 <div>国： 国</div> 77 <!-- Open/Close/Middle + Colon --> 78 <div>国（：国</div> 79 <div>国）：国</div> 80 <div>国・：国</div> 81 <div>国 ：国</div> 82 <!-- Semicolon + Open/Close/Middle --> 83 <div>国；（国</div> 84 <div>国；）国</div> 85 <div>国；・国</div> 86 <div>国； 国</div> 87 <!-- Open/Close/Middle + Semicolon --> 88 <div>国（；国</div> 89 <div>国）；国</div> 90 <div>国・；国</div> 91 <div>国 ；国</div> 92 </div> 93 94 <!-- The same content with "zh-hant". --> 95 <div lang="zh-hant" class="col2"> 96 <!-- Colon + Open/Close/Middle --> 97 <div>国：（国</div> 98 <div>国：）国</div> 99 <div>国：・国</div> 100 <div>国： 国</div> 101 <!-- Open/Close/Middle + Colon --> 102 <div>国（：国</div> 103 <div>国）：国</div> 104 <div>国・：国</div> 105 <div>国 ：国</div> 106 <!-- Semicolon + Open/Close/Middle --> 107 <div>国；（国</div> 108 <div>国；）国</div> 109 <div>国；・国</div> 110 <div>国； 国</div> 111 <!-- Open/Close/Middle + Semicolon --> 112 <div>国（；国</div> 113 <div>国）；国</div> 114 <div>国・；国</div> 115 <div>国 ；国</div> 116 </div> 117 </div>