| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property"> |
| <link rel="match" href="text-spacing-trim-colon-001-ref.html"> |
| <style> |
| @font-face { |
| font-family: halt-font; |
| src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf'); |
| } |
| #container { |
| font-family: halt-font; |
| font-size: 20px; |
| position: relative; |
| } |
| #container > div { |
| position: absolute; |
| top: 0; |
| } |
| .col1 { |
| left: 6em; |
| } |
| .col2 { |
| left: 12em; |
| } |
| </style> |
| <div id="container"> |
| <div lang="ja"> |
| <!-- Colon + Open/Close/Middle --> |
| <div>国：（国</div> |
| <div>国：）国</div> |
| <div>国：・国</div> |
| <div>国： 国</div> |
| <!-- Open/Close/Middle + Colon --> |
| <div>国（：国</div> |
| <div>国）：国</div> |
| <div>国・：国</div> |
| <div>国 ：国</div> |
| </div> |
| |
| <!-- The same content with "zh-hans". --> |
| <div lang="zh-hans" class="col1"> |
| <!-- Colon + Open/Close/Middle --> |
| <div>国：（国</div> |
| <div>国：）国</div> |
| <div>国：・国</div> |
| <div>国： 国</div> |
| <!-- Open/Close/Middle + Colon --> |
| <div>国（：国</div> |
| <div>国）：国</div> |
| <div>国・：国</div> |
| <div>国 ：国</div> |
| </div> |
| |
| <!-- The same content with "zh-hant". --> |
| <div lang="zh-hant" class="col2"> |
| <!-- Colon + Open/Close/Middle --> |
| <div>国：（国</div> |
| <div>国：）国</div> |
| <div>国：・国</div> |
| <div>国： 国</div> |
| <!-- Open/Close/Middle + Colon --> |
| <div>国（：国</div> |
| <div>国）：国</div> |
| <div>国・：国</div> |
| <div>国 ：国</div> |
| </div> |
| </div> |
