🤷奇妙な「ツ」と「ノ」と右括弧 Discordの新フォント"gg sans"が抱える問題とその背景2022/12/03に公開2022/12/046件Discordfonti18nideaDiscussionEana Hufwe2022/12/03詳しく解説していただいてありがとうございます。 文末に、Ligature を用いて日本語表示を破壊せずアスキーアートを表示する提案がおっしゃいましたが、実際に Ligature の仕組みには Glyphs Substitution Table (GSUB) という OpenType の機能によって実現されています。その名の通りに、GSUB はフォント内に既存する glyph の置き換えルールを定義する表であり、書き換えされたい glyph は設置されないとできない状態であります。つまり、gg sans は日本語表示の現状を改善したいなら、アスキーアート用のグリフを削除するか、全カタカナをフォントに入れるかの二択に迫ると考えます。 参考：OpenType Spec – Glyphs Substitution Table (GSUB) https://learn.microsoft.com/en-us/typography/opentype/spec/gsub 返信を追加ryo-a2022/12/03コメントありがとうございます。 UnicodeにはPrivate Use Area（第15面・第16面）という外字を保存する領域が規定されており、そこにAA用の「ツ」を配置させ、GSUB上で定義すれば問題ないように思われます。 例えば、本文中で挙げたLigature Symbolsや、有名どころのFontawesomeでもPrivate Use Areaが利用されています。 返信を追加Tadashi Saito2022/12/03はじめまして、すごく興味深い問題だな、と読んでいました。 @eana さんのコメントは フォント内に既存する glyph というところが大事だと思いました。 @ryo-a さんのPUA案でも、そうでない日本語領域に「まず定義する」のは避けられないなら ツ 等のデフォルト表示もgg sansの定義に従うので、結局は日本語ユーザーの既存フォントとの不整合は避けられない気がします。 返信を追加Tadashi Saito2022/12/03に更新（追記: 「補足」に気付かず入れ違いで書いてしまいました。すでに削除済みである、という文脈からずれてるところはごめんなさい） それで自分は、別の方向をいくつか考えていました。1と2はできると思いますが、対応コストはありそうです。（3と4は単なるSFです） 案1. 内部でフォントを分ける この問題は、「上書きしていいフォント（非日本語部分）とフォールバック用フォント（日本語部分）が混在している」という問題にも捉えられると思います。だとすると、内部で前者と後者を分ければ解決です。 つまりは、今のgg sansものから日本語部分の3文字を「抜いたフォント」と、その「3文字だけのフォント」を別に持つという案です。まだ内部で使っているだけのようですから、外部のアナウンス・ブランドとしての呼称は変えなくてもよいでしょう。 仮に両者を gg sans l / gg sans j と呼ぶなら、以下でよいはずです。中央の sans 部分は、日本語用グリフがあるユーザーではそこで終わり、なければ gg sans j に落ちます。 font-family: "gg sans l", sans, "gg sans j"; ただ上記CSSの修正と、Discordの内部でフォントを2つ用意する、というコストは増えます。とはいえ、自分が考えた中では一番現実的な案です。 案2. JSでがんばって検知する Discord側が日本語用フォントを指定したい文字は3文字と決まっているので、フォントを分けなくともそこだけ特別扱いすればいい、という考えです。 テキスト表示の部分でがんばって、すべての ツ等 を <span class="gg-fallback">ツ</span> とかに置き換えます。そしてCSSで .gg-fallback { font-family: sans, "gg sans"; } とすれば、sans に ツ を持つユーザーは gg sans を使いません。 欠点として、DOMを書き換えるのはめんどくさいですね……他のロジックともぶつかるかもしれません。 案3. [失敗] CSS Custom Highlight APIをつかう 案2とほぼ変わりませんが、JSで走査した結果でDOMを書き換えず、Rangeにして持っておきます。 そしてCSS Custom Highlight APIをつかってハイライト扱いでスタイルを局所的に変更すれば、DOM構造に変化がなくスタイルを変えられます。Chromeにはすでに入っているようですし…… と思ったのですが、手元のChrome 107ではフォント指定はできないようで、残念ながら失敗しました。 https://jsfiddle.net/wd6t73bx/ 案4. [そんなものはない] CSSセレクタで特定の文字だけ指定 CSSセレクタで文字単位で指定できれば、と一瞬思ったのですが、自分が調べた限り、そんなものは現存しないようです。 自分はCSSの専門知識を持ち合わせていないのですが、少なくとも案1よりは処理量増えそうですし、そういうものなのかもしれません。 @font-face-only("ツ", "ノ", "）") { font-family: sans, "gg sans"; } 返信を追加いーす2022/12/03gg sansには日本語関連の文字としてuni309C/゜(Combining(uni309A)でない方)も収録されている(ツノ削除後とも)のですがこれについてはどう思ってますか? 返信を追加Crystal_142022/12/03右括弧が残っている件についてですが、全角右括弧が左括弧と合わない問題は、gg sansの導入された12月1日より前から発生していたと記憶しています。 おそらくですが、今件があくまで12月から新規に追加していたフォントの問題として対処されたために、ツやノは削除されても右括弧は削除されていないのではないかと思います。 返信を追加
Eana Hufwe2022/12/03詳しく解説していただいてありがとうございます。 文末に、Ligature を用いて日本語表示を破壊せずアスキーアートを表示する提案がおっしゃいましたが、実際に Ligature の仕組みには Glyphs Substitution Table (GSUB) という OpenType の機能によって実現されています。その名の通りに、GSUB はフォント内に既存する glyph の置き換えルールを定義する表であり、書き換えされたい glyph は設置されないとできない状態であります。つまり、gg sans は日本語表示の現状を改善したいなら、アスキーアート用のグリフを削除するか、全カタカナをフォントに入れるかの二択に迫ると考えます。 参考：OpenType Spec – Glyphs Substitution Table (GSUB) https://learn.microsoft.com/en-us/typography/opentype/spec/gsub 返信を追加
ryo-a2022/12/03コメントありがとうございます。 UnicodeにはPrivate Use Area（第15面・第16面）という外字を保存する領域が規定されており、そこにAA用の「ツ」を配置させ、GSUB上で定義すれば問題ないように思われます。 例えば、本文中で挙げたLigature Symbolsや、有名どころのFontawesomeでもPrivate Use Areaが利用されています。 返信を追加
Tadashi Saito2022/12/03はじめまして、すごく興味深い問題だな、と読んでいました。 @eana さんのコメントは フォント内に既存する glyph というところが大事だと思いました。 @ryo-a さんのPUA案でも、そうでない日本語領域に「まず定義する」のは避けられないなら ツ 等のデフォルト表示もgg sansの定義に従うので、結局は日本語ユーザーの既存フォントとの不整合は避けられない気がします。 返信を追加
Tadashi Saito2022/12/03に更新（追記: 「補足」に気付かず入れ違いで書いてしまいました。すでに削除済みである、という文脈からずれてるところはごめんなさい） それで自分は、別の方向をいくつか考えていました。1と2はできると思いますが、対応コストはありそうです。（3と4は単なるSFです） 案1. 内部でフォントを分ける この問題は、「上書きしていいフォント（非日本語部分）とフォールバック用フォント（日本語部分）が混在している」という問題にも捉えられると思います。だとすると、内部で前者と後者を分ければ解決です。 つまりは、今のgg sansものから日本語部分の3文字を「抜いたフォント」と、その「3文字だけのフォント」を別に持つという案です。まだ内部で使っているだけのようですから、外部のアナウンス・ブランドとしての呼称は変えなくてもよいでしょう。 仮に両者を gg sans l / gg sans j と呼ぶなら、以下でよいはずです。中央の sans 部分は、日本語用グリフがあるユーザーではそこで終わり、なければ gg sans j に落ちます。 font-family: "gg sans l", sans, "gg sans j"; ただ上記CSSの修正と、Discordの内部でフォントを2つ用意する、というコストは増えます。とはいえ、自分が考えた中では一番現実的な案です。 案2. JSでがんばって検知する Discord側が日本語用フォントを指定したい文字は3文字と決まっているので、フォントを分けなくともそこだけ特別扱いすればいい、という考えです。 テキスト表示の部分でがんばって、すべての ツ等 を <span class="gg-fallback">ツ</span> とかに置き換えます。そしてCSSで .gg-fallback { font-family: sans, "gg sans"; } とすれば、sans に ツ を持つユーザーは gg sans を使いません。 欠点として、DOMを書き換えるのはめんどくさいですね……他のロジックともぶつかるかもしれません。 案3. [失敗] CSS Custom Highlight APIをつかう 案2とほぼ変わりませんが、JSで走査した結果でDOMを書き換えず、Rangeにして持っておきます。 そしてCSS Custom Highlight APIをつかってハイライト扱いでスタイルを局所的に変更すれば、DOM構造に変化がなくスタイルを変えられます。Chromeにはすでに入っているようですし…… と思ったのですが、手元のChrome 107ではフォント指定はできないようで、残念ながら失敗しました。 https://jsfiddle.net/wd6t73bx/ 案4. [そんなものはない] CSSセレクタで特定の文字だけ指定 CSSセレクタで文字単位で指定できれば、と一瞬思ったのですが、自分が調べた限り、そんなものは現存しないようです。 自分はCSSの専門知識を持ち合わせていないのですが、少なくとも案1よりは処理量増えそうですし、そういうものなのかもしれません。 @font-face-only("ツ", "ノ", "）") { font-family: sans, "gg sans"; } 返信を追加
いーす2022/12/03gg sansには日本語関連の文字としてuni309C/゜(Combining(uni309A)でない方)も収録されている(ツノ削除後とも)のですがこれについてはどう思ってますか? 返信を追加
Crystal_142022/12/03右括弧が残っている件についてですが、全角右括弧が左括弧と合わない問題は、gg sansの導入された12月1日より前から発生していたと記憶しています。 おそらくですが、今件があくまで12月から新規に追加していたフォントの問題として対処されたために、ツやノは削除されても右括弧は削除されていないのではないかと思います。 返信を追加
Discussion
詳しく解説していただいてありがとうございます。
文末に、Ligature を用いて日本語表示を破壊せずアスキーアートを表示する提案がおっしゃいましたが、実際に Ligature の仕組みには Glyphs Substitution Table (GSUB) という OpenType の機能によって実現されています。その名の通りに、GSUB はフォント内に既存する glyph の置き換えルールを定義する表であり、書き換えされたい glyph は設置されないとできない状態であります。つまり、gg sans は日本語表示の現状を改善したいなら、アスキーアート用のグリフを削除するか、全カタカナをフォントに入れるかの二択に迫ると考えます。
参考：OpenType Spec – Glyphs Substitution Table (GSUB)
コメントありがとうございます。
UnicodeにはPrivate Use Area（第15面・第16面）という外字を保存する領域が規定されており、そこにAA用の「ツ」を配置させ、GSUB上で定義すれば問題ないように思われます。
例えば、本文中で挙げたLigature Symbolsや、有名どころのFontawesomeでもPrivate Use Areaが利用されています。
はじめまして、すごく興味深い問題だな、と読んでいました。 @eana さんのコメントは
というところが大事だと思いました。 @ryo-a さんのPUA案でも、そうでない日本語領域に「まず定義する」のは避けられないなら
ツ等のデフォルト表示もgg sansの定義に従うので、結局は日本語ユーザーの既存フォントとの不整合は避けられない気がします。（追記: 「補足」に気付かず入れ違いで書いてしまいました。すでに削除済みである、という文脈からずれてるところはごめんなさい）
それで自分は、別の方向をいくつか考えていました。1と2はできると思いますが、対応コストはありそうです。（3と4は単なるSFです）
案1. 内部でフォントを分ける
この問題は、「上書きしていいフォント（非日本語部分）とフォールバック用フォント（日本語部分）が混在している」という問題にも捉えられると思います。だとすると、内部で前者と後者を分ければ解決です。
つまりは、今のgg sansものから日本語部分の3文字を「抜いたフォント」と、その「3文字だけのフォント」を別に持つという案です。まだ内部で使っているだけのようですから、外部のアナウンス・ブランドとしての呼称は変えなくてもよいでしょう。
仮に両者を
gg sans l/gg sans jと呼ぶなら、以下でよいはずです。中央のsans部分は、日本語用グリフがあるユーザーではそこで終わり、なければgg sans jに落ちます。ただ上記CSSの修正と、Discordの内部でフォントを2つ用意する、というコストは増えます。とはいえ、自分が考えた中では一番現実的な案です。
案2. JSでがんばって検知する
Discord側が日本語用フォントを指定したい文字は3文字と決まっているので、フォントを分けなくともそこだけ特別扱いすればいい、という考えです。
テキスト表示の部分でがんばって、すべての
ツ等 を<span class="gg-fallback">ツ</span>とかに置き換えます。そしてCSSでとすれば、
sansにツを持つユーザーはgg sansを使いません。欠点として、DOMを書き換えるのはめんどくさいですね……他のロジックともぶつかるかもしれません。
案3. [失敗] CSS Custom Highlight APIをつかう
案2とほぼ変わりませんが、JSで走査した結果でDOMを書き換えず、
Rangeにして持っておきます。そしてCSS Custom Highlight APIをつかってハイライト扱いでスタイルを局所的に変更すれば、DOM構造に変化がなくスタイルを変えられます。Chromeにはすでに入っているようですし……
と思ったのですが、手元のChrome 107ではフォント指定はできないようで、残念ながら失敗しました。
案4. [そんなものはない] CSSセレクタで特定の文字だけ指定
CSSセレクタで文字単位で指定できれば、と一瞬思ったのですが、自分が調べた限り、そんなものは現存しないようです。
自分はCSSの専門知識を持ち合わせていないのですが、少なくとも案1よりは処理量増えそうですし、そういうものなのかもしれません。
gg sansには日本語関連の文字としてuni309C/
゜(Combining(uni309A)でない方)も収録されている(ツノ削除後とも)のですがこれについてはどう思ってますか?右括弧が残っている件についてですが、全角右括弧が左括弧と合わない問題は、gg sansの導入された12月1日より前から発生していたと記憶しています。
おそらくですが、今件があくまで12月から新規に追加していたフォントの問題として対処されたために、ツやノは削除されても右括弧は削除されていないのではないかと思います。