Closed1ヶ月前にクローズ4

Yu Gothic UIに text-spacing-trim を適用するとバグる

CSS

フォント

いなにわうどん 1ヶ月前に更新

以下のツイートを見て、自分の環境でも再現したので気になって調べてみた。

現象

text-spacing-trim プロパティを Yu Gothic UI のテキストに適用すると、一部の括弧類が重なってしまう。これは値に space-all を設定すると解消される。

gushwell 18日前

情報、ありがとうございます。同じ現象で悩んでいました。

いなにわうどん 1ヶ月前に更新

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 を設定した際に重なったグリフと一致

いなにわうどん 1ヶ月前に更新

考察

Yu Gothic UI はUI 用フォントであることから鍵括弧等を半角に設定したものの、halt 機能タグの情報は游ゴシックからコピってきた *1 ため、今回のような現象が起こったのではないか？と推測。

なお、font-feature-settings: "halt" を設定した場合（下図）も同様に表示がバグっているため、これが原因とみて間違いなさそう。

*1 そもそも、Yu Gothic UI と游ゴシックは同一のフォントファイル（ttc）であり、一部のテーブルを共有している

このスクラップは1ヶ月前にクローズされました