「Yu Gothic UI」フォントの鍵括弧、繋げるとブラウザ表示で重なる問題を調べてみた

Yu Gothic UIに text-spacing-trim を適用するとバグる を読んでいて、気になってしまったので、実際にYu Gothic UIのファイルの中身を開いて調べてみました。

発生している問題

Yu Gothic UIは、Windows 10からプリインストールされているUI表示用フォントです。

手元の環境で確認したところ、Windows 11 23H2 (ビルド 22631.4317) 時点では、「Yu Gothic UI Version 1.93」がインストールされていました。

このフォントをChrome系ブラウザで利用すると、鍵括弧表示が崩れる場合があります。具体的には、 「abc」「abc」 のように、閉じ括弧・開き括弧が隣接するケースです。 」「 の部分ですね。この際に、閉じ括弧と開き括弧の表示が重なってしまいます。

閉じと開きの鍵括弧が重なる

最近ではWindows版Teamsクライアントでも同様の表示になっており、なんだかなぁって思っています。

回避策

Yu Gothic UIが使われているWebサイトでこのような問題が起きて困っている方は、 Stylus で text-spacing-trim: space-all; を指定すると良いです。※Stylusの使い方は割愛

Teamsクライアントのように内部的にWebアプリを利用しているタイプのツールでは、残念ながら回避策がありません…。

原因

HTMLを書いたことのある方はご存知かと思いますが、ブラウザで表示する場合にはデフォルトでいくつかのCSSが適用されます。例えば <h1>見出し</h1> などと書くと、文字サイズが大きいスタイルが適用される、とかですね。

このデフォルトCSSの内、 text-spacing-trim プロパティの挙動とYu Gothic UIの相性の悪さによって前述の問題が起きるようです。

text-spacing-trim - MDN によると、このプロパティは中国語/日本語/韓国語 (CJK) における文章識別の改善を目的としたものだそうです。挙動としては、 「」（）【】、。 など、約物といわれる記号類の表示位置、表示幅をいい感じに調整することで見やすくする、といったものです。

ブラウザデフォルト値として normal が設定されるようですが、このデフォルト値の時点で表示位置・幅が変わるようですね。 normal では、 」「 のように連なった場合の2文字目 (この場合は 「) の表示位置・幅を変化させる、といった挙動になります。

ここで text-spacing-trim: normal; の時、どのように文字幅が変わるのか詳しく見てみましょう。

下図は、Yu Gothic UIの元になっている「游ゴシック」を使い、 text-spacing-trim のプロパティ値を変えて表示の比較をしたものです。括弧の部分に背景色のCSSを適用し、幅がどのように扱われているかを可視化しています。隣接している 「 ã‚„ （ の幅が狭くなっているのが見て取れます。

text-spacing-trim 表示比較

ちなみに前述のページによると、 text-spacing-trim はChromeでバージョン123から対応、Firefoxでは現在未対応のようです (2024/10/12 時点。同時点でChromeの最新バージョンは129)。割と導入されてから新しいプロパティであり、かつ前述の通りデフォルト値 normal でも表示が変わることから、多くのWebサイトで意図せず約物の表示具合が変わってしまう可能性があるのではないでしょうか。

Yu Gothic UI 特有の問題？

CJK punctuation kerning: the CSS text-spacing-trim property - Chrome Platform Status によると、text-spacing-trim プロパティは、フォント内に設定されている「halt」という設定によって表示位置や表示幅が変わるようです。

Yu Gothic UIの設定値を Fontforge で覗いてみると、確かに「halt」の設定がされていることが分かります。

Yu Gothic UIにはhaltが設定されている

このhalt情報によって、約物が隣接したときの text-spacing-trim での表示位置・表示幅の調整量が決められるとのこと。問題は、Yu Gothic UIにおいて、halt情報での調整量が鍵括弧の表示幅「1024」と同じ大きさになってしまっているところにありそうです。

上記のhalt情報だと、「元が1024幅の文字に対して、表示位置を左に1024ずらし、表示幅も1024減らす」という調整になるので、 「 は下図のような調整になります。

haltによる表示位置、表示幅の変更

上図のような調整がされるために、本来の表示幅がゼロになり、かつ表示位置もゼロ位置より左側に突き出してしまい、左側の文字 (閉じ鍵括弧) に右側の文字 (開き鍵括弧) が重なってしまっていると思われます。

text-spacing-trim: normal; が適用されたYu Gothic UIの鍵括弧

まとめ

Yu Gothic UI、元になっている游ゴシックから鍵括弧の幅が変更されて半角の1024になっていますが、これが悪影響を及ぼしているように思います。そもそも「halt」というのは「全角の記号を半角表示にしようとした際の調整情報」であるので、今回の鍵括弧のように既に半角幅のグリフでは不要なはずなのですが、制作で半角化した際に見落としてしまったのでしょう…。

Yu Gothic UIの鍵括弧記号のhalt情報を削除するか、鍵括弧記号を全角にするか、そのあたりの対処をすれば解消するとは思いますが、OS標準フォントということで、もしかしたら、そう簡単に差し替えられない事情などあるのかもしれません。

でも、text-spacing-trim のブラウザデフォルト値の挙動も微妙な気がしますね。Webサイト制作者が意図せず文字の表示幅が変わる (部分的に halt が適用状態になる) のって、どうなんだろうなー。

(2024-10-16 追記) Chromeのフォーラム経由でMicrosoftには伝わっているようです。
[text-spacing-trim] Glyph collides if the font is "Yu Gothic UI"

(2024-11-02 追記) 上記フォーラムの10月24日のMicrosoftメンバーのコメントによると、フォントメーカーによる修正は終わった模様。あとはWindows Updateに載せるタイミングの調整段階に入っているようです。