text-spacing-trim-colon-001-ref.html (3444B)
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 novhal halt { 37 font-feature-settings: 'halt' 1; 38 } 39 </style> 40 <div id="container"> 41 <div lang="ja"> 42 <!-- In Adobe's convention, colon rotates, while semicolon is upright. --> 43 <!-- In this case, colon can be either middle or other. --> 44 <!-- Colon + Open/Close/Middle --> 45 <div>国：<halt>（</halt>国</div> 46 <div>国：）国</div> 47 <div>国：・国</div> 48 <div>国： 国</div> 49 <!-- Open/Close/Middle + Colon --> 50 <div>国（：国</div> 51 <div>国<halt>）</halt>：国</div> 52 <div>国・：国</div> 53 <div>国 ：国</div> 54 <novhal> 55 <!-- Semicolon + Open/Close/Middle --> 56 <div>国；<halt>（</halt>国</div> 57 <div>国；）国</div> 58 <div>国；・国</div> 59 <div>国； 国</div> 60 <!-- Open/Close/Middle + Semicolon --> 61 <div>国（；国</div> 62 <div>国<halt>）</halt>；国</div> 63 <div>国・；国</div> 64 <div>国 ；国</div> 65 </novhal> 66 </div> 67 68 <!-- The same content with "zh-hans". --> 69 <div lang="zh-hans" class="col1"> 70 <!-- In Adobe's convention, both colon and semicolon are upright. --> 71 <novhal> 72 <!-- Colon + Open/Close/Middle --> 73 <div>国：<halt>（</halt>国</div> 74 <div>国<halt>：</halt>）国</div> 75 <div>国<halt>：</halt>・国</div> 76 <div>国<halt>：</halt> 国</div> 77 <!-- Open/Close/Middle + Colon --> 78 <div>国（：国</div> 79 <div>国<halt>）</halt>：国</div> 80 <div>国・：国</div> 81 <div>国 ：国</div> 82 <!-- Semicolon + Open/Close/Middle --> 83 <div>国；<halt>（</halt>国</div> 84 <div>国<halt>；</halt>）国</div> 85 <div>国<halt>；</halt>・国</div> 86 <div>国<halt>；</halt> 国</div> 87 <!-- Open/Close/Middle + Semicolon --> 88 <div>国（；国</div> 89 <div>国<halt>）</halt>；国</div> 90 <div>国・；国</div> 91 <div>国 ；国</div> 92 </novhal> 93 </div> 94 95 <!-- The same content with "zh-hant". --> 96 <div lang="zh-hant" class="col2"> 97 <!-- In Adobe's convention, both colon and semicolon are upright. --> 98 <novhal> 99 <!-- Colon + Open/Close/Middle --> 100 <div>国：<halt>（</halt>国</div> 101 <div>国：）国</div> 102 <div>国：・国</div> 103 <div>国： 国</div> 104 <!-- Open/Close/Middle + Colon --> 105 <div>国（：国</div> 106 <div>国<halt>）</halt>：国</div> 107 <div>国・：国</div> 108 <div>国 ：国</div> 109 <!-- Semicolon + Open/Close/Middle --> 110 <div>国；<halt>（</halt>国</div> 111 <div>国；）国</div> 112 <div>国；・国</div> 113 <div>国； 国</div> 114 <!-- Open/Close/Middle + Semicolon --> 115 <div>国（；国</div> 116 <div>国<halt>）</halt>；国</div> 117 <div>国・；国</div> 118 <div>国 ；国</div> 119 </novhal> 120 </div> 121 </div>