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