Yu Gothic UIに text-spacing-trim を適用するとバグる
いなにわうどん以下のツイートを見て、自分の環境でも再現したので気になって調べてみた。
現象
text-spacing-trim プロパティを Yu Gothic UI のテキストに適用すると、一部の括弧類が重なってしまう。これは値に space-all を設定すると解消される。
gushwell情報、ありがとうございます。同じ現象で悩んでいました。
いなにわうどんhalt と hmtx を見る
Windows に標準搭載される Yu Gothic UI や游ゴシックには、GPOS テーブルに halt 機能タグが含まれている。
halt 機能タグの正式名称は「字幅半角メトリクス」であり、全角の約物を半角として扱う際などに位置を補正する役割を持つ。text-spacing-trim プロパティの実装においても、この halt の値を見て文字詰めを決定している。
TTX（fontTools が提供する解析ツール）を用いて、Yu Gothic UI／游ゴシック の halt と hmtx（水平方向のレイアウト情報）を値をダンプしてみる。
ttx -t GPOS YuGothicUI-Regular.ttf
ttx -t GPOS YuGothic-Medium.ttf
ttx -t hmtx YuGothicUI-Regular.ttf
ttx -t hmtx YuGothic-Medium.ttf
結果は以下の通り。width はグリフの幅を、lsb は left side bearing（原点からグリフの左端までの距離）を表している。このあたりの説明は hhea, hmtx テーブル に詳しい記載がある。
Yu Gothic UI
| 文字 | Unicode | GlyphName | XAdvance | width | lsb | 重なるか |
|---|---|---|---|---|---|---|
| 」 | u+300d | uni300d | -1024 | 1024 | 72 | o |
| 』 | u+300f | uni300f | -1024 | 1024 | 68 | o |
| 】 | u+3011 | uni3011 | -1024 | 1024 | 57 | o |
| 〉 | u+3009 | angleright | -1024 | 1024 | 61 | o |
| ） | u+ff09 | uniff09 | -1024 | 2048 | 92 | x |
| ］ | u+ff3d | uniff3d | -1024 | 2048 | 103 | x |
游ゴシック
| 文字 | Unicode | GlyphName | XAdvance | width | lsb | 重なるか |
|---|---|---|---|---|---|---|
| 」 | u+300d | uni300d | -1024 | 2048 | 102 | x |
| 』 | u+300f | uni300f | -1024 | 2048 | 92 | x |
| 】 | u+3011 | uni3011 | -1024 | 2048 | 88 | x |
| 〉 | u+3009 | angleright | -1024 | 2048 | 92 | x |
| ） | u+ff09 | uniff09 | -1024 | 2048 | 103 | x |
| ］ | u+ff3d | uniff3d | -1024 | 2048 | 103 | x |
結果を見ると、以下のことが解る。
- Yu Gothic UI と游ゴシックで、XAdvance は完全一致（この他に xPlacement の値も一致）
- Yu Gothic UI の一部グリフでは、width が游ゴシック（2048）の半分（1024）に設定されている
- これらのグリフは、text-spacing-trim を設定した際に重なったグリフと一致
いなにわうどん考察
Yu Gothic UI はUI 用フォントであることから鍵括弧等を半角に設定したものの、halt 機能タグの情報は游ゴシックからコピってきた *1 ため、今回のような現象が起こったのではないか？と推測。
なお、font-feature-settings: "halt" を設定した場合（下図）も同様に表示がバグっているため、これが原因とみて間違いなさそう。
*1 そもそも、Yu Gothic UI と游ゴシックは同一のフォントファイル（ttc）であり、一部のテーブルを共有している